7월 1일에 1차 프로젝트 최종발표를 진행하면서, 약 2주간의 1차 프로젝트 기간이 마무리되었다.
프로젝트 초반에 팀원 중 한 분이 하차하게 되셔서 걱정이 많았었던 적도 있었다.
하지만, 팀원분들 모두 열심히 하시고 잘하셔서 걱정이 금방 사라졌고
한 분의 빈자리가 느껴지지 않을 정도였다. 덕분에 행복하게 프로젝트를 진행할 수 있었다!

🤔 어떤 프로젝트?

우리 팀이 클론하기로 선정한 사이트는 러쉬(LUSH)라는 사이트이고,
2주라는 짧은 기간 안에 이루어지는 첫번째 프로젝트에 어울리는
기본에 충실한 웹 사이트라고 생각되었기 때문에 선택하게 되었다.

🧐 어떤 기능?

우리 팀이 구현한 기능에는 로그인 / 회원가입, 이미지 슬라이더, 리뷰, 장바구니 기능 등이 있으며,
그 중에 내가 담당했던 부분은 아래와 같다.

FE - 제품 상세 페이지 / 리뷰 / 장바구니
BE - 상품 리스트 API

기능을 구현하면서 어려움을 느꼈던 부분이 몇 가지 있었는데 기억에 남는 부분들을 설명해보려 한다.

리뷰 추가, 삭제, 수정 시에 리렌더링 기능

이 부분을 구현하는데 하루종일 걸렸는데, 생각해보면 아주 쉬운 개념이었다.

처음 시도했던 방법은 데이터가 바뀔 때마다 리렌더링될 수 있도록 useEffect 훅의 의존성 배열에
productInfo의 변경을 감지하고 리렌더링되도록 코드를 구현했다.
하지만, 무한 리렌더링되는 현상이 발생했으며 그 원인에 대해 생각을 해봤는데 첫 렌더링 때
productInfo는 빈 배열이고 useEffect 훅이 실행된 후 fetch를 통해 가져온 데이터가 productInfo에 할당된다.
그 과정에서 productInfo가 변경되었기 떄문에 useEffect 훅이 한 번 더 실행된다.
하지만 데이터는 변하지 않았지만 [{데이터}] !== [{데이터}]이기 때문에 의존성 배열 내부의 productInfo가
변경되었다고 인식해서 무한 리렌더링이 발생한다.

문제를 해결하기 위해 isUpdated라는 상태를 만들었고,
리뷰 추가, 삭제, 수정 완료 후에 isUpdated를 true로 변경해줌으로써 리뷰 추가, 삭제, 수정 시에
리렌더링 기능을 구현할 수 있었다.

장바구니 기능

장바구니 추가 기능을 처음 구현할 때 아래와 같이 구현을 했었다.



그런데 상품 아이디가 같은 상품을 장바구니에 중복해서 추가하는 경우 합쳐지지 않는 문제가 생겼다.

위와 같이 상품 아이디가 이미 장바구니에 존재하는 경우 map을 활용해
원래 존재하는 값과 합쳐질 수 있도록 로직을 구현해서 문제를 해결할 수 있었다.

상품 리스트 API

백엔드 쪽에서는 상품 리스트를 카테고리에 따라 분류하고, 조건에 따라 정렬하는 부분을 맡았는데
코드를 짜고 보니 반복되는 부분이 정말 많았다.
반복되는 부분을 변수로 만들고 멘토님의 도움을 받아 새롭게 알게 된 queryRawUnsafe라는 메소드를
사용해서 반복되는 부분을 최소화했다.

👍 잘한 점?

팀원 4명 모두 위워크에 매일 나오면서 함께 프로젝트를 진행했었는데,
덕분에 매일 스탠드업 미팅을 하고 본인의 진행 상황을 빠르게 공유하고,
막히는 부분이 생기면 바로 공유하여 문제를 빠르게 해결했던 부분이 아주 좋았다.
각자의 의견을 적극적으로 말하고 다른 팀원의 의견도 열린 마음으로 받아들이는
자세를 가지고 있었기 때문에 수월하게 프로젝트가 진행될 수 있었다.

😢 아쉬운 점?

프로젝트를 진행하면서 충분히 소통했지만, 클래스명 네이밍 컨벤션과 같이 디테일한
부분까지 신경쓰지 못했던 점과 SCSS의 vairable / extend 등 여러 기능을 사용하지
못했던 점이 아쉬웠다.
개인적으로 아쉬웠던 부분은 장바구니 삭제 / 수정 기능을 구현할 때 새로고침하는 메소드를
추가해야 정상적으로 기능이 동작하는 부분인데, 1주일의 리팩토링 기간동안 꼭 해결할
생각이다.

회고를 마치며

1차 프로젝트가 성공적으로 끝났다. 아쉬운 점도 조금 있지만, 개인적으로 만족스러웠던 프로젝트였다.
팀원분들께 감사의 말을 전하고 싶고, 앞으로 1주일의 리팩토링 기간도 알차게 보내고 싶다.
저스트코드를 시작하고 벌써 8주라는 시간이 흘렀는데, 시간이 정말 빠르다...
정신없이 8주가 지나가 버린 것 같은데, 남은 기간은 조금 더 계획적으로 시간을 보낼 생각이다!

🔥🔥 저스트코드 5기 화이팅!! 🔥🔥




러쉬 클론코딩 시연 영상
러쉬앤코드 프론트엔드 깃허브
러쉬앤코드 백엔드 깃허브