[next.js 제로초] 섹션 3. 그런데 백엔드 개발자가 API를 아직 못 만들었다

제로초님 강의 정리
https://www.inflearn.com/course/next-react-query-sns

MSW

• 목업 mswjs.io
• public 폴더의 mockServiceWorker.js가 호출을 가로채서 목업 서비스를 하는 방식
• 컴포넌트 생성 후 브라우저인지 체크하고 환경변수를 통해 로컬환경에서 끄고 킬 수 있는 방식으로 정리되어 있음.
• next.js와 매끄럽게 호환이 안됨. 노드 서버의 도움을 받아야함.
• 어차피 express로 실행을 해야된다면 FE 코드와 분리하여 환경변수로 서버 주소를 바꾸는 방식이 더 낫지 않나 라는 생각이 듬. pocketbase 등을 활용하면 실제로 CRUD 테스트까지 가능함.

서버 컴포넌트에서 Server Actions 사용하기

• 함수안에 “use server”; 로 선언하여 사용
• 해당 함수는 서버에서 실행된다.
• 한 파일보다는 별도 파일로 분리하여 작업하는게 좋다 생각됨. 예전에 php, asp등에서 안티패턴으로 지적되던 방식과 동일한 거 아닌가

useFormStatus

• pending, data, method, action 등의 정보를 확인할 수 있음.
• pending으로 전송중인지 체크하는 용도로 사용
• pending일 동안 로딩창이나 버튼 disabled

useFormState

• 폼의 전송 후 메세지 처리 등

Auth.js

• 다양한 프로바이더를 지원 (카카오, 구글, 애플, 페북 등등)
• 아이디, 비번 방식 지원 (Credentials authentication)
• src/middleware.ts 에서 config matcher로 적용할 URL 설정
• .env에 AUTH_URL과 AUTH_SECRET 설정
• 클라이언트에서는 useSession을 이용하여 정보를 가져 올 수 있음

  const { data } = useSession();

API 라우트

• route.ts
• GET, POST, PUT, PATCH, DELETE 등 http 메서드로 요청하고 반환함.

React-query

특

• 서버의 데이터를 가져오는 라이브러리
• npm i @tanstack/react-query@5
• npm i @tanstack/react-query-devtools@5 -D
• devtool을 통해 Data 확인이 가능
• 캐싱을 잘해줌 ( 재사용 / 사용자의 브라우징 속도 )
• 컴포넌트 간 데이터 공유가 가능 ( query.getClient )
• 로딩 / 성공 / 실패 / 캐싱이 표준화되어 있음
• 키 구조를 잘 쓰면 좋음

Devtool 상태

• Fresh : 서버에서 막 데이터를 가져온 상태 ( 언제까지 Fresh인지 설정해야함. staleTime 설정 시간 후 stale로 변경됨 )

• Fetching : 데이터를 가져올 때

• Paused : 데이터를 가져오다 멈췄을때 ( 오프라인 등 체크 )

• Stale : refetchOnWindowFocus, retryOnMount, refetchOnReconnect, retry 시 등 다시 가져올 건지 설정 (개별 혹은 전역 설정 가능)

• Inactive : 현재 페이지에서 사용하지 않는 데이터 ( gcTime 가지비컬렉터 타임(기본 5분) -> 안 쓰는 데이터를 지우는 시간 )

• staleTime이 gcTime보다 작아야함 ( 반대의 경우 의미가 없기 때문 )

Devtool Actions

• Refetch : 무조건 매번 새로 데이터를 가져옴
• Invalidate : 더이상 쓰지 말라. 옵저버가 1이 되는 순간(Inactive가 아닐 때) 새로 가져옴
• Reset : initialData가 있는 경우 그것으로 되돌림
• Remove : 제거
• Trigger Loading : 로딩 상태 확인
• Trigger Error : 에러 상태 확인

사용 (추가 정리 필요)

• queryClient
• 서버 컴포넌트에서 prefetchQuery
• useQuery
• 클라이언트 컴포넌트에서 useQueryClient

참고

• https://velog.io/@cnsrn1874/번역-React-Query-FAQs

Zustand

• 컴포넌트 간 상태 공유

인피니트 스크롤링

react query 사용

• prefetchInfiniteQuery( {queryKey: [‘posts’, ‘recomments’], queryFn: getPostRecommends, initialPageParam: 0} );
• initialPageParam 으로 커서값 전달
• useInfinityQuery 사용 ( getNextPageParam: ( lastPAge ) => lastPAge.at(-1)?.postId )

react-intersection-observer

• npm i react-intersection-observer
• useInView + useEffect 사용
• 두번 이상 호출될 경우 delay 조절

Suspense (Loading, error 처리)

• Next.js에서는 loading.tsx, error.tsx로 자동으로 설정됨
• <Suspense fallback={<Loading />}> <Page /> </Suspense>
• <ErrorBoundary fallback={<Error />}> <Page /></ErrorBoundary>
• 로딩 완료 시점 확인, lazy, use, Next.js의 서버컴포넌트의 fetch
• 리액트 쿼리의 isPending, isLoading 사용하여 구현
• 테스트 시 적용안될 시 캐시가 남아있어서 그럴 가능성이 있음(서버 재시작)
• useSuspenseQuery, useSuspenseInfiniteQuery 사용 추천

Tip

Next.js

• env 설정시 NEXT_PUBLIC_ 으로 시작하면 브라우저에서 접근 가능
• redirect는 try catch 문안에서 사용하면 안됨
• Provider 컴포넌트를 생성하여 감싸줘서 데이터 공유 (Auth, Request 등)