CRA 명령어 지원 종료, vite 개념 정리

리액트 프로젝트 새로 만들려고 예전처럼 CRA 명령어 썼더니, 이제 지원 안하는 명령어라고 메시지가 떴다.

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
create-react-app is deprecated.

https://okky.kr/articles/1527414?topic=community&page=1

create-react-app 지원종료 | OKKY

한달쯤 전에도 CRA 명령어로 리액트 프로젝트 만들었는데 몇 주 사이에 안된다니 무슨 일이 있었나 싶어 검색해보니, CRA는 2022년 2월부터 기능 업데이트가 중단되었고, 올해 02월 14일에 공식 지원이 종료되었다고 한다. Next.js나 기타 프레임워크를 쓰던지 vite를 쓰던지 하라고 해서, 이제 vite를 피할 수 없겠구나 싶어 webpack과의 차이점을 알아봤다.

---

Vite

Vue.js의 창시자 Evan You가 만든 차세대 프론트엔드 빌드 툴.

ES 모듈(ESM)을 기반으로 하여, 개발 중에 각 모듈을 즉시 트랜스파일하고, HMR(Hot Module Replacement)을 통해 페이지 새로 고침 없이 빠르게 반영된다. ESBuild라는 초고속 빌드 도구를 사용해 코드 트랜스파일과 번들링을 처리한다. 이로 인해 대형 프로젝트에서 빌드 시간이 단축된다는 장점이 있다. 개발 중에만 모듈 단위로 트랜스파일하고, 배포 시에만 전체 번들을 만든다. 따라서 node_modules에 필요한 최소한의 패키지만 설치되어, 프로젝트가 가볍다.

장점	- 빠른 개발 서버로, 코드 변경 시 페이지 새로 고침 없이 즉시 반영된다. - ESBuild를 사용한 빠른 빌드 성능으로, 대형 프로젝트에서도 빌드 시간이 매우 짧다. - 간편한 설정으로, 복잡한 설정 없이 빠르게 시작할 수 있다. - HMR(Hot Module Replacement)을 지원하여, 코드 변경 시 즉시 반영된다.
단점	- 커스터마이징의 제한이 있을 수 있다. Webpack보다 더 많은 커스터마이징을 원하면 추가 설정 필요. - 플러그인 생태계가 성장 중이라, Webpack에 비해 필요한 플러그인을 찾는 데 시간이 더 걸릴 수 있다.

---

Webpack (CRA)

Webpack은 모듈 번들러로, 다양한 리소스를 하나의 파일로 번들링하거나 코드 최적화 작업을 한다. 로더나 플러그인을 사용하여 코드 변환, 빌드, 최적화 등의 작업을 처리한다. 모든 모듈을 번들링한 후, 전체 번들 파일을 새로 고침하여 반영된다. CRA로 리액트 프로젝트 생성하면, node_modules 디렉토리에 다양한 패키지가 설치되어 프로젝트가 무거워지는게 이런 이유 때문이다. 복잡한 설정을 통해 다양한 요구사항을 충족할 수 있다.

장점	- 강력한 커스터마이징이 가능, 복잡한 요구사항이나 특수한 설정이 필요한 프로젝트에서 유리하다. - 광범위한 플러그인 지원을 통해, 다양한 추가 기능과 최적화를 할 수 있다.
단점	- 느린 개발 속도로, 초기 빌드와 코드 변경 시 전체 번들을 다시 빌드해야해서 시간이 더 걸린다. - 설정이 복잡하여, 직접 설정하려면 많은 시간과 노력이 필요하다.

결론적으로,
- Vite는 빠른 개발 서버와 간편한 설정이 장점이며, 작은 설정으로 빠르게 개발을 시작하고 싶은 경우에 적합하다.
- Webpack (CRA)는 세밀한 설정과 커스터마이징이 필요한 프로젝트에 유리하지만, 초기 설정과 빌드 속도가 단점이다.

---

Vite로 프로젝트 생성시 기본 디렉토리 구조

