🤔 Why?
묵혀둔 프로젝트를 왜 다시 꺼냈나
React를 처음 배울 때 개념을 적용하기 위해 투두메이트 따라 만들기 프로젝트(?)를 한 적이 있다. 스타일링과 간단한 기능만 구현하고 GitHub에 올려두었는데 왠지 모르게 스타를 누르시는 분들이 생겼다. 왕초보일 때 만든 건데 괜히 공부에 방해가 되는거 아닐까 싶어서 약간의 부담감과 책임감으로 디벨롭을 해야겠다고 다짐했다.
지금 보면 Create React App (CRA) 말고도 고칠 부분이 많은데 일단 CRA 마이그레이션부터 해보자.
Vite 선택 이유
CRA는 더이상 React에서 권장하지 않는 방법이다. 따라서 CRA가 아닌 더 나은 대안책을 사용할 필요성을 느꼈다.
CRA의 경우 node_modules의 크기가 상당히 크다. 즉, 빌드 속도가 느리고, UX나 SEO 측면에서도 좋지 않다. 간단한 프로젝트로 하나의 페이지만 존재하고, 서버사이드 작업이 필요하지 않았기 때문에 Next.js로 마이그레이션 하지는 않았고, 가볍고 빠른 Vite로 마이그레이션 하게 되었다.
참고하면 좋을 포스트
🔗 Create-React-App is Dead. What Next?
✏️ How to (JavaScript)
1. Vite, React Vite 플러그인 설치
npm install -D vite @vitejs/plugin-react2. vite.confing.js 파일 작성
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig ({
plugins: [react()],
});3. index.html 파일 이동 및 수정 (중요)
public 폴더에 위치해 있는 index.html 파일을 프로젝트 최상단에 위치하도록 이동시킨다.
또한 Vite는 CRA와 다른 메커니즘으로 assets를 다루기 때문에 index.html 파일에 포함된 %PUBLIC_URL% 경로는 모두 지워준다.
그 후 파일의 <body> 를 다음과 같이 수정한다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>4. JSX 파일 확장자명 변경
CRA에서 .js 였던 JSX 파일을 .jsx 확장자로 변경한다.
5. CRA 삭제
npm uninstall react-scripts6. package.json 수정
스크립트 부분을 다음과 같이 변경한다.
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},7. node_modules 삭제 및 재설치
마지막으로 기존 node_modules 폴더를 삭제하고 패키지를 다시 설치하였다.
npm install🛠️ Troubleshooting
문제 상황 (1)
해당 웹 애플리케이션을 실행했을 때 localhost를 찾을 수 없다는 오류가 있었다.
시도한 것
Vite dev returns 404 HTTP status error when the project name has the '%20' charcode in the name 이 문제인가 싶어서 프로젝트 이름을 확인했지만 공백은 없었다.
해결 방법
알고보니 index.html 파일을 제대로 이동시키지 않아서 발생한 오류였다. 그래서 위 How to 섹션에 3번에도 중요 표시를 해놓았던 것. 기존 CRA의 경우 index.html 파일은 src/public 폴더에 위치해 있는데 이를 프로젝트의 최상단 (루트) 에 위치시켜야 정상적으로 프로젝트를 실행시킬 수 있다.
문제 상황 (2)
다음과 같은 warning이 발생했다.
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
시도한 것 / 해결 방법
위 링크를 참고하여 쉽게 해결할 수 있었다. 해당 프로젝트에서 CommonJS (CJS) 가 아닌 ECMAScript Modules (ESM) 문법을 사용하고 있었기 때문에 package.json 파일에 "type": "module" 을 추가하여 default 를 ESM으로 설정하였다.
(참고) ESM이 아닌 CJS를 사용하는 경우 확장자를 .cjs 로 명시하면 된다.
문제 상황 (3) (추가)
이 프로젝트에서는 환경변수 설정을 안 했어서 몰랐는데, 이후에 환경변수가 있는 프로젝트에서 Vite 로 마이그레이션 했더니 환경변수에 접근할 수 없다는 문제가 발생했다. yarn start 커맨드를 실행해도 빈 화면만 나타났다.
시도한 것 / 해결 방법
[시도 1] vite.config.ts 설정 변경 (시도했으나 실패)
우선 .env 파일에 REACT_APP 접두사를 VITE 로 변경하고 vite.config.ts 설정을 다음과 같이 변경했다.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
define: {
'process.env': {}
},
});yarn start 커맨드를 실행하면 환경변수를 사용하여 렌더링 하는 컴포넌트들이 모두 오류가 발생했다. 환경변수를 읽긴 하는 거 같은데 제대로 데이터를 fetch 해오지 못했다.
[시도 2] precess.env 를 import.meta.env 로 변경 (해결)
이 방법도 우선적으로 .env 파일에 REACT_APP 접두사를 VITE 로 변경하였다. vite.config.ts 파일은 그대로 두고, precess.env 로 접근하던 환경변수를 모두 import.meta.env 로 바꿔주었다.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});이 문제 때문에 여러 플러그인도 설치해 봤는데 생각보다 간단한 문제였다. 참고로 Vite 로 마이그레이션 할 때 문제가 발생했다면 이 포스트를 추천한다. 다양한 트러블슈팅을 다뤄서 도움이 되었다.
마치며
CRA에서 Vite로 마이그레이션을 끝냈다! 별 거 아니지만 왠지 뿌듯하다.
추가로 NPM을 Yarn으로, JavaScript를 TypeScript로 변경하였는데, 이 부분은 크게 어려운 점이 없어서 포스팅을 생략할 예정이다.
References
많은도움이 되었습니다 감사합니다!