vite 빌드 환경에서의 타입스크립트 리액트 개발 환경 구성 방법을 정리해 보도록 하겠습니다.
타입스크립트 언어로 구성된 리액트 개발 환경을, 매우 빠른 빌드 환경을 가진 VITE 로 구성함을 목표로 하고 있습니다.
VITE 빌드 환경으로 REACT 타입스크립트 프로젝트 생성
프로젝트를 생성하고자 하는 폴더로 이동합니다.
vite 환경을 생성합니다.
npm create vite@latest
프로젝트, 패키지 이름 설정한 후, 리액트 프로젝트를 선택합니다.
타입스크립트로 할 것 이므로 Typescript +SWC 선택합니다.
√ Project name: ... toDoApp
√ Package name: ... todoapp
√ Select a framework: » React
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
> TypeScript + SWC
JavaScript
JavaScript + SWC
선택하면 프로젝트 환경이 생성이 됩니다.
여기서 SWC 란?
리액트, 타입스크립트 등은 결국 순수 바닐라 자바스크립트로 변환되어야 합니다.
이럴 떄에는 보통은 Babel이 트랜스컴파일러로써 주로 사용되었는데, 바벨의 경우 성능이나 자원소모 등이 높은 단점이 있습니다.
SWC는 RUST로 작성된 트랜스컴파일러로써, 속도 및 성능 향상을 목적으로 하고 있습니다.
즉, 기존 Babel 등의 JS로 만들어진 변환 툴 대비 매우 빠르며, SWC의 경우 같은 목적의 다른 대체 Product에 비해서도 매우 성능이 좋은 것으로 알려져 있습니다.
VITE 프로젝트 폴더 구성
App.tsx, main.tsx, .eslintrc.cjs, tsconfig.json, vite.config.ts 등 다양한 프로젝트 관련 파일 및 폴더가 자동 생성됩니다.
처음 파일을 열면 아래와 같이 오류 표시가 매우 많이 발생하게 됩니다.
아직 node_modules를 설치하지 않은 탓이니 npm install을 진행합니다.
npm install
최초 실행하기
실행 및 빌드 관련 정보를 담고 있는 Package.json 를 확인해 보면
scripts": {
"dev": "vite",
"build": "tsc vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
dev 로 실행해 볼 수 있습니다.
npm run dev
다음과 같은 콘솔 화면이 나오며 정상적으로 실행이 됩니다.
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
tsx 파일 절대 경로 참조하기
절대 경로를 사용하여 각 tsx 파일을 참조하면 관리가 편리해 집니다.
vite 빌드 환경에서 타입스크립트 절대 경로 설정하는 방법은 아래의 글을 참고하시면 됩니다.
그 밖에 도움이 되는 글
파일 스트리밍에 대한 목적 디렉터리는 존재하지 않거나 쓸 수 없습니다.
ERESOLVE 의존성 충돌 unable to resolve dependency tree 해결 방법