이번 주에는 팀 구성원들이 어떤 사이트를 정해 똑같이 만들어보는 클론코딩을 진행했다.
우리 조는 많은 분야에서 활용할 수 있는 장바구니 기능을 경험하고 싶어 마켓컬리로 주제를 정했다.
이미 뷰와 기능이 정해져 있기 때문에 어떻게 그 기능을 구현했을지 최대한 생각하면서 프로젝트를 진행했다.
또 개인적으로는 컴포넌트를 최대한 잘게 구성해보는 목표를 잡았다.
내가 맡은 부분은 상세페이지와 장바구니페이지의 뷰, 그리고 장바구니와 관련된 CRUD였다.
뷰를 만들 때는 CSS뷰어라는 도구를 활용해 실제 마켓컬리에서 사용했던 요소를 최대한 똑같이 사용해보려고 했다.
그러면서 주로 사용했던 button, div, span 과 같은 요소 이외에도 다양한 요소를 써보면서 특정 상황에서 더 적절하게 사용할 수 있는 요소가 많다는 것을 알 수 있었다. 다양한 요소들을 적재적소에 사용하려면 그 종류나 활용법을 익히는
노력이 많이 필요하겠다는 생각이 들었다.
장바구니 페이지를 만들 때는 특히 컴포넌트에 신경을 많이 썼다. button, input, grid, icon 등 작은 element를 최대한 컴포넌트로 만들어서 재사용할 수 있도록 해보고, 페이지 구성도 여러 컴포넌트를 쪼개서 만들어보려고 했다.
이렇게 컴포넌트를 나누는 이유는 우선 필요한 부분은 다시 재사용해 효율적으로 코드를 짜는데 도움을 주고, 또 데이터에 변화가 있을 때 페이지 전체가 아닌 컴포넌트 단위로 렌더링이 이루어져 불필요한 렌더링을 줄인다고 생각했다.
실제로 컴포넌트를 많이 나누는 방식으로 작업을 하니 가장 어려웠던 부분은 드릴링이었다. 데이터와 함수를 상위 컴포넌트에서 프롭스로 전달해야 하는데 컴포넌트를 여러 번 거쳐가 구조가 복잡하게 느껴졌다. 또 다른 방법으로는 하위컴포넌트에서 데이터를 직접 관리하고 리덕스에 저장해 상위컴포넌트가 사용하는 방법이 있다.
또 한 가지 어려웠던 점은 장바구니 페이지나 상세페이지에서 새로고침을 할 경우 계속 에러가 발생하는 부분이었다. 원인을 생각했을 때 새로고침을 하면 유즈이펙트로 서버의 데이터베이스에서 데이터를 불러와야 하는데, 불러오기 전에 다음 함수가 실행되어 값을 읽어주지 못하기 때문에 에러가 발생한다고 생각했다. 그래서 데이터를 불러오기 전 까지는 빈 태그를 리턴해 주도록 하고, 데이터가 있을 때만 읽을 수 있도록 ? 를 사용해 해결했다. 하지만 두 방법 모두 근본적인 해결책은 아니며 견고하게 코드를 짜야 에러를 방지할 수 있다는 피드백이 있었다. 이 부분에 대한 고민이 필요하다.
이외에도 여러 가지 막히는 부분이 있었다. 장바구니를 모두 삭제하고 새로고침했을 때 계속 에러가 발생해 위와 같은 오류인 줄 알았지만 reduce와 관련된 오류였다. array.reduce()를 사용할 때 빈 배열에 사용하는 경우 에러가 발생하기 때문에 초기값을 설정해줘야 안전하다. 초기값을 0으로 설정해 문제를 해결할 수 있었다.
또 array.push()가 어떤 값을 return하는 함수가 아니라 기존의 array에 새 요소를 추가하기 때문에 setList()에 사용할 수 없다는 점을 배울 수 있었다. 이런 문법적인 부분들에서 계속 문제가 있어 더 많은 공부가 필요하고 느낀다.
이번 프로젝트에서도 많은 어려움이 있었고, 처음 계획했던 부분까지 모든 기능을 구현하지는 못했다.(메인페이지에서 장바구니 추가하기) 그럼에도 실제 서비스에서 어떤 방식으로 페이지를 구성하는지, 어떤 요소를 어떻게 사용하는지 직접 코드를 짜면서 생각해볼 수 있었다. 많은 부분을 배웠다고 생각한다.
금요일부터는 실전프로젝트가 시작되었다. 배운 모든 걸 써먹고 새로운 부분까지 구현해 낼 수 있도록 열심히 해야 하고 또 6주 동안 진행되는 프로젝트이기 때문에 컨디션 관리도 잘 해야겠다는 생각이 든다. 프로젝트와 개인적인 공부 모두 좋은 결과를 만들 수 있었으면 한다. 다음주는 기본기능을 구현하고 영상채팅 기능과 관련된 고민이 주로 이루어질 것 같다.
https://www.youtube.com/watch?v=Zf4id7Edn8c