[ZIMZIM] CRA 없이 react 프로젝트 구성하기(feat. vite + react + typescript)

CRA로 프로젝트를 구성하지 않고 하나하나 디펜던시들을 추가해 프로젝트를 구성하기로 했다.

 

먼저, 모듈 번들러로는 vite를 선택했다.

 

내가 만드려고 하는 프로젝트는 단순한 설정들만 필요하고, HMR(Hot Module Replacement,핫 모듈 교체)로 개발상황에서 변경사항을 빠르게 반영할 수 있다는 점이 vite를 선택한 이유이다.

 

프로젝트 폴더를 만든 후 npm init vite@latest라는 명령어를 터미널에 입력하면 framework와 variant를 선택할 수 있는데, 이때 React와 typescript를 선택하면 된다.

현재 폴더에 만들고 싶다면 명령어(npm init vite@latest) 뒤에 . 을 붙이면 된다.

 

npm install을 실행하여 package.json에 있는 패키지들을 깔아주고 이후 npm run dev를 실행하면 로컬 서버를 실행시킬 수 있다.

추가로 typescript를 사용하기 위해 npm install @types/react @types/react-dom @types/node --save-dev 를 실행시켜준다.

 

경로 별칭 설정

vite.config.ts에서 resolve.alias 옵션을 설정한다.

vite.config.ts

tsconfig.json에서 compilerOptions에 paths를 설정한다.

tsconfig.json

react-router-dom

터미널에서 npm i react-router-dom을 실행시켜 설치해준다.

react router에서는 웹 프로젝트에는 createBrowserRouter를 사용하는걸 추천한다. DOM 히스토리 API(history.back, history.forward 등)을 사용하여 페이지를 새로 고침하지 않고도 URL을 변경하고 브라우저 히스토리를 관리할 수 있게 도와준다. pushState를 사용하면 페이지를 새로 로드하지 않고도 새로운 URL을 이 히스토리에 추가할 수 있다(사용자가 폼을 작성하는 도중 URL을 변경하여 상태를 반영하고, 사용자가 폼 작성 도중 페이지를 새로 고침하더라도 폼 상태를 유지할 수 있음, 목록을 필터링하거나 정렬할 때 URL에 필터 및 정렬 상태를 반영하여 사용자가 페이지를 새로고침하더라도 동일한 상태를 유지할 수 있음 등).

https://reactrouter.com/en/main/routers/create-browser-router#createbrowserrouter

 

eslint, prettier

npm install prettier --save-dev 실행시켜 주면 된다. eslint는 vite를 추가하면서 같이 설치된다.

.prettierrc 파일을 만들어주고 자신이 원하는 prettier 설정을 넣어주면 된다.

나는 기본 값만 넣었다.

.prettierc / https://prettier.io/docs/en/options.html