vite-react/                 # 프로젝트 루트 디렉토리
│
├── index.html              # HTML 템플릿 (루트에 위치)
├── package.json            # 의존성 및 프로젝트 설정
├── vite.config.js          # Vite 설정 파일
├── node_modules/           # 의존성 모듈들이 설치되는 디렉토리
├── public/                 # 정적 파일들이 위치하는 폴더 (이미지, 아이콘 등)
├── src/                    # 애플리케이션 소스 코드
│   ├── assets/             # 자원 폴더 (이미지, 폰트 등)
│   ├── App.jsx             # 기본 React 컴포넌트
│   ├── main.jsx            # 진입점 파일 (ReactDOM.render 포함)
│   └── styles/             # 스타일시트 폴더 (TailwindCSS 등)
└── .gitignore              # Git에서 무시할 파일

리액트 프로젝트 생성 시에, 기본 디렉토리 구조에 약간의 차이점이 있다.

• 일단 CRA는 리액트 프로젝트를 초기 설정할때 많은 설정을 미리 해주기 때문에, public 디렉토리 안에 index.html을 두고 설정을 숨겨두는 형태이다. 하지만 Vite는 간단하고 빠른 설정이 목표여서 루트 디렉토리에 index.html을 두고 있다. Vite에서도 CRA와 마찬가지로 public 디렉토리에 이미지나 파비콘 등 정적 파일들을 보관한다.
• CRA는 루트 디렉토리에 app.js와 index.js가 있었고 src 디렉토리는 페이지와 컴포넌트 등 각 파일들을 분류 및 보관하는 용도였지만, vite에서는 src 디렉토리 안에 app.js와 main.js가 있다.

---

실행 명령어 차이

Vite:
npm run dev      # 개발 서버 시작
npm run build    # 배포용 빌드 생성
npm run serve    # 빌드된 파일 미리보기

Webpack (CRA):
npm start        # 개발 서버 시작
npm run build    # 배포용 빌드 생성

---

프로젝트 생성 후기

실제로 바탕화면에 미리 만든 디렉토리에 리액트 프로젝트를 vite로 생성하고, 필요한 의존성들을 설치해보았다. CRA 명령어는 자동으로 설치해줘서 신경쓸 일이 없었던 Prettier를 여기서는 따로 설치해야 된다는게 번거로웠다.

# vite로 리액트 프로젝트 생성하기
npm create vite@latest . --template react

# 각종 의존성 설치
npm install react-query axios zustand tailwindcss postcss autoprefixer
npm install --save-dev prettier

프로젝트 생성 명령어를 입력하니까 "select a variant"라고 기본 템플릿을 어떤 옵션으로 생성할지 선택해야했다. 옵션에는 기본 JS나 TS 외에도 JS+SWC, TS+SWC, React Router v7이 있었다. 리액트 라우터는 필요하면 별도로 설치하면 되는 부분이라 제외하고, 나머지 옵션들 중에 어떤걸 선택하는게 좋을지 GPT에게 물어보고 기본 JS로 일단 생성했다.

참고로 일반 JS/TS는 트랜스파일러로 Babel을 사용하고, SWC(Speedy Web Compiler)는 Babel보다 훨씬 빠른 트랜스파일러라고 한다. SWC는 성능이 중요한 대형 프로젝트에서 유리하지만, 기본적인 프로젝트에서는 Babel로도 충분하다.

---

아무튼 이렇게 프로젝트 생성을 끝내고 tailwind.config.js; postcss.config.js; .prettierrc 파일을 만들었다.

샘플코드 세탁도 진행했는데, 처음 기본 템플릿이 만들어지면 아래와 같은 파일들이 생긴다.

/public/vite.svg
/src/assets/react.svg
/src/app.css
/src/app.jsx
/src/index.css
/src/main.jsx

• 여기에서 svg 파일들은 필요하지 않기 때문에 삭제.
• app.jsx랑 main.jsx는 내가 헷갈려서 확장자를 js로 변경했고, app.jsx에서 불필요한 코드들을 삭제했다.
• 스타일링에 tailwind를 사용하므로 app.css 삭제하고, index.css에서 tailwind 사용을 위한 기본 설정을 했다.

이렇게 프로젝트 생성부터 샘플코드 세탁까지 마무리했다.

앞으로 동료들이랑 함께 만들어나갈 결과물이 벌써부터 기대된다.😆

---

https://blog.hectodata.co.kr/bonjour-vite/

Bonjour, Vite! (Vite 실무 적용기)