CRA, WEBPACK 그리고 VITE

React 프로젝트를 생성하는 방법으로 크게 3가지가 있다.

1. CRA(create-react-app)
2. CRA 없이 생성하기 (WEBPACK)
3. VITE

CRA(create-react-app)

• create-react-app이란

  • react 초기 셋팅 작업을 미리 하고, 환경을 다시 패키징 한 것.
  • 개발 서버 설정, babel 컴파일러, 웹팩 설정 등 자동으로 처리된다.

• 장점

  • react 프로젝트를 쉽게 구축할 수 있고, 초기 셋팅이 되어있어서 편리한 사용성을 제공한다.

• 단점

  • 사용하지 않는 설정이나 라이브러리까지 overLoadiong 되어 있어서 번들이 무거워져 빌드 시간이 길어질 수 있다.

• 설치방법

  //설치
  npx create-react-app 폴더이름
  
  //애플리케이션 실행
  npm start   

WEBPACK

• webpack 이란

  • 자바스크립트의 모듈 번들러 라이브러리
  • 여러가지의 나눠진 파일을 하나의 번들로 모듈화하여 압축 및 최적화 할 수 있다.

• 장점

  • 프로젝트의 빌드 및 번들링 프로세스를 직접 제어할 수 있다.
  • 직접 웹팩을 설정하여 프로젝트에 필요한 최적화된 빌드를 구성하여 성능을 향상시킬 수 있다.

• 단점
  - 모든 설정과 플러그인을 수동으로 구성해야 하므로 초기 구축 시간이 길어질 수 있다.
  - 웹팩, 관련 플러그인들의 업데이트도 수동으로 관리해야 한다.
  
  

  wabpack으로 프로젝트를 생성하고, 설치방법과 환경설정은 github에 정리하였다.
  https://github.com/yejz0715/studyBook

VITE

• vite란

  • 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드도구

• 장점

  • vite는 ES build를 사용하여 빌드하기 때문에 빌드속도가 빠르다.
    ( ES build는 native 언어인 Go로 구현되어 있어서 훨씬 빠름 )
    
  • 번들링하지 않고, 바로 로컬 개발 서버의 ESM 방식을 사용하기 때문에 명령어를 실행함과 동시에 개발 서버가 구동된다.

• 단점

  • 작은 규모, 중간 규모의 프로젝트에 적합하게 설계되어 있어서 대규모 프로젝트에서 사용 및 확장성에 대해 아직 부족할 수 있다.

• vite 생성
  

    //설치
  	npm init vite
	moaletter-app //프로젝트 명
    react, typescript  //프레임워크 설정
    cd moaletter-app
    npm instatll
    npm run dev //애플리케이션 실행

vite로 프로젝트를 생성하고, 설치방법과 자세한 내용은 github에 정리하였다.
https://github.com/yejz0715/vite-project

차이점 + 느낀점

create-react-app는 react 프로젝트를 쉽게 구축할 수 있고, 초기 설정도 되어있어서 사용하기에는 편리하지만, 사용하지 않는 라이브러리가 포함되어 있어서 번들이 무거워져 빌드 시간이 길어질 수 있다.

wabpack은 필요한 라이브러리와 설정을 선택적으로 추가할 수 있지만, 모든 설정이 수동으로 되어 있어서 초기 설정을 직접 하기엔 복잡하고, 어려웠다. 그리고 생각보다 시간도 오래 걸렸다.

vite는 빠른 개발환경과 빌드 속도가 강점이라 앞으로도 혼자 간단한 프로젝트를 진행할 때 자주 사용할 것 같다.