티스토리 뷰
React를 처음 시작할 때 가장 먼저 막히는 구간은 문법이 아니라 개발환경 세팅입니다.
특히 입문자 입장에서는 아래가 한 번에 헷갈리기 쉽습니다.
- Node.js는 왜 설치해야 하는가?
- npm은 무엇이고 같이 설치되는가?
- React 프로젝트는 어떤 명령어로 시작하는가?
- 생성한 프로젝트는 어떻게 실행하는가?
이번 글에서는 React를 처음 시작하는 분 기준으로 Node.js 설치 → 버전 확인 → React 프로젝트 생성 → 개발 서버 실행까지 한 번에 따라갈 수 있도록 정리하겠습니다.
React 프로젝트는 브라우저에서 바로 HTML 파일 하나만 열어서 시작하는 방식보다, 빌드 도구와 패키지 관리 도구를 함께 사용하는 구조가 일반적입니다. 이때 필요한 것이 Node.js입니다.
Node.js를 설치하면 보통 함께 사용할 수 있는 것이 npm입니다.
- Node.js = JavaScript를 실행할 수 있는 런타임
- npm = 필요한 라이브러리를 설치하는 패키지 관리자
즉, React 개발환경은 보통 Node.js 설치가 시작점입니다.
React를 쓰기 위해 Node.js를 설치한다기보다, React 프로젝트를 만들고 실행하는 도구들을 쓰기 위해 Node.js가 필요하다고 이해하면 쉽습니다.
1. Node.js 설치
2. node / npm 버전 확인
3. React 프로젝트 생성
4. 프로젝트 폴더 이동
5. 개발 서버 실행
6. 브라우저에서 localhost 확인
이 순서대로만 진행하면 React 입문 개발환경은 거의 끝났다고 보면 됩니다.
Node.js는 공식 사이트에서 설치하는 것이 가장 무난합니다.
- 사이트: https://nodejs.org
- 입문자라면 보통 LTS 버전 설치를 권장합니다.
LTS는 Long Term Support 버전으로, 상대적으로 더 안정적인 버전입니다.
설치가 끝났다면 터미널(또는 명령 프롬프트)에서 아래 명령어로 확인합니다.
node -v
npm -v
정상이라면 버전이 출력됩니다.
예시:
v22.14.0
10.9.2
예전에는 Create React App(CRA)로 많이 시작했지만, 현재는 Vite로 시작하는 경우가 많습니다.
프로젝트 생성 명령어는 아래처럼 진행하면 됩니다.
npm create vite@latest
명령어를 실행하면 보통 아래 순서로 질문이 나옵니다.
- 프로젝트 이름 입력
- 프레임워크 선택 → React
- 언어 선택 → JavaScript 또는 TypeScript
예를 들어:
npm create vite@latest
# Project name: react-start
# Framework: React
# Variant: JavaScript
그러면 react-start 같은 폴더가 생성됩니다.
- 프로젝트 생성이 빠르고
- 개발 서버 실행 속도가 빠르며
- 입문용/실무용 모두 무난하게 시작하기 좋기 때문입니다.
프로젝트가 생성되면 해당 폴더로 이동합니다.
cd react-start
그 다음 아래 명령어로 필요한 패키지를 설치합니다.
npm install
이 명령어는 package.json 기준으로 필요한 라이브러리를 내려받는 과정입니다.
아래 명령어를 실행합니다.
npm run dev
그러면 터미널에 보통 아래처럼 주소가 출력됩니다.
Local: http://localhost:5173/
이 주소를 브라우저에서 열면 React 시작 화면을 볼 수 있습니다.
React 개발환경 세팅이 끝났다면 이후에는 보통 아래 순서로 넘어갑니다.
- 컴포넌트 구조 이해
- props / state
- 이벤트 처리
- API 호출
- 라우팅
- 빌드
- 서버 배포
즉, 개발환경 세팅 글은 React 학습의 시작점 역할을 합니다.
React를 처음 시작할 때 가장 중요한 것은 개발환경이 정상적으로 실행되는 첫 경험을 만드는 것입니다.
der-top:1px solid #dbeafe; font-size:15px; line-height:1.95; color:#0f172a;">
React를 처음 시작할 때 가장 중요한 것은 개발환경이 정상적으로 실행되는 첫 경험을 만드는 것입니다.
n:18px 0 28px; padding:16px 18px; border-left:5px solid #2563eb; background:#eff6ff; color:#1e3a8a; border-radius:12px; font-size:15px; line-height:1.9;"> React를 처음 시작할 때 가장 중요한 것은 개발환경이 정상적으로 실행되는 첫 경험을 만드는 것입니다.
'Front > React' 카테고리의 다른 글
| React 리눅스 서버 배포 방법 | build 파일 업로드부터 실제 서비스 적용까지 (0) | 2026.04.03 |
|---|---|
| React Router 사용법 | 페이지 이동, Link, 기본 라우팅 적용 방법 (2) | 2026.04.02 |
| React JSX 문법 정리 | 기본 문법, 조건부 렌더링, 리스트 렌더링까지 (0) | 2026.04.02 |
| React 프로젝트 구조 정리 | src, public, components 폴더 역할 쉽게 이해하기 (0) | 2026.04.01 |
| React란 무엇인가? 특징, 장점, 사용하는 이유까지 쉽게 정리 (0) | 2026.04.01 |