프로젝트 세팅 (Vite)

React를 배우려면 먼저 코드를 실행할 환경이 필요합니다. 이번 강의에서는 Node.js를 설치하고, Vite 로 React 프로젝트를 만들어 개발 서버를 띄우는 것까지 처음부터 끝까지 따라 해 봅니다. 한 번만 해 두면 다음 강의부터는 바로 컴포넌트 작성에 집중할 수 있어요.

학습 목표

• Node.js와 npm이 무엇이고 왜 필요한지 안다.
• npm create vite 로 React 프로젝트를 생성할 수 있다.
• 개발 서버(npm run dev)를 실행해 브라우저에서 결과를 확인할 수 있다.
• 프로젝트 폴더 구조에서 어떤 파일이 무슨 역할을 하는지 파악한다.

1. Node.js 설치

React 도구들은 Node.js 위에서 동작합니다. Node를 깔면 패키지 관리자 npm 도 함께 설치돼요.

1. nodejs.org 에서 LTS 버전을 받아 설치합니다.
2. 터미널을 열고 설치가 됐는지 확인합니다.

node -v   # v20.x 처럼 버전이 찍히면 성공
npm -v    # 10.x 처럼 버전이 찍히면 성공

💡 TIP — LTS(Long Term Support)는 가장 안정적인 버전입니다. 특별한 이유가 없으면 LTS를 쓰세요. 버전이 안 찍히면 터미널을 껐다 켜거나 컴퓨터를 재시작해 보세요.

2. 프로젝트 만들기 — Vite

예전엔 create-react-app 을 많이 썼지만, 지금은 더 빠르고 가벼운 Vite 가 표준입니다. 아래 한 줄이면 프로젝트가 만들어집니다.

npm create vite@latest my-app -- --template react

• my-app — 만들 폴더(프로젝트) 이름. 원하는 이름으로 바꾸면 됩니다.
• --template react — React용 템플릿을 쓰겠다는 뜻입니다.

💡 TIP — 타입스크립트로 시작하고 싶다면 --template react-ts 를 쓰세요. 이 강좌는 JS(react) 기준으로 진행합니다.

생성이 끝나면 안내 문구대로 폴더로 들어가 패키지를 설치합니다.

cd my-app
npm install      # package.json에 적힌 라이브러리들을 내려받음

npm install 은 node_modules 폴더에 React를 포함한 의존성들을 내려받습니다. 이 폴더는 용량이 크고 다시 만들 수 있으므로 보통 .gitignore 로 git 추적에서 제외합니다.

3. 개발 서버 실행

npm run dev

실행하면 터미널에 다음과 비슷한 주소가 뜹니다.

  VITE v5.x  ready in 320 ms

  ➜  Local:   http://localhost:5173/

브라우저에서 http://localhost:5173 을 열면 Vite + React 기본 화면이 보입니다. 코드를 저장하면 새로고침 없이 화면이 즉시 바뀌는데, 이걸 HMR(Hot Module Replacement) 이라고 합니다.

⚠️ 주의 — 개발 서버는 켜 둔 채로 작업합니다. 끄려면 터미널에서 Ctrl + C 를 누르세요.

4. 폴더 구조 살펴보기

생성된 프로젝트의 핵심 파일은 다음과 같습니다.

my-app/
├── index.html          # 앱이 끼워지는 단 하나의 HTML
├── package.json        # 프로젝트 정보·스크립트·의존성 목록
├── vite.config.js      # Vite 설정
└── src/
    ├── main.jsx        # 진입점: React를 #root에 연결
    ├── App.jsx         # 최상위 컴포넌트
    └── index.css       # 전역 스타일

파일	역할
index.html	<div id="root"></div> 한 칸짜리 HTML. 여기에 React가 그려집니다.
src/main.jsx	React 앱을 #root 에 마운트하는 시작 파일
src/App.jsx	화면의 최상위 컴포넌트. 보통 여기서부터 작업을 시작합니다
package.json	npm run dev 같은 명령(scripts)과 설치된 라이브러리 정보

진입점인 src/main.jsx 는 대략 이렇게 생겼습니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

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

• index.html 의 #root 요소를 찾아 그 안에 <App /> 을 그립니다.
• <App /> 안에 우리가 만들 컴포넌트들이 차곡차곡 들어가게 됩니다.

5. 첫 화면 바꿔 보기

src/App.jsx 를 열어 내용을 통째로 아래로 바꿔 봅시다.

function App() {
  return <h1>안녕하세요, React!</h1>;
}

export default App;

저장하면 브라우저 화면이 곧바로 "안녕하세요, React!" 로 바뀝니다. 이게 바로 다음 강의에서 배울 컴포넌트입니다. 세팅은 여기까지면 충분해요.

요약

• React 개발에는 Node.js(+ npm)가 필요하다. LTS 버전을 설치한다.
• Vite 로 npm create vite@latest my-app -- --template react 한 줄로 프로젝트를 만든다.
• npm install 로 의존성을 받고, npm run dev 로 개발 서버를 띄운다.
• index.html(빈 #root) → src/main.jsx(마운트) → src/App.jsx(최상위 컴포넌트) 순으로 연결된다.
• 보통 src/App.jsx 부터 작업을 시작한다.

연습문제

1. 터미널에서 Node와 npm 버전을 확인하는 명령을 각각 쓰세요.
2. study 라는 이름의 React 프로젝트를 Vite로 만드는 명령을 쓰세요.
3. npm install 이 만드는 폴더 이름은 무엇이며, 왜 보통 git에서 제외하나요?
4. 브라우저가 실제로 처음 읽어들이는 HTML 파일은 무엇이고, React는 그 안 어디에 그려지나요?

힌트 — 2번은 템플릿 옵션 -- --template react 를 잊지 마세요. 4번은 index.html 안의 id="root" 요소를 떠올려 보세요.