CRA 와 Vite

CRA 의 사용을 최소화해야 한다는 컬럼과 공식문서에서 추천하지 않는다는 것을 보고

직접 설정을 할 줄 알아야겠구나 싶어서 CRA 가 무얼 해주는지 먼저 알아야겠어서 정리해본다.

 

CRA (Create React App)

손쉽게 최신 리액트 앱을 설정할 수 있도록 하는 명령

초기 환경을 일일히 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 해준 틀과 같다.

npx create-react-app 프로젝트명 으로 만들어주었다.

• Less to Learn - 자동 최적화
• Only One Dependency - 복잡한 버전 불일치 없이 원활하게 작동하는지 확인
• No Lock-In - ESLint, Webpack, Babel 등 다양한 패키지를 포함
• HMR(Hot Module Reloading) - 코드 수정 시 바로 적용
• polyfill - 오래된 브라우저를 지원

Webpack

여러 개의 자바스크립트 파일을 하나로 합쳐주는 모듈 번들러

Babel 

프로젝트에서 JSX 문법을 사용할 수 있게 해주고, 최신 버전 자바스크립트를 아래 버전도 가능하게끔 변환해줌

 

CRA 의 기본 계층 구조

프로젝트
├── README.md
├── package-lock.json
├── package.json
├── node_modules
 │ └── ...
├── public
 │ ├── favicon.ico
 │ ├── index.html
 │ ├── logo192.png
 │ ├── logo512.png
 │ ├── manifest.json
 │ └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

node_modules 폴더

nodejs 의 패키지 구성 요소 중 하나로 외부 모듈을 저장하는 폴더

설치된 외부 모듈들의 소스코드를 가지고 있어서 용량이 크며 협업을 위해선 .gitignore 파일에 꼭 명시해둬야 한다.

이 폴더는 기본적으로 npm i 명령어로 설치가 가능하다.

 

package.json

패키지가 어떤 설정을, 어떤 패키지를 사용하고 있는지 확인

추가로 프로젝트명, 주소, 버전 등을 설정할 수 있음

• dependencies : 리액트 패키지들의 정보
• scripts : 명령어에 별명을 붙여서 사용 가능 -> npm 명령어 형태로 사용이 가능하다!
  • 기본 스크립트 명령어인, eject  무엇일까? npm run eject 로 실행할 수 있으며 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어라고 한다. 기본적으로 CRA 로 프로젝트를 생성하면 설정 파일이나 종속성 같은 것들을 숨김처리해주기에 보이지 않는데 그 내용들을 보여주는 것. 프로젝트에 맞게 커스터마이징할 때 사용이 가능하나 웹팩이나 바벨 등의 설정을 사용자 직접 유지보수해야 되고 라이브러리 간의 의존성도 신경 써야되므로 신중히 사용해야한다.

 

public 폴더

Webpack 이 후처리 하지 않는 폴더이며 빌드 시 폴더에 그대로 복사된다.

index.html 파일이 있으며 보통 건드리지 않는다. 홈페이지에 표시되는 화면이다.

• favicon.ico : 웹 사이트의 탭 부분에 보이는 아이콘 - 파비콘이라고도 함
• logo192.png, logo512.png, manifest.json : 모바일 웹브라우저에서 사이트를 모바일의 홈 화면에 추가할 때 사용
• robots.txt : 검색 엔진이 웹사이트를 수집할 때 수집할 것과 하지 말아야 할 것을 명시해주는 파일

 

src 폴더

js, css 등의 코드를 저장하는 폴더이며 src 내부의 파일은 프로젝트 빌드 시 Webpack 으로 처리된다.

• App.css, App.js : 앱이 실행되는 메인 코드와 스타일시트
• App.test.js : App.js 를 테스트할 때 사용
• index.css, index.js : index.html과 연결된 자바스크립트와 스타일시트
• setupTest.js : 테스팅 라이브러리를 import 하는 파일
• logo.svg : 앱에서 사용하고 있는 svg
• reportWebVitals.js : 앱의 퍼포먼스 시간을 분석해주는 기능을 담은 파일

reportWebVitals.js

reportWebVitals() 함수에 console.log 를 넣어주면 개발창을 통해 앱의 퍼포먼스 시간들을 분석하여 객체 형태로 출력한다.

이는 CRA 가 웹 퍼포먼스 측정도구로 Web Vitals 라는 라이브러리를 사용하기 때문

 

smp 로 빌드 속도 체크하기

smp 는 speed measure webpack plugin 이다. 현재 빌드  속도를 체크할 수 있다.

 

Vite

https://ko.vitejs.dev/guide/

Vite

빠르고 간결한 모던 웹 프로젝트 개발을 위한 빌드 도구

ES Module 보다 다양한 기능을 제공, 번들링할 때 Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있음

CRA 는 Webpack 을 사용하는데 속도가 느린 편으로 이러한 단점을 해결하기 위해 EsBuild를 기반으로 만들어진 빌드툴인 Vite 를 사용 - EsBuild 는 Go언어로 작성된 자바스크립트 빌드툴로 속도가 빠름

npm create vite@latest

 

템플릿 설정

npm create vite@latest 프로젝트명 --template react

npm create vite@latest 프로젝트명 --template react-ts

 

vite 를 실행하기 전 npm i 로 node_modules 폴더를 받아줘야 한다.

그러면 위처럼 폴더들이 생긴다!

 

Vite 실행

npm run dev

 

 

Vite 는 자바스크립트의 모듈을 의존성 모듈과 소스코드로 나눠준다.

• 의존성 모듈 : node_modules 폴더로부터 import 되는 자바스크립트 모듈이며 개발하는 동안엔 자주 바뀌지 않는다. 이 모듈은 esbuild 를 사용하여 처리된다. -> 웹팩은 브라우저 요청 이전에 모든 자바스크립트 모듈을 처리하는 반면, Vite 는 브라우저 요청 전에 의존성 모듈만 미리 번들링해준다.
• 소스코드 : .jsx, .vue, .scss 등과 같은 라이브러리 확장자를 포함할 수 있으며 자주 수정되는 파일, 전체가 동시에 로드될 필요가 없음

 

Vite 가 CRA 보다 빠른 이유

1. CRA 는 웹팩으로 번들링하는데 코드가 바뀌면 모든 js코드를 새로 번들링 해준다. 하지만 Vite 는 esbuild 를 이용하여 변경된 부분만 새로 번들링을 해주기 때문에 빠르다. -> 변경되지 않은 화면은 304 를 리턴하여 브라우저가 무시하게 만듬
2. 웹팩은 nodejs, exbuild 는 go로 만든 프로그램
3. CRA는 개발 서버로 express, Vite 는 Koa 서버를 돌리는데 리소스 차이가 생김

 

그래서 다음 프로젝트에선 Vite 를 사용해보기로 하였다. env 사용법이라든가 사소하게 차이가 있는거 같아서

열심히 구글링해야지 싶다 ㅎㅎ.