1. 리포지토리 생성 ✅

   GitHub FE Repo

2. 이슈 label 커스터마이즈

   • Label

3. 리액트 설치 ✅

   1. next.js

4. README.md 기본 컨텐츠 삭제 ✅

5. 프로젝트 설정

   1. ESLint ✅
   2. Prettier ✅

6. 패키지 설치

   • redux-toolkit (미정)
   • axios ✅
   • mui ✅
   • sass ✅
   • styled-components (미정)

7. 폴더 구조 만들기 & 컴포넌트 및 페이지 생성 ✅

   → Next.js에서는 파일이름이 곧 라우터로 적용이된다

   → 파일이름은 소문자로 작성

   • components
     • HeadInfo
     • Layout
     • Nav
     • SideBar
     • Products
     • common
       • Input
       • Select
       • Button
   • pages
     • _app: 메인
     • SignIn
     • SignUp
     • MyPage
       • MyInfo
       • MyBooking
       • FavoriteProduct
     • CheckPassword
     • ResetPassword
     • ProductDetail
       • Book
       • Payment (미정)
   • styles

8. reset.css 설치

   1. cdn으로 연결
   2. reset.css 파일

9. 파일 경로 설정

   1. ~
   2. @

10. 리덕스 설정

11. 리포와 프로젝트 연결

12. 리포 포크하기

13. Not Found Page

14. 일분배

Next.js

Next.js by Vercel - The React Framework

명령어

타입스크립트로 설치