마이그레이션 과정
- vite 설치 & react-scripts 제거
npm i -D vite @vite-js/plugin-react
npm uninstall react-scriptsStackBlitz에서 Vite를 온라인으로 실행해볼 수 있는데, 해당 사이트에서 Vite 기본 코드를 참고하여 사용했다.
package.json스크립트 수정
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},- 프로젝트 root 위치에
vite.config.ts파일 생성
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})- 프로젝트 root 위치에
tsconfig.node.json파일 생성
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}tsconfig.json수정
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}index.html을 프로젝트 root 위치로 옮기고 다음과 같이 수정
<!DOCTYPE html>
<html lang="ko">
<head>
...
<!-- URL에서 %PUBLIC_URL% 사용 시 해당 부분 삭제 -->
<link rel="icon" href="/favicon.ico" />
...
</head>
<body>
<div id="root"></div>
<!-- 아래 script 코드 추가 -->
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
-
env파일을 사용하고 있는 경우REACT_APP을VITE로 수정
ex)REACT_APP_API_KEY->VITE_API_KEY
그리고 환경변수를 사용하는 코드에서process.env.를import.meta.env.로 수정한다. -
(
react-app-env.d.ts파일을 사용하는 경우 파일명을vite-env.d.ts로 바꾼 뒤 reference 코드를 아래와 같이 수정)
/// <reference types="vite/client" />+) 해당 파일은 .env에 대한 선언을 제공한다고 하는데, 이렇게 하는 게 맞는지 좀 더 알아보아야 할 것 같다.
Emotion 이슈
마이그레이션을 완료했더니 emotion을 사용하는 컴포넌트마다 작성해두었던 /** @jsxImportSource @emotion/react */ pragma에서 아래와 같은 경고가 떠서 css가 적용되지 않는 문제가 있었다.
따라서 이 글을 참고해서 아래와 같은 과정을 거쳐 해결했다.
- Emotion 디펜던시 설치
$ npm i -D @emotion/babel-pluiginvite.config.ts수정 (vite.config.js의 경우에도 동일)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
// JSX 컴파일 시 기본 jsx-runtime 대신 Emotion의 jsx 함수를 사용하도록 설정
// JSX에서 css prop을 사용하기 위함
jsxImportSource: '@emotion/react',
// 커스텀 바벨 설정: @emotion-babel-plugin 플러그인 추가
babel: {
plugins: ['@emotion/babel-plugin'],
}
})]
})tsconfig.json수정
vite.config.ts를 수정하고 나면 vscode(혹은 다른 에디터)에서 css를 사용하는 코드에 에러를 발생시킨다. 왜냐하면 기본적으로 css는 React에서 인식되는 prop이 아니고 TypeScript 컴파일러는 Emotion에 대해 알지 못하기 때문이다. 따라서 TypeScript에게 Emotion의 타입을 사용하도록 알려주어야 한다.
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}사실 기존에 CRA 앱에서 css를 사용하는 컴포넌트마다 jsxImportSource pragma를 추가하는 것은 고치려고 했던 부분 중 하나였다. 그런데 CRA 앱을 Vite로 마이그레이션 하면서 이 문제까지 해결하게 되어 후련하다.
Vite는 CRA와 달리 vite.config.js라는 설정 파일을 갖고 있는데, 새로운 babel 설정 파일을 만들지 않아도 vite 설정 파일에서 babel 설정을 바꿀 수 있다는 것도 장점인 것 같다고 생각했다.
