[React, ts, vite] react + typescript + vite로 시작해보기

슈비니·2023년 7월 8일
0

React

목록 보기
8/11
post-custom-banner

보통 react를 작업할때 create-react-app를 사용해 작업했는데, 이를 사용하면 번들러로Webpack를 사용하게 되는데 코드의 양이 늘어날수록 속도가 상당히 느리다는 걸 알았습니다. 이를 해결하기 위해 Vite를 사용하기로 했습니다. esbuild를 번들러로 사용하기 때문에 보다 빠르고 간결하게 이용할 수 있습니다.

vite는 vue, react 등 여러 프레임워크를 지원합니다.


🗣️ 그럼 vite를 사용해 react+typescript 앱을 만들어봅시다!



📌 프로젝트 생성

npm create vite@latest
yarn create vite

먼저 이렇게 vite를 만들어주고 프레임워크랑 사용할 언어를 골라줄 수도 있지만, 한 번에 만드는 명령이 있어 소개해보려고 합니다.


먼저 본인의 npm 버전을 확인해주고 맞는 버전에 따라 사용하면 됩니다.

// npm 6.x
npm create vite@latest [프로젝트 명] --template react-ts
// npm 7+, extra double-dash is needed:
npm create vite@latest [프로젝트 명] -- --template react-ts

저는 npm이 7이상이기때문에 아래 명령을 사용하면 됩니다.



마지막 부분 react-ts는 사용할 프레임워크와 언어에 따라 다릅니다.

사진과 같이 사용할 프레임워크와 언어를 확인하고 사용합니다.



그리고 개발서버를 열어주려면

npm run dev

로 실행해줍니다!



📌 vite에서 import 할 때

vite에서 컴포넌트를 import 해주려면 CRA에서 했던 방법이 아니라 절대경로를 사용하여 import 해주어야 합니다.

import Common from “/src/components/Common.tsx”


📌 vite에서 환경변수를 사용할 때

// CRA
REACT_APP_ API_KEY = ....

// vite
VITE_API_KEY = ....

.env 파일에서는 이렇게 설정해주어야 합니다.

// CRA
process.env.REACT_APP_API_KEY

// vite
import.meta.env.VITE_API_KEY

만들었던 환경변수는 위 코드와 같이 process가 아닌 import.meta로 활용할 수 있습니다.



⛓️ 참고사이트

profile
효율을 생각하는 프론트엔드 개발자
post-custom-banner

0개의 댓글