처음 React 공부할 때 Create React App으로 프로젝트 만들었는데 진짜 느려서 답답했어요. 그러다 Vite 나오고 나서 세상이 바뀌었죠. 개발 서버 켜는데 2초면 끝나니까 편하더라고요.

React를 배우려면 일단 프로젝트를 만들어야겠죠? 예전에는 Create React App(CRA)을 많이 썼는데, 요즘은 Vite를 씁니다. 왜냐면 엄청 빠르거든요. CRA로 프로젝트 만들면 1-2분 걸리는데 Vite는 10초면 끝나요.

사전 준비: Node.js 설치

React 프로젝트를 만들려면 Node.js가 필요해요.

Node.js 설치 방법

1. Node.js 공식 사이트 접속
2. LTS 버전 다운로드 (안정적인 버전)
3. 설치 파일 실행 후 Next만 계속 누르면 됨

설치 확인은 터미널에서:

node -v
# v20.10.0 같은 버전이 나오면 성공

npm -v
# 10.2.3 같은 버전이 나오면 성공

실행 결과:

npm은 Node.js 설치하면 자동으로 같이 설치됩니다.

1단계: React 프로젝트 생성

VS Code를 열고 터미널을 켜세요. (단축키: Ctrl + J 또는 Cmd + J)

프로젝트를 만들 폴더로 이동한 다음:

npm create vite@latest

이 명령어를 치면 몇 가지 질문이 나와요.

질문 1: Project name

? Project name: › my-react-app

프로젝트 이름을 입력하세요. 영어 소문자와 하이픈만 쓰는 게 좋아요.

질문 2: Select a framework

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

화살표 키로 React 선택하고 Enter!

질문 3: Select a variant

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC

처음 배우는 거라면 JavaScript 선택하세요. TypeScript는 나중에 배우면 됩니다.

SWC가 뭐냐면, 빌드를 더 빠르게 해주는 도구예요. 붙어있는 걸 선택해도 상관없어요.

2단계: 라이브러리 설치

프로젝트가 생성됐으면 해당 폴더로 이동해서 필요한 라이브러리를 설치해야 해요.

# 프로젝트 폴더로 이동
cd my-react-app

# 라이브러리 설치
npm install

npm install (또는 줄여서 npm i)을 실행하면 node_modules 폴더가 생겨요. 여기에 React 실행에 필요한 모든 라이브러리가 들어갑니다.

이 폴더는 용량이 크니까 git에 올리면 안 돼요. .gitignore 파일에 이미 등록되어 있으니 걱정 마세요.

3단계: 프로젝트 실행

npm run dev

이 명령어를 치면:

  VITE v5.0.0  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

브라우저에서 http://localhost:5173 열면 React 앱이 실행됩니다!

Vite + React 로고가 보이고 카운터 버튼이 있는 페이지가 나오면 성공이에요.

프로젝트 폴더 구조 이해하기

생성된 프로젝트 폴더를 열어보면 이런 구조예요:

my-react-app/
  node_modules/     # 설치된 라이브러리들
  public/           # 정적 파일 (이미지, 폰트 등)
  src/              # 소스 코드
    assets/         # 이미지 등 리소스
    App.css         # App 컴포넌트 스타일
    App.jsx         # 메인 컴포넌트
    index.css       # 전역 스타일
    main.jsx        # 진입점
  .gitignore        # git 제외 파일
  index.html        # HTML 템플릿
  package.json      # 프로젝트 설정
  vite.config.js    # Vite 설정

주요 파일 설명

package.json

프로젝트의 설정 파일이에요. 여기서 중요한 부분:

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

• type: "module": ES Module 시스템 사용
• scripts: 터미널에서 npm run 명령어로 실행할 수 있는 명령어들
• dependencies: 설치된 라이브러리 목록

src/main.jsx

앱의 시작점이에요:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

index.html의 root div에 React 앱을 렌더링하는 코드입니다.

src/App.jsx

메인 컴포넌트예요. 우리가 주로 수정할 파일이죠:

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  )
}

export default App

ESLint 설정 (선택사항)

코드 품질을 위해 ESLint 규칙을 조금 수정하면 편해요.

eslint.config.js 파일에서 rules 부분을 찾아서:

rules: {
  // 사용하지 않는 변수 경고 끄기
  'no-unused-vars': 'off',
  // prop-types 검사 끄기 (TypeScript 쓸 거면 필요 없음)
  'react/prop-types': 'off',
}

이 두 옵션을 끄면 개발할 때 불필요한 경고가 안 떠서 편합니다.

첫 번째 수정해보기

App.jsx 파일을 열어서 내용을 바꿔보세요:

function App() {
  return (
    <div>
      <h1>나의 첫 React 앱!</h1>
      <p>드디어 React를 시작했다!</p>
    </div>
  )
}

export default App

실행 결과:

저장하면 브라우저가 자동으로 새로고침되면서 바뀐 내용이 보여요. 이게 **Hot Module Replacement(HMR)**이라는 기능인데, Vite가 알아서 해줍니다.

유용한 명령어 정리

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 결과물 미리보기
npm run preview

npm run build를 하면 dist 폴더가 생기는데, 이 폴더를 서버에 올리면 배포 완료예요.

운영자 실전 노트

실제 프로젝트 진행하며 겪은 문제

• CRA vs Vite 선택 고민 → 빌드 속도가 5배 이상 차이나서 Vite 선택
• 프로젝트 구조 혼란 → src 폴더 안에 components, pages, utils 디렉토리 미리 생성하는 습관 필요

이 경험을 통해 알게 된 점

• 개발 서버 속도가 생산성에 큰 영향을 미친다
• nvm으로 Node 버전 관리하면 프로젝트 전환이 편하다

다음 단계

프로젝트 생성은 완료됐다. 다음 글에서는 React의 핵심인 컴포넌트에 대해 자세히 다룬다. 컴포넌트만 제대로 이해하면 React의 절반은 끝난 것이다.

---

React 시리즈 탐색:

• 이전: React 소개 - 왜 React를 배워야 할까?
• 다음: React 컴포넌트 완벽 이해하기

← 블로그 목록으로