bo-user-starter v2.0.4

bo-user-starter

:smiley: 블록오디세이를 위한 React 사용자 Boilerplate v1입니다. :smiley:

프로젝트 주요 기능

• STYLING : scss
• HTTP CLIENT : axios
• SERVER STATE DATA MANAGEMENT : react-query
• ROUTING AND NAVIGATION : react-router-dom
• STATE MANAGEMENT : @reduxjs/toolkit
• FORM : react-hook-form
• TYPE CHECK(자바스크립트) : prop-types

프로젝트 설치

자바스크립트

타입스크립트

:fire: npm i bo-user-starter 명령어를 사용하면 프로젝트가 정상적으로 설치되지 않습니다. :fire:

시작하기

의존성 패키지 설치

실행 전에

프로젝트 실행

프로젝트 구조

자바스크립트

 .
 ┣ .github
 ┃ ┣ ISSUE_TEMPLATE
 ┃ ┃ ┣ bug_report.md
 ┃ ┃ ┗ feature_request.md
 ┃ ┗ pull_request_template.md
 ┣ public
 ┃ ┣ favicon.ico
 ┃ ┣ index.html
 ┃ ┣ logo512.png
 ┃ ┣ manifest.json
 ┃ ┗ robots.txt
 ┣ src
 ┃ ┣ api
 ┃ ┃ ┗ instance.js
 ┃ ┣ app
 ┃ ┃ ┣ App.js
 ┃ ┃ ┣ rootReducer.js
 ┃ ┃ ┗ store.js
 ┃ ┣ assets
 ┃ ┃ ┣ fonts
 ┃ ┃ ┃ ┗ NotoSansKR-Regular.otf
 ┃ ┃ ┣ icons
 ┃ ┃ ┃ ┗ example.svg
 ┃ ┃ ┗ images
 ┃ ┃ ┃ ┗ logo.png
 ┃ ┣ layout
 ┃ ┃ ┣ Footer.js
 ┃ ┃ ┣ Header.js
 ┃ ┃ ┣ Layout.js
 ┃ ┃ ┣ footer.module.scss
 ┃ ┃ ┣ header.module.scss
 ┃ ┃ ┗ layout.module.scss
 ┃ ┣ pages
 ┃ ┃ ┣ detail
 ┃ ┃ ┃ ┣ detail.js
 ┃ ┃ ┃ ┗ detail.module.scss
 ┃ ┃ ┣ home
 ┃ ┃ ┃ ┣ Components
 ┃ ┃ ┃ ┃ ┣ Movies.js
 ┃ ┃ ┃ ┃ ┗ movies.module.scss
 ┃ ┃ ┃ ┣ home.js
 ┃ ┃ ┃ ┗ home.module.scss
 ┃ ┃ ┣ login
 ┃ ┃ ┃ ┗ login.js
    ... 생략 ...
 ┃ ┃ ┗ page404.js
 ┃ ┣ slices
 ┃ ┃ ┣ loginSlice.js
 ┃ ┃ ┣ menuSlice.js
 ┃ ┃ ┗ modalSlice.js
 ┃ ┣ style
 ┃ ┃ ┣ custom.scss
 ┃ ┃ ┗ index.scss
 ┃ ┣ utils
 ┃ ┃ ┗ common.js
 ┃ ┗ index.js
 ┣ .env.local
 ┣ .gitignore
 ┣ .prettierrc
 ┣ README.md
 ┣ jsconfig.json
 ┣ package-lock.json
 ┗ package.json

타입스크립트

├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ logo192.png
│  ├─ logo512.png
│  ├─ manifest.json
│  └─ robots.txt
├─ src
│  ├─ App.css
│  ├─ App.tsx
│  ├─ api
│  │  ├─ config.ts
│  │  ├─ index.ts
│  │  └─ setup.ts
│  ├─ app
│  │  ├─ hooks.ts
│  │  ├─ rootReducer.ts
│  │  └─ store.ts
│  ├─ assets
│  │  ├─ icons
│  │  │  └─ example.svg
│  │  └─ images
│  │     └─ logo.png
│  ├─ components
│  │  └─ Modal
│  │     ├─ LoginModal.tsx
│  │     └─ loginModal.module.scss
│  ├─ index.tsx
│  ├─ layouts
│  │  ├─ Footer
│  │  │  ├─ footer.module.scss
│  │  │  └─ index.tsx
│  │  ├─ Header
│  │  │  ├─ header.module.scss
│  │  │  └─ index.tsx
│  │  ├─ Layout.tsx
│  │  └─ layout.module.scss
│  ├─ pages
│  │  ├─ 404
│  │  │  ├─ index.tsx
│  │  │  └─ page404.module.scss
│  │  ├─ Detail
│  │  │  ├─ detail.module.scss
│  │  │  └─ index.tsx
│  │  ├─ Home
│  │  │  ├─ components
│  │  │  │  └─ Movies
│  │  │  │     ├─ index.tsx
│  │  │  │     └─ movies.module.scss
│  │  │  ├─ home.module.scss
│  │  │  └─ index.tsx
│  │  └─ Profile
│  │     └─ index.tsx
│  ├─ react-app-env.d.ts
│  ├─ slices
│  │  └─ modalSlice.ts
│  ├─ styles
│  │  ├─ abstracts
│  │  │  ├─ _mixins.scss
│  │  │  └─ _variables.scss
│  │  ├─ base
│  │  │  ├─ _base.scss
│  │  │  ├─ _reset.scss
│  │  │  └─ _typography.scss
│  │  └─ main.scss
│  ├─ types
│  │  ├─ movie
│  │  │  └─ index.ts
│  │  └─ token
│  │     └─ index.ts
│  └─ utils
│     └─ localStorageService.ts
└─ tsconfig.json