[React.js] Create React App과 Vite

Create React App과 Vite

들어가며

• 리액트(React.js) 애플리케이션을 빠르게 설정하고 개발할 수 있게 해주는 툴인 Create React App과 Vite에 대해 정리해본다.

 

Create React App(CRA)

개념

• 페이스북(메타)에서 개발한 리액트 공식 애플리케이션 설정 도구
• 리액트로 새 프로젝트를 시작할 때 필요한 모든 설정을 자동으로 해주기 때문에, 개발자는 코드 작성에 집중할 수 있다.

 

특징

• Zero Configuration
  • 복잡한 설정 없이 바로 사용할 수 있다.
  • 프로젝트 설정, 빌드 도구(웹팩 등), Babel 설정 등을 기본으로 제공하여, 개발자가 직접 설정할 필요가 없다.
• Out-of-the-box
  • 기본적인 리액트 개발 환경을 갖추고 있다.
  • ESLint, Jest, Service Worker, CSS 처리 등을 포함한다.
• 커스터마이징
  • @react-scripts@를 통해 제공되며, 복잡한 설정이 필요하지 않지만, 필요할 경우 @eject@ 명령을 사용하여 설정 파일들을 직접 제어할 수 있다.
  • 다만, @eject@를 실행하면 설정 파일들이 프로젝트로 복사되며, 이후부터는 직접 관리해야 한다.
• 의존성 및 빌드
  • 웹팩(Webpack)을 사용하여 애플리케이션을 번들링하며, 개발 서버도 웹팩을 기반으로 구동된다.
  • 성숙하고 안정적인 생태계를 기반으로 동작하기 때문에, 많은 프로젝트에서 기본적으로 사용된다.

 

사용 예

프로젝트 생성

• @my-app@이라는 프로젝트를 생성할 때 아래의 명령을 실행한다.
• @＠latest@는 npm에서 특정 패키지를 설치할 때 가장 최신 버전을 설치하라는 의미로, 생략해도 된다.
• @npx@ 명령을 사용한다.

$ npx create-react-app@latest my-app

 

개발 서버 실행

• @start@ 명령을 이용하여 개발 서버를 실행한다.
• 기본적으로 @http://localhost:3000@에서 애플리케이션을 실행한다.
• 파일 변경 시 자동으로 브라우저를 리로드한다.

$ npm start

 

빌드

$ npm run build

 

테스트 실행

$ npm test

 

eject

• CRA의 기본 설정을 외부화하여 직접 제어할 수 있게 한다.
• 이 명령어를 실행하면 웹팩, Babel 설정 파일 등을 프로젝트 디렉터리에 복사하여 커스터마이징이 가능해진다.
• 하지만 한 번 @eject@를 실행하면 다시 되돌리기 어려우므로 신중하게 사용해야 한다.

$ npm run eject

 

 

공식 문서

Getting Started | Create React App

 

Vite

개념

• 빠르고 현대적인 웹 개발빌드 도구
• Evan You(Vue.js 창시자)가 개발하였다.
• 처음에는 Vue.js를 위해 설계되었지만, 현재는 리액트와 같은 다양한 프레임워크에서도 사용할 수 있다.

 

특징

• 빠른 개발 서버
  • Vite는 기본적으로 ESM(ECMAScript Modules)을 사용하여 개발 서버에서 코드를 번들링하지 않고 직접 실행한다.
  • 이를 통해 개발 서버의 시작 속도와 HMR(Hot Module Replacement) 속도가 매우 빠르다.
• 최소 번들링
  • 개발 중에는 번들링을 하지 않으며, 프로덕션 빌드 시에만 번들링을 수행한다.
  • 따라서 코드 변경 시 즉각적인 반영이 가능하다.
• 모던 빌드 체인
  • VRollup을 사용해 빌드하며, 최신 브라우저에서 ESM을 활용한 더 작은 번들 크기를 제공한다.
  • 플러그인 시스템을 통해 Rollup 생태계를 쉽게 활용할 수 있다.
• 간편한 설정
  • 초기 설정이 간단하며, 필요에 따라 설정을 쉽게 확장할 수 있다.

 

사용 예

프로젝트 생성

• @my-app@이라는 프로젝트를 생성할 때 아래의 명령을 실행한다.
• @--template react@를 지정하지 않으면, 여러 템플릿 중에 하나를 직접 선택할 수 있다.
• @npm@ 명령을 사용한다.

$ npm create vite@latest my-app --template react

 

개발 서버 실행

• @dev@ 명령을 이용하여 개발 서버를 시작한다.
• 개발 서버는 기본적으로 @http://localhost:5173@에서 실행한다.
• 빠른 HMR(Hot Module Replacement) 때문에 코드 변경 시 즉각적으로 브라우저에 반영된다.

$ npm run dev

 

빌드

$ npm run build

 

로컬 서버에서 빌드 결과 확인

• @npm run build@로 생성된 빌드 파일을 로컬 서버에서 확인할 수 있다.
• 실제 배포 환경과 유사한 환경에서 빌드 결과물을 테스트할 때 유용하다.

$ npm run preview

 

CRA는 'npm test'로 테스트를 실행하지만, Vite는 기본적으로 테스트 도구를 포함하지 않으므로 별도의 설정이 필요하다.

 

공식 문서

Vite

 

Vite 프로젝트와 CRA 프로젝트의 비교

• Vite에서는 리액트 컴포넌트 파일을 @.jsx@ 확장자로 저장해야 한다.
• @index.html@ 파일은 프로젝트 루트 경로에 위치하며, @public@ 폴더 안에 @index.html@ 파일이 없다.
• Vite 프로젝트에서는 @main.jsx@ 파일을 사용한다.
  • CRA의 @index.js@와 거의 동일한 역할을 한다.
• 소스 코드 내에서 사용하는 에셋은 @src/assets@ 폴더에 저장한다.
• @npm run build@ 명령어로 빌드 작업을 수행할 수 있으며, 생성된 파일들은 @dist@ 폴더에 저장된다.