세션 3: 그런데 백엔드 개발자가 API를 아직 못 만들었다 - Githubissues

yeobi01 / study_nextjs14

zeroCho님의 [Next + React Query로 SNS 서비스 만들기] 강의 학습

0 stars 0 forks source link

세션 3: 그런데 백엔드 개발자가 API를 아직 못 만들었다 #4

Open yeobi01 opened 8 months ago

yeobi01 commented 8 months ago

msw 세팅과 버전 업그레이드
next용 msw 컴포넌트와 .env
서버 컴포넌트에서 Server Actions 사용하기
클라이언트 컴포넌트에서 Server Actions 사용하기
미들웨어, API 라우트, catch-all 라우트
next-auth로 로그인하기
로그아웃 & 로그인 여부에 따라 화면 다르게 하기
react-query SSR 설정하기
클라이언트 react-query
react-query를 쓰는 이유와 fresh, stale, inactive
팔로잉 게시글, 검색 결과 불러오기
조건부 쿼리 & 쿼리 재사용하기
에러 상황 처리하기(유저 정보 없음)
게시글 상세 페이지, 답글, 포토모달
미흡한 부분 구현하기
인피니티 스크롤링
react-intersection-observer로 더 불러오기
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)

yeobi01 commented 8 months ago

msw 세팅과 버전 업그레이드

msw 셋팅하기
- npx msw init public/ --save
- mocks 폴더 만들어서, browser.ts / handlers.ts / http.ts 파일 만들고 작성하기
- 관련 npm 다운받기
- package.json scripts에 "mock": "npx tsx watch ./src/mocks/http.ts" 작성하기

yeobi01 commented 8 months ago

next용 msw 컴포넌트와 .env

app/_component 폴더를 만들어서 MSWComponent.tsx 파일 작성하기
app/layout.tsx의 body 안에 넣어주기
.env.local에 NEXT_PUBLIC_API_MOCKING=enabled 작성하기
- NEXT_PUBLIC_이 붙으면 브라우저에서 접근이 가능해진다!

yeobi01 commented 8 months ago

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

SignupModal.tsx를 서버 컴포넌트로 바꿔보기
mocks/handlers에서 주석을 통해 403과 정상적인 처리인 경우를 번갈아가면서 테스트해보기

yeobi01 commented 8 months ago

클라이언트 컴포넌트에서 Server Actions 사용하기

import { useFormState, useFormStatus } from "react-dom"; 를 이용해서 함수를 분리하고, 클라이언트 컴포넌트에서 서버 엑션 사용하기
한 번 보고 바로 적용하기는 조금 어려워보이는 부분이라서 복습 반드시 해보기..

yeobi01 commented 8 months ago

미들웨어, API 라우트, catch-all 라우트

npm i next-auth@5.0.0-beta.5 @auth/core
src 아래에 auth.ts와 middleware.ts 만들어서 코드 작성하기
app/api/auth/[...nextauth]/route.ts 만들어서 코드 작성하기
- catch-all 라우트를 이용한 것! catch-all 라우트는 저 부분에 무엇이든지 다 들어가도 괜찮은 것이다

yeobi01 commented 8 months ago

next-auth로 로그인하기

auth.ts에서 다양한 Provier 관리를 함
- 이번에는 로컬 로그인만 할 예정이기 때문에, CredentialsProvider만 작성..
_component/LoginModal.tsx에서 로그인 처리하기..
- import { signIn } from "next-auth/react"; 여기서는 클라이언트기 때문에 next-auth/react에서 가져오기
- 서버라면 "@/auth"; 여기서 가져오기

yeobi01 commented 8 months ago

로그아웃 & 로그인 여부에 따라 화면 다르게 하기

클라이언트 컴포넌트에서는 useSession을 이용하고, 서버 컴포넌트에서는 { auth } from '@/auth';를 이용해서 로그인 여부 판단하여 작업을 한다..
그리고 미들웨어를 통해서 로그인이 이후에 접근할 수 있는 페이지들을 관리한다..

yeobi01 commented 8 months ago

react-query SSR 설정하기

npm i @tanstack/react-query@5
npm i @tanstack/react-query-devtools -D
RQProvider 작성
layout에서 감싸주기 등등..

yeobi01 commented 8 months ago

클라이언트 react-query

faker.js를 이용해서 mock api에도 다양성을 준다..
type들을 model 폴더를 생성해서 따로 뺀다..