실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.
1. 진행상황
뷰 만들기
오늘은 Bar 추천 페이지 뷰를 만드는 중이다. Bar 추천 페이지도 마이페이지와 같이 Nested routes를 사용해서 관심 목록에 두가지 카테고리를 만들어서 각각 다른 두 개의 컴포넌트들을 만들어서 랜더링시켜줘야해서 생각보다 시간이 오래 걸리는 중이다.
2. 발생했던 문제들
Bar 추천 페이지에서 Nested routes로 인해 카테고리 설정을 해야 뷰가 보이는 문제.
Bar 추천 페이지에서는 올라온 글들이 모여있는 탐색 카테고리와 자신이 올린 글을 확인할 수 있는 my 카테고리 두 개 있다. 이 둘을 마이페이지에서 했던 것과 같이 Nested routes를 이용해서 구현을 했는데, /bar에 들어왔을 때 두 개의 자식 routes이 실행되지 않아 버튼만 있는 빈페이지가 되었다. 이 문제를 해결하기 위해 /bar에 탐색 카테고리에 컴포넌트들을 다 넣고, /barmylist 하나만 nested routes로 구현해봤는데, 탐색 카테고리의 친구들이 사라지지 않았다. 그래서 /bar로 navigate시킬 때는 /bar/barlist로 navigate 시켜 탐색 카테고리가 렌더링 된 화면으로 보내주는 것으로 해결했다.
2. 느낀점
뷰를 빨리 짜고 TypeScript, Recoiil, React-query로 기능구현을 해봐야겠다. 뷰를 짜는데 생각보다 시간이 많이 걸리는 것 같다. 내일 있을 디자인 피드백에서 크게 문제가 없었으면 좋겠다. 피그마에 만들어 둔 와이어 프레임이 엎어지는 불상사가 생기지 않았으면 좋겠다.
