Vite로 React 프로젝트 생성하기

1. 개요

React 프로젝트 생성 방법에는 CRA(Create-React-App)과 Vite를 사용한 방법이 있다.

이중 Vite를 사용해 React 프로젝트를 생성해보자

Vite는 프랑스어로 '빠른' 이라는 뜻이다.

웹팩 같은 기존의 번들러가 가지는 느린 개발 서버 문제점을 해결하기 위해 나타났다.

3.1 vite로 react 프로젝트 생성

npm create vite@latest // 최신 버전
npm create vite@[버전명] // 특정 버전

다음과 같이 vite로 React 프로젝트를 생성한다.

cd learn-react/ 로 디렉토리 위치를 변경한 다음 code . 를 실행해 VS Code로 열도록하자.

폴더를 보면 create-react-app과 다르게 node_modules가 설치되어있지 않다.

package.json에 정의된 node 모듈 설치를 위해서 다음 명령어를 실행하자.

npm i // npm install

이러고 나면 node_modules가 설치 된 걸 확인할 수 있다.

3.2 실행하기

package.json을 확인하면 scripts가 다음과 같이 정의된 걸 확인할 수 있다.

scripts는 npm 또는 yarn 명령어로 프로젝트 작업을 실행할 수 있게 정의하는 명령어 모음이다.

쉽게 말하면 명령어 단축키를 만드는 곳이다.

npm run dev	vite	개발 서버 실행 (localhost:5173 같은 주소 열림)
npm run build	vite build	프로젝트를 프로덕션용으로 번들링 (dist 폴더 생성)
npm run lint	eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0	코드 스타일 검사 (JS/JSX 파일 대상으로 에러 감지)
npm run preview	vite preview	빌드 결과물(dist)을 실제 서버처럼 미리보기

이런 의미를 가지고 있다.

CRA로 React 프로젝트를 생성하면 dev가 아닌 start로 되어있어 npm start 하면 실행된다.

npm run dev

실행 후 localhost:5173으로 접속하면 다음처럼 기본 페이지가 보이게 된다.

4.1 node_modules

node_modules는 package.js에 정의된 모듈이 실제로 저장된 폴더이다.

그래서 외부 package.js를 복사해서 붙여넣기 하고 node_modules와 package-lock.json을 삭제한 뒤 npm i 명령어를 실행하면 붙여넣기 한 package.js에 정의된 node 모듈이 다시 다운로드 된다.

4.2 public

public 디렉토리는 정적 파일이 저장된다.

4.3 src

src는 소스 코드가 저장된다.

.jsx는 리액트 컴포넌트라고 생각하면 된다.

assets 디렉토리는 정적 파일이 저장된다.

이때 public디렉토리와 뭐가 다른가? assets디렉토리는 vite의 빌드 프로세스에 같이 처리되어 함께 번들링된다. public 디렉토리는 빌드 과정 없이 최종 번들에 그대로 복사된다.

4.4 package.json

해당 프로젝트의 정보가 저장된다. (명령어, 라이브러리 등)

4.5 vite.config.js

vite 플러그인 및 프로젝트 구성등의 설정을 정의한다.