이번 프로젝트를 진행하며, 미리 알았더라면 좋았을 것들에 대해 기록해보고자 한다.
👆공통 NAV와 FOOTER 관리는 ROUTER에서
이번 프로젝트에서 홈페이지 전역에 걸쳐, 만약 로그인을 한 상태라면 유저의 이름과 장바구니에 담은 목록을 nav바가 가지고 있어야 했다. 처음에는 팀원 중 한명이 만든 nav component를 화면마다 가져다가 넣으면 되는거 아닌가? 하는 단순한 생각을 했다. 그러나 문제는 state를 관리해야 하는데, 이걸 어떻게 하느냐 였다. router 안에서 최상단 div를 만들어 state 관리를 시키고 함수를 가져다 써야 한다는 등 여러가지 의견이 오갔다.
그 다음으로 열심히 검색하며, 생각해낸 아이디어는 navbar안에 login을 확인해주는 state를 만들어 페이지 이동 시마다 확인하여 nav 바 안에 있는 state를 업데이트 해 주는 것이었다. "페이지 이동 시에 useEffect를 통해 local storage에 token이 있으면 로그인 한 상태를 저장"하는 방식으로 만들면 되는 것 아닌가 생각했다.
그러나 반복을 해야한다는 것은 결국 또 다른 해결방법이 있다는 뜻임을 기억해내게 되었고,, 해결방법을 찾았는데 생각외로 엄청 간단한 것이었다. 😂 다음과 같이 router에서 지정해 주는 것이었다. ㅎㅎㅎ
👆API는 config.js를 만들어 헤매지 않도록 관리하기
처음에는 각자의 통신짝꿍 백엔드 개발자들과 통신을 해야 하기에 API 주소를 일일이 써 가며 코드를 짰다. 그러나 우리 팀원들에게 공통적으로 돌아왔던 피드백. 바로 API주소를 관리하는 곳에 만들어 IP주소만 바꾸면 바로 테스트 할 수 있게 관리하라는 것이었다. 테스트 하다가 나중에 모아서 정리하면 더 테스트하기에 좋지 않을까 생각했지만, 결국에는 해 보니 처음부터 관리했더라면 훨씬 좋았을 것 같다. merge했을 때 서로의 화면이 정상적으로 나오는지 확인하기도 쉬울 뿐더러, API를 찾느라 헤매지 않아도 되었을테니 말이다.
아래와 같이 config.js 파일을 만들어 공동관리하고
다음과 같이 import하고 사용한다.
👆variables.scss 잘 활용하기
공통 theme color와 font-size, 그리고 자주 쓰는 속성은 아래와 같이 정리해주고 공통으로 사용하는 것이 도움이 많이 되었다.
다음 프로젝트 때에는 위 세가지는 필수적으로 잘 적용하며 해볼 것!
