리액트 기초 강좌 #2 개발 환경 설정 (Node.js + Vite)

2026년 5월 3일 일요일

12 분 소요

지난 시간에는 리액트가 무엇이고 어떤 강점을 가지고 있는지 살펴봤습니다. 이번 시간에는 본격적으로 코드를 작성하기 위해 개발 환경을 갖추고, 첫 리액트 프로젝트를 만들어보도록 하겠습니다.

이번 글에서 할 일은 크게 세 가지입니다.

Node.js 설치
Vite로 새 리액트 프로젝트 생성
개발 서버 실행 후 브라우저에서 확인

Node.js가 뭐고 왜 필요한가요?

리액트는 자바스크립트 라이브러리입니다. 그런데 우리가 작성하는 리액트 코드(JSX, 모듈 import 등)는 브라우저가 곧바로 이해하지 못하는 문법을 포함하고 있어서, 실행 가능한 자바스크립트로 변환하는 과정이 필요합니다. 이 변환을 비롯한 빌드 작업을 컴퓨터에서 수행하려면 자바스크립트 런타임이 필요한데, 그것이 바로 Node.js입니다.

Node.js는 원래 서버 개발을 위해 만들어졌지만, 오늘날 프론트엔드 개발자도 Node.js 위에서 동작하는 도구들(번들러, 컴파일러, 패키지 매니저 등)을 사용해 코드를 작성하고 빌드합니다. 즉, 리액트로 개발하기 위해서는 Node.js가 필수입니다.

Node.js 설치

Node.js는 공식 사이트인 nodejs.org에서 운영체제별 설치 파일을 받아 설치할 수 있습니다.

추천 버전은 LTS(Long Term Support) 버전입니다. LTS는 장기 지원 버전이라는 뜻으로, 일정 기간 안정성과 보안 패치가 보장되는 버전입니다. 사이트에 들어가시면 LTS 버전과 Current 버전이 함께 보이는데, 처음 시작하시는 분이라면 LTS 쪽을 받으세요.

Windows

nodejs.org에 접속
LTS 버튼을 눌러 .msi 설치 파일 다운로드
설치 파일을 실행하고 안내에 따라 다음, 다음, 설치를 진행
설치가 끝나면 명령 프롬프트(CMD)나 PowerShell을 새로 엽니다 (이미 열려 있던 창에는 PATH 변경이 반영되지 않습니다)

Mac

nodejs.org에 접속
LTS 버튼을 눌러 .pkg 설치 파일 다운로드
설치 파일을 실행하고 안내에 따라 설치
터미널을 새로 엽니다

Mac에서는 Homebrew라는 패키지 매니저를 통한 설치도 가능합니다.

Node.js 설치 (Homebrew)

brew install node

설치 확인

설치가 끝났다면 터미널이나 명령 프롬프트에서 다음 두 명령어를 실행해보세요. 버전 번호가 출력되면 정상 설치된 것입니다.

버전 확인

node -v
npm -v

node -v는 Node.js의 버전을, npm -v는 Node.js와 함께 자동으로 설치되는 패키지 매니저인 npm(Node Package Manager)의 버전을 출력합니다. npm은 리액트를 비롯한 수많은 자바스크립트 라이브러리를 우리 프로젝트에 설치할 때 사용하는 도구입니다.

노트

회사나 팀에 따라 npm 대신 pnpm이나 yarn 같은 다른 패키지 매니저를 쓰는 경우도 많습니다. 사용법은 거의 같으니 이 강좌에서는 Node.js와 함께 자동으로 설치되는 npm 기준으로 진행하겠습니다.

Vite로 새 프로젝트 만들기

이제 첫 리액트 프로젝트를 만들어보겠습니다. 우리는 Vite(프랑스어로 "빠르다"라는 뜻, "비트"로 발음)라는 도구를 사용할 것입니다.

