[FE] Refactor/#642: 북마크 및 전체보기 페이지 API 로직 수정 및 React-Query 적용 #644
Conversation
TopicCardList는 재사용을 위해 만들어진 코드이나 Axios, React Query 를 적용하면서 사용하기 애매해졌다. 이에 따라 TopicCardList를 제거하고 각 페이지에서 그 책임을 이어받는다.
frontend/src/apis/new/index.ts
Outdated
| export const getBookmarks = () => | ||
| http.get<TopicCardProps[]>('/members/my/bookmarks'); | ||
|
|
||
| export const getNewestTopics = () => | ||
| http.get<TopicCardProps[]>('/topics/newest'); | ||
|
|
||
| export const getAllTopics = () => http.get<TopicCardProps[]>('/topics'); | ||
|
|
||
| export const getBestTopics = () => http.get<TopicCardProps[]>('/topics/bests'); |
There was a problem hiding this comment.
아하 어차피 각각 분리가 되어있으니 바로 url을 넣어주신 거군요! 너무 좋습니닷 👍
There was a problem hiding this comment.
네네 각 요청 함수에 맞는 React Query 훅을 작성할 계획이니 url을 파라미터로 받아올 환경이 아닐테고 그에 따라서 url을 직접 지정해주었습니다.
frontend/src/index.tsx
Outdated
| <App /> | ||
| </ErrorBoundary> | ||
| </ThemeProvider>, | ||
| <QueryClientProvider client={queryClient}> |
There was a problem hiding this comment.
헉?... Tanstack query를 쓰려면 'QueryClientProvider 컴포넌트로 감싸주고 QueryClient 값을 Props로 넣어줘야 합니다'를 발견했습니다... 저 잘못 사용했군요 얼른 고쳐야겠네여..~ 허허허헣
frontend/src/pages/Bookmark.tsx
Outdated
| const { isLoading, bookmarks: topics } = useGetBookmarks(); | ||
|
|
||
| if (isLoading) | ||
| return ( |
There was a problem hiding this comment.
이 부분이 저번에 아이크가 말했던 suspense로 바꿀 수 있는 부분일까요?!
There was a problem hiding this comment.
그런 것 같습니다 공식문서에 의하면 suspense option을 true로 바꾸면 서스펜스 모드를 사용할 수 있다고 안내하네요.
status 값과 연관이 깊은것 같은데 확인후 Suspense 컴포넌트 사용해서 선언적으로 처리해보겠습니다.
There was a problem hiding this comment.
https://tanstack.com/query/v4/docs/react/reference/useQuery
위 링크에서 suspense 검색해보시면 나올거에용
| </Flex> | ||
| </Flex> | ||
| <Box> | ||
| <SkeletonBox width="100%" $maxWidth={212} ratio="1.6 / 1" /> |
There was a problem hiding this comment.
styled component로 만들었던 SkeletonImg나 SkeletonTitle을 효율적으로 쓸 수 있도록 SkeletonBox를 만들었군요 아주 멋집니다 👍
There was a problem hiding this comment.
스켈레톤 한 번 싹 정리해볼 필요가 있겠네용. 예전 디자인이랑 많이 달라져서..
frontend/src/pages/Bookmark.tsx
Outdated
| <TopicCardList | ||
| url="/members/my/bookmarks" | ||
| errorMessage="로그인 후 이용해주세요." | ||
| commentWhenEmpty="버튼으로 지도를 즐겨찾기에 담아보세요." | ||
| pageCommentWhenEmpty="메인페이지로 가기" | ||
| routePage={goToHome} | ||
| > |
There was a problem hiding this comment.
오호.. 혹시 TopicCardList를 다른 걸로 대체한 이유가 있으실까요?!
There was a problem hiding this comment.
TopicCardContainer와 기능상 별 차이가 없는데 props는 또 달라서 코드를 분석하는데 헷갈릴 가능성이 있다고 판단하여 제거할 생각입니다.
이 컴포넌트는 실제로 데이터를 페칭하지도 않고 정말 단순히 TopicCard를 감싸는 용도라.. 과연 분리하는게 의미가 있을지 고민입니다. 패트릭의 생각은 어떠한가요?
완전히 삭제하지 않은 이유는 충돌 우려때문인데 확인 후 완전히 제거가 가능하면 제거하도록 하겠습니다.
운영서버에 머지해야 확인가능할 것 같습니다. 기존 로직을 사용하는 운영서버와 request 값은 동일한데 cookie와 도메인 설정 문제로 실패하는 것으로 확인됩니다.
* 마운트 시 리페칭 해제 * 윈도우 포커스 시 리페칭 해제 * 일정 주기로 리페칭 해제 * 받아온 데이터 stale 시 리페칭 해제
frontend/src/apis/new/http.ts
Outdated
|
|
||
| const API_POSTFIX = 'api'; | ||
| const BASE_URL = process.env.APP_URL || `https://mapbefine.com/${API_POSTFIX}`; | ||
|
|
||
| const axiosInstance = axios.create({ | ||
| baseURL: BASE_URL, | ||
| headers: { Authorization: `Bearer ${localStorage.getItem('userToken')}` }, |
There was a problem hiding this comment.
const axiosInstance = axios.create({
baseURL: BASE_URL,
headers: token ? { Authorization: `Bearer ${token}` } : {},
헤더에 저렇게 안해주면 제가 맡았던 home페이지에서 "Bearer "이게 Authorization에 무조건 들어가서 에러나는것 같은데 잘 동작하나요?
There was a problem hiding this comment.
예 어제 오류나서 바꿔주었습니다 ㅋㅋㅋㅋ
|
|
||
| import { getAllTopics } from '../../apis/new'; | ||
|
|
||
| const useGetAllTopics = () => { |
There was a problem hiding this comment.
useQuery를 useSuspenseQuery로 바꾸면 SeeAllTopics.tsx에서 isloading 상태를 신경안쓰고 Suspense fallback으로 관리하면 될꺼같은데 카톡에서 말한 내용이 이부분인가요?
There was a problem hiding this comment.
뎃츠롸잇~ 제가 푸쉬를 안했군요
* TopicCardList 컴포넌트를 이전처럼 활용하도록 한다. 전체보기 및 즐겨찾기는 거의 동일한 형태이며 중복코드가 다량 발생하여 위와 같이 수정한다. * url을 넘겨받음에 따라서 리액트 쿼리 훅, API 요청 로직 또한 하나의 훅으로 재사용한다.
작업 대상
📄 작업 내용
🙋🏻 주의 사항
스크린샷
📎 관련 이슈
close #642
레퍼런스