CLI Tools: Create React App vs Vite

[lksee]

Purpose

React development를 위한 CLI Tools인 Create react app과 Vite 간에 비교

Check List

• [x] Performance
• [x] Configuration
• [x] Ecosystem
• [x] Features
• [x] Flexibility

Remark

참조 링크

[lksee]

• Performance: Vite는 빌드 시간과 개발 서버 시작 시간 양쪽 모두에서 CRA보다 빠른 것으로 알려져 있습니다. 이는 Vite가 원시 ES 모듈 기반 개발 서버를 사용하고, CRA가 Webpack 기반 개발 서버를 사용하기 때문입니다.
• Configuration: Vite는 CRA보다 더 간단한 구성을 가지고 있어 설정과 사용이 더 쉽습니다. Vite는 시작하기 위해 어떤 구성도 필요로하지 않으며, 대부분의 사용 사례에 적합한 합리적인 기본값을 가지고 있습니다. 반면 CRA는 많은 구성 옵션을 제공하며, 초보자에게는 압도적일 수 있습니다.
• Ecosystem: CRA는 오래되어 더 널리 사용되며 더 많은 커뮤니티 지원을 받고 있어 더 큰 생태계를 가지고 있습니다. Vite는 상대적으로 최근에 출시된 도구로 생태계가 작지만, 빠르게 인기를 얻고 있습니다.
• Features: CRA는 개발 서버, 프로덕션 빌드 스크립트, 사전 구성된 ESLint 및 Babel 설정을 포함한 많은 기능을 제공합니다. Vite는 기본적으로 최소한의 기능만 제공하며, 필요에 따라 추가 플러그인을 추가할 수 있습니다.
• Flexibility: Vite는 CRA보다 더 유연하며, React뿐만 아니라 다른 빌드 도구와 프레임워크를 사용할 수 있습니다. Vite는 Vue.js, Svelte 및 순수 JavaScript를 지원하며, CRA는 명확히 React를 위해 설계되었습니다.

요약하면, Vite는 더 빠르고 가벼운 도구로, 덜 구성을 필요로 하지만 CRA는 더 많은 기능을 제공하고 더 큰 생태계를 가지고 있습니다. 어떤 도구를 선택할지는 특정한 요구 사항과 선호도에 따라 다릅니다. 간단하고 빠른 설정을 원한다면 Vite가 더 나은 선택일 수 있습니다. 더 많은 기능과 널리 지원되는 도구를 원한다면 CRA가 더 나은 선택일 수 있습니다.

[lksee]

• Vite - 한국어 공식 홈페이지
• CRA - Getting Started

[lksee]

Node.js와 npm 설치(required) 다운로드 페이지

• Node.js는 Chrome V8 JavaScript 엔진 위에 구축된 오픈 소스 JavaScript 런타임 환경입니다. 이를 통해 JavaScript 코드를 서버 측에서 실행할 수 있습니다. Node.js는 비동기 이벤트 기반의 Single Thread Mode를 사용하여 확장성이 뛰어나며, 네트워크 응용 프로그램 개발을 위해 주로 사용됩니다. Node.js는 브라우저가 아닌 서버 측에서 JavaScript를 실행하는 데에 적합한 환경을 제공합니다.
• npm(Node Package Manager)은 Node.js 패키지 관리자입니다. npm은 Node.js 패키지의 설치, 업데이트, 버전 관리 등을 도와줍니다. 개발자는 npm을 사용하여 Node.js 패키지를 검색하고, 필요한 패키지를 프로젝트에 추가하고, 의존성 관리를 할 수 있습니다. npm은 개발자들이 자신의 코드를 쉽게 공유하고 재사용할 수 있는 방법을 제공합니다. npm은 엄청난 수의 오픈 소스 패키지를 호스팅하고 있으며, 이를 통해 다른 사람들이 개발한 코드를 활용할 수 있습니다.
• 일반적으로 Node.js를 설치하면 함께 npm도 설치됩니다.

Node.js를 설치한 후에는 명령줄 또는 터미널에서 node -v와 npm -v와 같은 명령을 실행하여 Node.js와 npm의 버전을 확인할 수 있습니다.

$ node -v
v18.16.1

$ npm -v
9.5.1

[lksee]

npm의 개략적인 사용법

1. 패키지 초기화

• npm init 명령은 새로운 프로젝트를 위한 package.json 파일을 생성(package.json 파일은 프로젝트의 메타데이터와 종속성 정보를 포함)

2. 패키지 설치

• npm install 명령을 통해 패키지를 설치(는 설치하려는 패키지의 이름)하며, 이 명령은 패키지를 node_modules 폴더에 설치하고, 종속성 정보는 package.json 파일에 자동으로 기록
• npm install 명령은 package.json 파일에 기록된 모든 종속성을 설치(프로젝트를 클론하거나 새로운 환경에서 작업할 때 주로 사용)

3. 패키지 제거

• npm uninstall 명령은 설치된 패키지를 제거(는 제거하려는 패키지의 이름)하며, 이 명령은 node_modules 폴더에서 패키지를 제거하고, package.json 파일에서 종속성 정보도 함께 제거

4. 개발 종속성과 생산적 종속성

• npm install --save-dev 또는 npm install -D 명령은 Development Dependency으로 패키지를 설치(Development Dependency은 개발할 때만 필요한 패키지로, 프로덕션 환경(배포 시)에서는 사용 안 함)
• npm install --save 또는 npm install -S 명령은 Production Dependency으로 패키지를 설치(Production Dependency은 실제로 실행되는 애플리케이션에 필요한 패키지로, 프로덕션 환경에서 사용)

5. 패키지 업데이트

• npm update 명령은 패키지를 최신 버전으로 업데이트(는 업데이트하려는 패키지의 이름)
• npm update 명령은 package.json 파일에 기록된 모든 패키지를 최신 버전으로 업데이트

6. 전역 설치

• npm install -g 명령은 패키지를 전역으로 설치(이렇게 설치한 패키지는 프로젝트 내에서 사용하는 것이 아니라 컴퓨터 전역에서 사용 가능)

이 외에도 npm에는 다양한 명령어와 옵션이 있으며, npm help 명령을 통해 자세한 도움말을 확인 가능하며, package.json 파일을 직접 편집하여 종속성을 추가, 제거 또는 업데이트하기도 함