Vite는 리액트를 비롯한 여러 프론트엔드 프레임워크를 위한 빌드 도구입니다. 새 프로젝트의 초기 설정을 자동으로 만들어주고, 개발 중에는 매우 빠른 개발 서버를 제공합니다. 예전에는 create-react-app이라는 도구가 표준이었지만 지금은 더 빠르고 가벼운 Vite가 사실상 표준이 되었습니다.

원하는 위치(예: ~/projects 또는 Desktop)로 이동한 뒤 터미널에서 다음 명령어를 실행합니다.

Vite 프로젝트 생성

npm create vite@latest

명령어를 실행하면 몇 가지 질문을 받습니다.

Project name: 프로젝트 폴더 이름. 원하는 이름을 입력합니다 (예: my-first-react).
Select a framework: React를 선택합니다.
Select a variant: JavaScript를 선택합니다. (TypeScript는 나중에 익숙해진 후 도전해도 됩니다.)

선택이 끝나면 Vite가 프로젝트 폴더를 만들어줍니다. 마지막에 다음과 비슷한 안내 메시지가 보일 것입니다.

실행 결과

Done. Now run:
 
  cd my-first-react
  npm install
  npm run dev

안내대로 따라가봅니다.

의존성 설치

cd my-first-react
npm install

npm install은 프로젝트가 의존하는 라이브러리들(리액트 본체, Vite, 기타 도구들)을 인터넷에서 받아와 node_modules 폴더에 설치하는 명령어입니다. 처음에는 시간이 좀 걸릴 수 있습니다.

개발 서버 실행

이제 개발 서버를 띄워봅니다.

개발 서버 실행

npm run dev

다음과 비슷한 출력이 보이면 성공입니다.

실행 결과

  VITE v5.x.x  ready in 250 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

브라우저를 열고 http://localhost:5173에 접속해봅니다. Vite + React 로고가 회전하는 기본 화면이 보이면 모든 것이 정상입니다.

프로젝트 구조 살펴보기

열어둔 프로젝트 폴더를 살펴보면 다음과 같은 구조가 만들어져 있습니다.

my-first-react/

my-first-react/
├── node_modules/        ← 설치된 라이브러리 (직접 건드릴 일 없음)
├── public/              ← 정적 파일 (이미지, favicon 등)
├── src/                 ← 우리가 작성할 코드가 들어갈 곳
│   ├── App.jsx          ← 첫 번째 컴포넌트
│   ├── main.jsx         ← 앱의 진입점
│   ├── App.css
│   └── index.css
├── index.html           ← 앱이 주입될 HTML
├── package.json         ← 프로젝트 정보와 의존성 목록
└── vite.config.js       ← Vite 설정

지금 단계에서 가장 중요한 파일은 **src/App.jsx**입니다. 우리가 화면에 보여줄 내용을 작성하는 곳입니다.

첫 수정 — Hot Module Replacement 체험

좋아하는 에디터(VS Code 권장)로 프로젝트 폴더를 엽니다. src/App.jsx를 열면 다음과 같은 코드를 볼 수 있습니다.

src/App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
 
function App() {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <div>
        {/* ... */}
      </div>
      <h1>Vite + React</h1>
      {/* ... */}
    </>
  )
}
 
export default App

<h1>Vite + React</h1> 부분을 다음과 같이 바꿔봅니다.

src/App.jsx

<h1>안녕하세요, 리액트!</h1>

저장하면 개발 서버를 끄거나 새로고침을 누르지 않아도 브라우저 화면이 즉시 갱신됩니다. 이 마법 같은 기능이 바로 HMR(Hot Module Replacement) — 변경된 모듈만 실시간으로 교체해서 화면에 반영해주는 Vite의 기능입니다. 개발 속도를 크게 끌어올려주니 앞으로 자주 보게 될 것입니다.

팁

개발 서버가 떠 있는 동안 코드를 수정하면 브라우저가 자동으로 갱신됩니다. 개발 서버를 종료하려면 터미널에서 Ctrl + C를 누르면 됩니다. 다시 시작할 때는 같은 폴더에서 npm run dev를 실행합니다.