전남대 FE_정서윤 3주차 Step3, 4 #67
Conversation
step1, 2 코드리뷰 피드백 반영 완료하였습니다!step1,2 pr을 생성한 브랜치에서 작업하면 머지할 때 충돌이 날까봐 마지막 pr 브랜치에서 작업하였는데 맞는 방식인가요? 보통 어떻게 하는지, 충돌 위험이 없는지 궁금합니다. |
|
|
||
| if (!currentTheme) { | ||
| return null; | ||
| navigate('/'); | ||
| return <ErrorWrapper>The requested theme does not exist</ErrorWrapper>; |
There was a problem hiding this comment.
#74 (comment) 코멘트와 같은 피드백 드려요! 33번 라인에서 렌더링 과정에서 사이드 이펙트를 발생시키고 있네요. useEffect를 활용해서 실행하는게 좋겠습니다. 콘솔에도 아래와 같은 주의 메세지가 뜨고 있어요.
There was a problem hiding this comment.
위 피드백 반영하였더니 메인페이지의 각 테마 아이콘 클릭시 테마페이지로 넘어가지 않던 오류가 해결되었습니다!
|
|
||
| if (!currentTheme) { | ||
| return null; | ||
| navigate('/'); | ||
| return <ErrorWrapper>The requested theme does not exist</ErrorWrapper>; | ||
| } |
There was a problem hiding this comment.
메인페이지의 테마섹션 부분인 src/components/features/Home/ThemeCategorySection/index.tsx를 axios -> React Query로 불러오면서 각 테마 아이콘을 클릭하면 테마 페이지로 넘어가지 않고 테마 섹션 대신 No themes available이 뜹니다..
증상 파악을 해보면 /에서 /theme/:themeKey 접근시 곧바로 /으로 돌아오는걸 알 수 있습니다. 이를 통해 원인 분석의 시작점을 삼아볼 수 있겠죠. /theme/:themeKey를 통해 렌더링 되는 컴포넌트에서 /로 redirect 하는 코드는 해당 파일의 33번 라인인걸 알 수 있습니다.
코드의 첫 원인 분석 지점을 파악했으니 근본 원인 파악을 해봐야겠죠. currentTheme이 없어서 실행이 된건데 실제로 currentTheme이 undefined로 나오는걸 콘솔이나 개발자 도구를 통해 알 수 있어요. 여기서 30번 라인은 3가지 가능성이 있습니다.
data가undefined이거나data.themes가undefined이거나themeKey와 같은key를 가진theme이 없거나요.
?.은 optional chaining이니까 undefined가 될 수 있는 가능성이 있다는 거겠죠. 이 부분도 data.themes가 undefined라는걸 알 수 있습니다. data.theme가 undefined라는건 data가 타입으로 정의한 방식과는 다르게 반환되고 있다는 의미입니다. 실제로 data가 배열로 전달이 되고 있죠. react-query를 통해 fetchThemes가 조회되고 있기에 이는 아래 가능성이 있어요.
fetchThemes가 예상한 응답을 반환하지 않는다.useQuery로 데이터를 조회시themesquery key가 같지만 데이터 구조가 다르게 저장하고 있는 코드가 있다.
1번은 크롬 개발자 도구에서 네트워크 탭을 통해 기대하는 응답을 반환하고 있다는걸 알 수 있어요. 그럼 2번인데 이를 증명해보려면 홈화면에서 /theme/:themeKey로 이동하는게 아니라 브라우저에 URL을 /theme/:themeKey로 직접 입력해서 이동해보니 제대로 페이지가 렌더링된다는 걸 통해 가설을 증명해볼 수 있겠죠.
실제로 원인은 2번 useQuery의 문제였는데요, 아래의 2가지 컴포넌트에서 Theme[], GetThemesResponse로 데이터 구조는 다른데 같은 query key를 가지고 있다보니 /에서 Theme[]가 캐싱되고 얼마 시간이 흐르지 않은 뒤에 /theme/:themeKey에 접근해서 같은 query key로 조회하다보니 GetThemesResponse가 아니라 Theme[]이 반환되는거죠. react-query는 server state 관리를 위해 만들어진 라이브러리라서 query key, stale time, gc time에 대한 이해가 필수라 이에 대해 공식문서 읽으시고 이해하시는걸 추천드려요.
그래서 src/api/api.ts에 있는걸 사용하도록 fetchThemes는 삭제하는게 좋겠고요, 같은 query key를 사용한다면 데이터 구조를 일치시키는게 좋겠습니다.
| @@ -0,0 +1,32 @@ | |||
| # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 클론코딩 | |||
There was a problem hiding this comment.
step1,2 pr을 생성한 브랜치에서 작업하면 머지할 때 충돌이 날까봐 마지막 pr 브랜치에서 작업하였는데 맞는 방식인가요? 보통 어떻게 하는지, 충돌 위험이 없는지 궁금합니다.
제가 step 1, 2를 먼저 squash merge 해서 충돌이 발생했네요. 말씀해주신대로 지금은 충돌 위험이 있는 브랜치 전략이긴 합니다. 운영하시는 분들께 제가 문의해뒀어요. 해당 PR에 한해서는 일단 충돌 해결해서 푸시되면 좋을 거 같아요!
안녕하세요 멘토님! step3 과제중 오류 해결이 안 되어서 질문 드립니다.
메인페이지의 테마섹션 부분인 src/components/features/Home/ThemeCategorySection/index.tsx를 axios -> React Query로 불러오면서 각 테마 아이콘을 클릭하면 테마 페이지로 넘어가지 않고 테마 섹션 대신 No themes available이 뜹니다..
혹시 어떤 문제인지 알 수 있을까요? 항상 코드리뷰 해주셔서 감사합니다!