클론코딩 주차가 밝았다. 어제의 피로가 완전히 가시지 않아 피곤했지만 바쁘게 달리기 위해 커피를 수혈했다.
이번 주에 우리 팀은 KREAM을 클론코딩하기로 했다. KREAM은 간단하게 말하자면 한정판 신발이나 의류 등을 리셀하는 서비스이며 나도 종종 이용하던 서비스였다. 처음엔 다들 잘 모르실 것 같아서 딱히 말은 안하고 있었는데 다른 분이 먼저 제안을 해주셔서 바로 찬성쪽에 한표를 던졌다.
내가 맡게 된 기능은 크림에 보이는 메인 페이지, 상품 페이지, 헤더와 푸터 등의 레이아웃, 그리고 로그인과 회원가입이다. 지난 주는 프론트를 담당하는 사람이 나를 포함에 2분 더 계셨지만 이번 주부터 각 팀마다 2명씩이기 때문에 지난 주와 스코프가 비슷해도 할 일이 늘어 날 수 밖에 없었다. 뭐 많으면 많은데로 작업량을 늘리면 되지 않을까 싶다.
프론트를 맡으신 다른 분과 얘기를 나눠보고 먼저 뷰를 만들기로 했다. 처음 시작한 건 헤더와 푸터였다. 생각보다 쉬워 보였는데 각 요소에 있는 값들을 실제 서비스 되는 페이지와 비슷하게 만들려다 보니 어려움이 있었고 결국엔 사이트를 직접 뜯어보면서 맞췄다
헤더와 푸터를 구현 한 후에 무한 캐러셀 구현을 위해 여러가지 레퍼런스들을 보다가 크게 3가지 방법 정도가 있다는 것을 알게 됬다. 첫 번째는 바닐라 자바스크립트로 구현하는 방법이였고 두번째는 리액트 훅을 이용한 방법 마지막은 라이브러리를 이용하여 구현하는 방법이였다. 일단 리액트 프로젝트를 하는데 바닐라 자바스크립트로 코드를 구현할 필요가 있을까라는 생각이 들어 패스했고 라이브러리와 리액트 훅을 이용하여 구현하는 방법 중에 고민하다가 라이브러리는 나중에 써보기로 하고 리액트 훅을 이용하여 먼저 구현해 보기로 했다.
리액트 훅을 이용하여 구현은 성공했는데 캐러셀 하단에 나오는 dot라던가 화살표 버튼 등의 사소한 부분들도 일일히 구현이 필요해서 이젠 원리를 이해했기 때문에 라이브러리를 이용하기로 했다.
리액트에서 가장 많이 쓰이는 캐러셀 라이브러리가 리액트 슬릭이라고 해서 슬릭을 이용해 구현을 시작했다. 슬릭에서 주는 예제 코드가 함수형이 아닌 컨포넌트형으로 주어서 이걸 함수형으로 바꾸는 작업부터 시작했는데 이것 저것 뜯어고치다 보니 슬릭이 제대로 동작하지 않기 시작했다. 그래서 결국은클래스형으로 다시 바꾸게 되었다.
두번째 문제는 캐러셀은 만들어 졌는데 dot나 버튼들이 보이지 않았다. 마진을 줘서 어떻게든 보이게 하긴 했는데 화살표 버튼은 보이지 않았다. 이것도 CSS를 뜯어 보면서 고쳐봐야 겠다. 캐러셀 때문에 이것 저것 만지다보니 하루가 금방 지나가 버렸다.
