WIL 7주차
📖 WIL 7주차
🌞 7주차 스케쥴
이번주차는 실전프로젝트 전 클론코딩주차이다. 현재 운영하는 완성된 사이트를 따라 만들어 보며 실제 서비스 구현에서 어떤 능력이 필요한지 공부하고 사용해본다.
🌞 회고
우선 우리 팀은 배민문구를 클론코딩 하기로 정했다. 나는 클론코딩이라는 주제에 맡게 우선 css 요소들을 최대한 똑같게 만들고 싶었고 그 부분을 가장 먼저 신경썼다. 탭을 누르면 해당 위치로 이동한다던지 스크롤에 따라 헤더박스가 사라지는 것, 사이드바의 위치등 실제 사이트와 똑같이 재현했고 프로젝트 발표와 동료들에게서 좋은 평가를 받을 수 있었다. 그리고 받아오는 데이터를 이용하기 위해 알고리즘 공부를 하며 익힌 함수들인 slice, splice, sort, toString, replace 등을 사용해보며 다시 한번 개발에 흥미를 느꼈다.👀
이번주엔 함께 진행한 팀원이 로그인/회원가입과 메인화면페이지를 구현해보고 싶다고 하여 맡겼지만 발표 당일까지 로그인/회원가입이 구현되지 못해 데이터의 흐름과 axios의 사용방법, 로컬스토리지를 사용하는 방법들을 알려드리고 내가 진행한 부분들과 합치고 수정하여 프로젝트를 발표할 수 있었다. 팀 프로젝트는 소통이 정말 중요하다고 생각하는데 이유를 모르겠지만 팀원이 어려움을 느끼는것 같아 도움을 드리고 싶었지만 프로젝트 내내 진행과정을 숨기고 보여주지 않고 혼자 해보고 싶다고 하다가 마지막날 도움을 요청하니 좀 당황스러웠다.🤦
그래도 이번주엔 확실하게 폴더구분을 하여 깃을 사용하여 충돌의 문제도 없었고 배포할때의 문제도 없었기 때문에 무사히 프로젝트를 마칠수 있었다.💪
🌧 트러블슈팅
상품 상세 페이지 하단에 랜덤추천 품목들을 클릭하여 이동할때 navigate(id를 파라미터로 전달)를 이용했다. 이렇게 페이지를 이동할경우 주소창은 변하지만 리로드 되지 않는 문제를 발견했다. 구글링 결과 네비게이트로 이동시 흔히 일어나는 상황으로 파라미터는 변했지만 이전페이지와 이동한페이지가 같은 층에 있기 때문에 리로드 되지 않았다. 즉 useEffect를 다시 동작하지 못한다. 문제를 해결하기위해 useEffect의 의존성 배열에 네비게이트로 전달되는 파라미터인 id를 넣어 문제를 해결했다. 즉 useEffect가 id를 관찰하게 하며 id가 변하면 다시 useEffect 안의 디스패치가 작동한다.
- 상세페이지 하단의 랜덤추천 품목들은 컴포넌트로 분리되어있다. 이 상태로 부모요소인 state가 변하면 자식인 랜덤추천품목들이 계속해서 렌더링 된다. 즉 옵션을 선택할때나 심지어 후기를 작성하는 동안에 모든것에 반응하여 랜덤추천이 계속해서 리로드 되는 문제가 발생했다.
사실 그동안 단순한 웹들을 만들며 이런 경우들을 무시해 왔다. 항상 자식 컴포넌트들이 움직임이 없는 것들이였기에 리렌더링 된다해도 console.log로 찍어 확인하지 않는 이상 유저들은 그것이 계속 리렌더링 된다는걸 모르기도 하고 나조차 중요성을 느끼지 못했다. 하지만 이번 경우는 랜덤추천품목이 계속해서 변하기 때문에 "아 이래서 리렌더링의 개념이 중요했구나" 깨닳았다. 문제 해결을 위해 자식요소를 React.memo로 감싸고 자식 컴포넌트에 내려주는 props는 useCallback으로 감싸 불필요한 리렌더링을 방지했다. 역시 이론적인 공부보다 이렇게 실제 상황을 느껴보고 적용시켜 보는게 훨씬 도움이 되는것 같다. 이것만으로도 이번 클론 코딩의 목표는 이룬것 같다.
🌧 프로젝트 발표 피드백
- 앞으로 진행될 실전프로젝트에선 header,footer 뿐만 아니라 버튼 등 작은 단계로 컴포넌트를 나눌것.
- default api 를 설정하여 따로 저장하고 자주 쓰이는 컬러들도 함수화 시켜서 저장한다. 그래야 유지보수가 편하다.
🌳 이번주 나의 토양
https://velog.io/@leejpsd/React.memo-useMemo-useCallback
클론 코딩주차에 가장 큰 도움이 되었던 React.memo & useMemo & useCallback에 대해 공부하며 따로 포스팅하였다.