리액트 프로젝트를 구성할 때 react, babel 그리고 빌드시 필요한 모든 라이브러리를 각각 수동으로 설치하고 생성할 수 있지만 이렇게 수동으로 설치하게 되면 프로젝트 구성이 매우 까다롭고 시작부터 학습해야 할 것들이 굉장이 많아집니다. 그래서 React 뿐만 아니라 다양한 프레임워크는 프로젝트를 자동으로 설정할 수 있도록 도와주는 도구를 제공 합니다.

리액트 프로젝트를 생성하는 방법은 CRA(create react app), Vite, Gatsby, Expo 등 다양한 방법이 있습니다. 이 중 이번시간에는 CRA와 Vite로 리액트 프로젝트를 생성하는 방법에 대해 알아보도록 하겠습니다.

CRA 시작하기 (with Webpack)

Create React App(CRA)는 React 애플리케이션을 손쉽게 설정할 수 있게 해주는 공식 CLI 도구입니다. CRA는 내부적으로 Webpack을 사용하여 빌드 설정과 개발 환경을 관리합니다.

npx create-react-app cra-react-app

Vite 시작하기 (with Vite)

Vite는 프런트엔드 개발을 위한 차세대 빌드 도구입니다. 기존의 번들러보다 더 빠르고 효율적으로 작동하도록 설계되었습니다.

npm create vite@latest 명령어는 Vite 프로젝트를 최신 버전으로 생성하는 명령어입니다. 이 명령어는 Vite 공식 템플릿을 사용하여 새로운 프로젝트를 설정하는 가장 최신의 방법을 제공합니다.

npm create vite@latest // 최신 버전
npm create [email protected] // 강의시 버전

cd vite-react-app
npm i
npm run dev

프로젝트 구조 차이

CRA (with Webpack)

스크린샷 2024-05-20 오후 3.44.19.png

Vite

스크린샷 2024-05-20 오후 3.44.25.png

강의시 package.json

{
  "name": "learn-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

참고