Conversation
…ithub-actions [Fix] delete merged branch github action
| <QueryClientProvider client={queryClient}> | ||
| <HydrationBoundary state={pageProps.dehydratedState}> |
There was a problem hiding this comment.
allBoards, bestBoards 와 같은 스트링 쿼리키가 다른 곳에서도 좀 많이 쓰일 것 같아서 찾아보니 쿼리 키를 관리하는 전략이 있네요. tkdodo라고 리액트 코어 메인테이너일꺼에요. 리액트씬에서 유명하신 분입니다. 아래의 링크를 읽어보시면 될 것 같아요.
https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories
There was a problem hiding this comment.
항상 네이밍 관련해서 고민이 많았는데 좋은 참고자료 감사합니다 😊
| return res.data; | ||
| }) | ||
| .catch((e) => { | ||
| return e; |
There was a problem hiding this comment.
| return e; | |
| throw e; |
에러를 던져서 getBoards를 사용하는 측에서 에러를 처리 할 수 있도록 합시다.
react-query에서 에러 상태를 잘 캐치 해줄 것 같네요.
There was a problem hiding this comment.
날짜 다룰때 유용한 라이브러리를 소개합니다.
SSR을 잘 구현했는지 알아보기 위해 로컬에서 돌려봤습니다. |
| const queryClient = new QueryClient(); | ||
|
|
||
| export const getServerSideProps = async () => { | ||
| await queryClient.prefetchQuery({ | ||
| queryKey: ['allBoards'], | ||
| queryFn: () => getBoards({ page: 1, pageSize: 10, orderBy: 'recent' }), | ||
| }); |
There was a problem hiding this comment.
이 부분을 궁금해서 찾아봤는데 서버 요청마다 새로운 쿼리 클라이언트를 생성해야한다고 합니다.
여러 유저로부터 오는 요청에 대해서 같은 클라이언트를 사용하게되면 캐쉬 데이터가 충돌이 날 수 있습니다.
SSR 방식으로 데이터를 가져올때는 요청마다 상태를 독립적으로 유지 할 필요가 있습니다.
| const queryClient = new QueryClient(); | |
| export const getServerSideProps = async () => { | |
| await queryClient.prefetchQuery({ | |
| queryKey: ['allBoards'], | |
| queryFn: () => getBoards({ page: 1, pageSize: 10, orderBy: 'recent' }), | |
| }); | |
| export const getServerSideProps = async () => { | |
| const queryClient = new QueryClient(); | |
| await queryClient.prefetchQuery({ | |
| queryKey: ['allBoards'], | |
| queryFn: () => getBoards({ page: 1, pageSize: 10, orderBy: 'recent' }), | |
| }); |
디자인 시안상 요구사항이 명확하지 않아서 정답은 없지만 일반적으로는 엔터 혹은 검색 버튼을 눌렀을때 검색 API를 보내도록 하는게 적절할 것 같습니다. 텍스트 변경시마다 API 요청을 보내면 디바운스를 걸더라도 네트워크 요청이 많아서 좋지 않을 것 같습니다 ! |
뭔지 대충 본적은 있는데 귀찮아서 굳이 안해보고 있었거든요 ! 새로운걸 바로바로 적용해나가는 자세를 보니 좋은 개발자가 될 것 같습니다 ㅎㅎㅎㅎ |
요구사항
체크리스트 [기본]
체크리스트 [심화]
주요 변경사항
미리보기
멘토에게