세팅
npx create-next-app your-next-app-name큰 틀
- types :
- contexts :
- app 내부 (root) : layout, page
api
-
auth.api.ts: 회원가입,
Bearer ${accessToken}토큰 관리 -
til.api.ts: TIL 생성, get
-
user.api.ts: put,get 으로 "/user/profile"에 프로필 수정
-
index.ts : 종합, axios 의 baseURL 관리
app (provider)
- layout: ReactQueryProvider, AuthProvider 그리고 children 으로 내려줘.
app (api)
auth
- route: POST id,body 던지고 응답 받기
til
- route: POST
app (_contexts)
-
auth.context: useEffect 와 router 사용
-
react-query.context: QueryClientProvider,ReactQueryDevtools . QueryClient 생성해서 client Provider에 설정해주기
app (root)
- layout: AuthProvider, Header 내려주기
_components
Header
-
HeaderButton(_components) : 로그인, 회원가입 등 isLoggedIn 으로 검증
-
Header: 헤더 html 코드
-
index : header export 용
(home)
-
PopularTils(_components) : API 에서 map 돌면서 인기글 내려줌
-
page: 만든 popularTils 를 내려줌 + page
log-in
-
LogInForm: 로그인 폼 로직들, redux 사용
-
page: 레이아웃 잡고 loin폼 내려줌 + Page
my-profile
-
MyProfileForm: useQuery, queryFn 으로 API getProfile 사용
-
page : 레이아웃 잡고 MyProfile 폼 내려줌 + Page
sign-up
-
SignUpForm : useRef , useMutation 사용
-
page: 레이아웃 잡고 signup 폼 내려줌 + Page
tils
- page: Page 안에서 List들 내려주기
_components
- List: useQueryTils
tils/[tilId]
- page: useQuery, queryFn 으로 단일 getTil
write
- page: Page 안에 TILForm 내려주기
write/TILForm
- TILForm: useRouter 사용, useMutation 으로 createTil, router에 경로 push
components
Page
-
index.ts
-
Page.ts: props 로 title,chidren 내려주기, 위 App 들의 기본 Page
TilCard
- TilCard: til props로 내려주기
react-query
- useQueryTils : useQuery, queryFn getTils 정의해놓은곳
types
-
Profile.type
-
Tiltype.ts
