실전 프로젝트에서는 원래 배운 내용들을 깃허브에 올리는 방식이 아닌 하루하루 진행 상황과 느낀점들을 기록하기 위해서 벨로그에 TIL을 작성하기로 했다.
1. 진행상황
뷰 만들기
오늘은 어제 이어서 만들던 마이페이지 뷰를 만드는 중이다. 마이페이지에서 Nested routes를 사용해서 관심 목록에 세가지 카테고리를 만들어서 각각 다른 세 개의 컴포넌트들을 만들어서 랜더링시켜줘야해서 생각보다 시간이 오래 걸리는 중이다. 빨리 뷰를 다 짜고 기능구현을 하고 싶다.
2. 발생했던 문제들
아이콘이 모바일 화면에서 밖으로 나오면, 원래 자리에서 벗어남.
아이콘에 absolute를 주어 자리를 옮겼는데, 부모에게 relative를 주지 않아서 생긴 문제였다. 부모에게 relative를 주지 않아, 가장 밖에 div에 맞춰서 움직여서 모바일 화면에서 벗어나면 문제가 일어났다. 따라 부모에게 position : relative를 줘서 해결했다.
Nested routes 문제
한 컴포넌트에서 두번 나눠서 만들을려고 했으나, outlet 지정해준 곳에서 두번 렌더링되거나 , 같은 곳에서 렌더링되어서 실패했다. 이를 해결하고자 위의 방법들로 해보았으나 구현하지 못했다. 따라서 그냥 한쪽은 다른 페이지로 navigate해주기로 했다.
2. 느낀점
뷰를 빨리 짜고 TypeScript, Recoiil, React-query로 기능구현을 해봐야겠다. 오늘도 팀원분과 이야기하면서 느꼈지만, 하다가 시간이 부족할거 같으면 JS랑 redux-toolkit으로 되돌아가기로 했다. 제발 큰 막힘없이 TypeScript, Recoiil, React-query로 기능이 구현됐으면 좋겠다.
:)