1. 빌드 도구인 vite로 react, typescript를 선택해 create 한다.

2. 코딩 컨벤션으로 같이 정했던 eslint rule, prettier를 적용한다.

• 적용이 잘 안될때는 ? eslint plugin에 지정한 플러그인 라이브러리가 잘 설치되어있는지 확인하기!

• eslint에서 사용한 plugin

  react-refresh ... 등등
  

• lint 실행법

  yarn lint // 린트 실행
  yarn eslint --fix 
  //필요없는 세미콜론을 자동으로 지워주는데, 우리는 prettier설정으로 자동 보정을 해주므로
  //필요없다. 
  

• vite.config.ts에서 오류가 나서 eslint ignorePattern에 vite.config.ts와 .eslintrc.cjs파일을 추가했다.

3. tsconfig 설정

• target : 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분
• module : 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳

4. 폴더 구조 정하기

.
├── README.md
└── frontend
    ├── README.md
    ├── index.html
    ├── jest.config.ts
    ├── package.json
    ├── public
    │   ├── mockServiceWorker.js
    │   └── vite.svg
    ├── setupTest.ts
    ├── src
    │   ├── @types
    │   ├── App.tsx
    │   ├── __mocks__
    │   │   ├── browser.ts
    │   │   ├── handlers
    │   │   ├── index.ts
    │   │   └── server.ts
    │   ├── __tests__
    │   ├── apis
    │   ├── components
    │   ├── config
    │   ├── constants
    │   ├── hooks
    │   ├── main.tsx
    │   ├── pages
    │   ├── utils
    │   └── vite-env.d.ts
    ├── tsconfig.json
    ├── vite.config.ts
    └── yarn.lock

5. dotenv 설치 → 추후 서버 연결을 위함

6. http 클라이언트 라이브러리로 axios사용

7. emotion 설치

• 컴포넌트 기반의 개발을 할 예정이라 CSS-In-JS가 적절하다고 판단
• 번들크기가 작은 emotion을 선택했다.

8. jest 설치 및 세팅

9. MSW 설치 및 세팅

10. recoil 설치