React / 프로젝트 생성

React 프로젝트 생성 방법

 

CRA	Vite (권장)
모듈 번들러로 Webpack 사용	모듈 번들러로 Rollup 사용
개발 환경에서도 번들링 진행 O	개발 환경에서는 번들링 진행 X
서버 시작과 리로딩 시간 느림 (코드를 수정할때마다 번들링 진행)	서버 시작과 리로딩 시간 빠름
Webpack의 다양한 기능 이용 가능	빠른 개발 속도에 유리
모듈도 같이 설치(node_modules)	모듈은 따로 설치해야 됨
npx create-react-app	npm create vite@latest

 

* 번들링 : 배포하기 위해 여러 코드와 파일을 한번에 묶어주는 과정

 

* CRA가 이제 추천되지 않는 이유

1. 느린 개발 속도 → Webpack 기반이라 빌드와 HMR 속도가 느려 코드 변경 반영이 늦음.
2. 번들 크기 큼 → 기본 설정이 최적화 부족, 불필요한 코드 포함 가능성 높음.
3. 설정 변경 어려움 → Webpack과 Babel 설정을 변경하기 어려움.
4. 성능 저하 가능성 → 대규모 프로젝트에서 성능이 떨어지고, Vite에 비해 최적화가 부족함.

그러나 아직 많이 쓰이고 있기 때문에 알아두는 것이 좋다!

 

 

 

1. 설치

1) CRA

• npx create-react-app으로 한번에 프로젝트 환경을 만들 수 있다. (시간은 Vite보다 더 많이 소요된다.)

2) Vite 

• 시간은 덜 소요되지만 선택을 입력받는 프롬프트가 있고 추가로 설치해줘야 한다.
• 나는 react를 사용하고, 자바스크립트를 사용할 것이기 때문에 아래와 같이 선택을 해줬고,
• 설치가 바로 완료되면 생성한 폴더로 이동해 npm install을 해준다.

 

 

2. 구조 및 실행 차이

 

폰트 크기 차이 이슈...

 

1) CRA

• 핵심 컴포넌트인 App이나 기타 파일이 js 형식 파일
• 애플리케이션의 시작점 역할이 index.js
• 그 외에도 src에 추가적인 파일들이 더 생성되어있음
• npm run start로 실행
• 포트 번호가 3000

2) Vite

• 핵심 컴포넌트인 App이나 기타 파일이 jsx 형식 파일
• 애플리케이션의 시작점 역할이 main.jsx
• npm run dev로 실행
• 포트번호가 5173

 

 

 

이 때 앱을 실행시키면 터미널이 계속 위와 같은 상태일텐데,

win / mac 둘다 ctrl + c를 누르면 서버를 종료시키면서 다시 원래의 터미널 창으로 돌아갈 수 있다. 

 

 

3. create-react-app VS vite의 성능 비교

 

비교 항목	CRA	Vite
초기 빌드 속도	Webpack 기반으로 빌드 시간이 오래 걸림.	ESBuild를 사용하여 초기 빌드 속도가 매우 빠름.
개발 서버 속도	코드 변경 시 반영 속도가 상대적으로 느림.	HMR(Hot Module Replacement)이 즉각적으로 반영됨.
번들 크기	기본 설정에서 최적화가 부족함.	최신 번들러를 사용하여 최적화가 잘됨.
모듈 구성 방식	Webpack 기반의 설정이 기본 값으로 제공됨.	Rollup과 ESBuild를 활용해 빠르게 번들링됨.
react 공식 지원 여부	React 공식 팀에서 유지보수 하지만, 더 이상 추천되지 않음.	React 공식 문서에서 권장하는 방식.

 

- Webpack : Javascript 애플리케이션을 위한 모듈 번들러로, 여러 파일을 하나의 번들로 묶어 최적화된 형태로 배포할 수 있게 하는 도구

- ESbuild : Go언어로 작성된 고속 번들러 및 트랜스 파일러로, 웹팩보다 훨씬 빠른 속도로 코드를 빌드시키는 도구

- Rollup : 모듈 번들러로, 번들 크기가 웹팩보다 작으며 모듈, 코드 최적화에 특화되어 있음

- HMR : 번들러에서 사용되는 기능으로, 페이지 전체를 새로고침 하지 않고 변경된 모듈만 즉시 교체해 적용하는 기술이다. (상태를 유지하면서 ui를 업데이트 가능함)