react 프로젝트 생성 - vite 로 프로젝트 생성/실행

Create react app - CRA로 프로젝트 생성

개요

간단하게 React에 대해 알아봤고, 이제 하나하나씩 적용해보면서 어떻게 웹페이지를 만들어야 하는지에 대해 알아볼 것이다.

리액트를 사용해 프로젝트를 시작하는 방법은 다양한데, 오늘은 create-react-app을 통해 만드는 것을 정리해보겠다.

 

앞으로의 학습은

현장에서 바로 써먹는 리액트 with 타입스크립트

이 도서를 중점으로 해서 할 계획이다.

 

1. create-react-app

React 애플리케이션을 쉽고 빠르게 설정할 수 있도록 도와주는 페이스북에서 만든 CLI 툴이다.

Webpack이나 Babel 등의 설정 없이 즉시 React 프로젝트를 생성할 수 있고, 개발 서버, 빌드 시스템, ESLint, Jest 등의 도구가 기본적으로 포함되어 있다.

 

* Webpack

-> JavaScript 애플리케이션의 모듈 번들러로, 여러 개의 파일을 하나의 번들로 묶어주는 역할을 한다.

-> 코드 분할, 이미지 및 CSS 처리 등 다양한 최적화 기능을 활용할 수 있다.

 

* Babel

-> 최신 JavaScript(ES6+) 코드를 구형 브라우저에서도 실행할 수 있도록 변환하는 트랜스파일러이다.

-> JSX 문법을 일반 JavaScript로 변환하는 기능도 포함하고 있다.

 

즉, create-react-app을 통해 우리는 Webpack과 Babel을 별도로 구성할 필요가 없다!

 

2. 설치 및 프로젝트 실행

2-1. create-react-app 설치

VS Code 터미널에 다음과 같이 입력해 create-react-app을 설치한다.

npm install -g create-react-app

 

2-2. 프로젝트 생성

npx create-react-app my-app

 

위와 같이 입력하게 되면 my-app 이라는 프로젝트가 생성된다.

 

* npx란?

-> npm 패키지를 일시적으로 실행할 수 있는 도구이다.

-> npm = 패키지 설치

-> npx = npm을 통해 설치한 패키지를 실행할 때 사용

 

2-3. 프로젝트 실행

다음으로 프로젝트를 실행해준다.

cd my-app
npm start

 

 

 

그럼 브라우저에 다음과 같은 웹사이트 화면이 나타나게 된다.

이때, 기본적으로 http://localhost:3000 에서 애플리케이션이 실행된다.

 

2-4. 타입스크립트 템플릿 사용하기(선택)

npx create-react-app my-app --template typescript

 

3. 프로젝트 폴더 구조

 

my-app/
├── node_modules/   # 프로젝트 의존성 패키지
├── public/         # 정적 파일 (index.html 등)
├── src/            # 주요 React 코드 (컴포넌트, 스타일 등)
│   ├── App.css
│   ├── App.js      # 메인 React 컴포넌트
│   ├── App.test.js
│   ├── reportWebvitals.js
│   ├── setupTests.js
│   ├── index.js    # React 진입점
│   ├── App.css     # 기본 스타일 파일
│   ├── index.css   # 전역 스타일 파일
├── .gitignore      # Git에 포함되지 않을 파일 목록
├── package.json    # 프로젝트 메타 정보 및 의존성 목록
├── README.md       # 프로젝트 설명
└── yarn.lock or package-lock.json # 패키지 버전 관리 파일

 

위와 같은 구조가 나오게 된다!

 

: public

-> HTML 파일과 favicon 등 정적인 파일이 담겨 있다.

-> index.html의 경우 기본적인 html

 

: src

-> 자바스크립트 파일들을 보관하고 있다.

 

# index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

index.js에 위의 코드와 같은 내용이 있는데

저 root라는 id를 가진 <div> 태그가 index.html에 있고, 그 안에 리액트 애플리케이션을 삽입하는 코드이다.

 

1) 즉, document.getElementById('root')를 통해 HTML의 요소를 찾는다.

2) ReactDOM.createRoot를 통해 리액트 프로젝트를 생성한다.

3) render 함수를 통해 root 요소에 <App />이라는 컴포넌트를 표시한다.

 

# reportWebVitals.js

-> 리액트의 성능을 측정하기 위해 제공되는 파일이다.

 

# setupTest.js

-> 리액트 프로젝트를 테스트하는 데 필요한 설정 파일이다.

 

: package.json

-> 리액트 애플리케이션 개발에 필요한 라이브러리들이나 프로젝트에서 사용하는 명령어 스크립트 등을 관리하는 파일이다.

 

 

Vite로 프로젝트 생성

npm create vite@latest

 

프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있다.

Vite + Vue 프로젝트를 만들고 싶다면 다음과 같이 입력

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bun create vite my-vue-app --template vue

그 외 템플릿

vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts

 

cd 해당 프로젝트

npm install
npm run dev

 

기본적으로 Vite에서 제공하는 npm 스크립트

{
  "scripts": {
    "dev": "vite", // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
    "build": "vite build", // 배포용 빌드 작업을 수행합니다.
    "preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
  }
}

 

 

vite 가이드 https://ko.vitejs.dev/guide/