리액트는 웹 브라우저에서 실행되는 자바스크립트 라이브러리이지만, 리액트 개발 과정에서는 Node.js 환경이 필요합니다. Node.js는 자바스크립트 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이며, npm(Node Package Manager)은 Node.js 생태계의 패키지(라이브러리)들을 관리해주는 도구입니다. 리액트 프로젝트를 생성하고 필요한 라이브러리들을 설치할 때 npm을 사용하게 됩니다.
LTS(Long Term Support) 버전 다운로드: 웹사이트에 접속하면 두 가지 버전의 Node.js를 다운로드할 수 있습니다.
LTS(Long Term Support) 버전: 장기적으로 안정적인 지원을 제공하는 버전입니다. 특별한 이유가 없다면 이 버전을 설치하는 것을 강력히 권장합니다.
현재(Current) 버전: 최신 기능이 포함되어 있지만, 안정성이 LTS보다 떨어질 수 있습니다.
LTS 버전 버튼을 클릭하여 설치 파일을 다운로드합니다. 여러분의 운영체제에 맞는 설치 파일이 자동으로 선택될 것입니다.
설치 프로그램 실행 및 진행: 다운로드한 설치 파일을 실행합니다. 설치 마법사가 나타나면 특별한 설정 없이 "Next(다음)" 버튼을 계속 클릭하여 기본 설정으로 설치를 완료합니다. 중간에 "Chocolatey" 또는 "Tools for Native Modules"와 같은 추가 설치 옵션이 나타날 수 있는데, 일반적으로 체크하지 않고 진행해도 무방합니다. 설치가 완료되면 "Finish(마침)" 버튼을 클릭합니다.
설치 확인
Node.js와 npm이 제대로 설치되었는지 확인하기 위해 명령 프롬프트(Windows) 또는 터미널(macOS/Linux)을 엽니다.
Windows: Windows 키 + R을 누르고 cmd를 입력한 후 Enter를 누르거나, 시작 메뉴에서 명령 프롬프트를 검색하여 실행합니다.
macOS: Command + Space를 눌러 Spotlight를 연 후 터미널을 검색하여 실행합니다.
터미널(또는 명령 프롬프트)에 다음 명령어를 입력하고 Enter를 누릅니다.
node -vnpm -v
성공적으로 설치되었다면, v18.x.x 또는 v20.x.x와 같은 Node.js 버전과 9.x.x 또는 10.x.x와 같은 npm 버전이 출력될 것입니다. (버전 숫자는 여러분이 설치한 버전에 따라 다를 수 있습니다.)
코드를 작성하고 편집하기 위한 도구로 Visual Studio Code (VS Code)를 강력히 추천합니다. VS Code는 마이크로소프트에서 개발한 무료 오픈소스 코드 에디터로, 가볍고 빠르며, 수많은 확장 기능(Extension)을 통해 개발 생산성을 극대화할 수 있습니다.
다운로드: 웹사이트 중앙의 "Download for [여러분의 운영체제]" 버튼을 클릭하여 설치 파일을 다운로드합니다.
설치 프로그램 실행 및 진행: 다운로드한 설치 파일을 실행합니다.
Windows: 설치 시 PATH에 추가, Code로 열기 액션 추가 등의 옵션을 모두 체크하는 것을 권장합니다. 이를 통해 편리하게 프로젝트 폴더를 VS Code로 열 수 있습니다.
macOS: .dmg 파일을 열어 Visual Studio Code 아이콘을 Applications 폴더로 드래그 앤 드롭합니다.
VS Code 확장 프로그램 (Extensions) 설치 (선택 사항이지만 강력 권장)
VS Code는 확장 프로그램을 통해 다양한 기능을 추가하고 개발 경험을 개선할 수 있습니다. 리액트 개발에 유용한 몇 가지 확장 프로그램을 추천합니다. VS Code를 실행한 후, 왼쪽 사이드바의 확장(Extensions) 아이콘(네모난 블록 모양)을 클릭하거나 Ctrl+Shift+X (macOS: Cmd+Shift+X)를 눌러 확장 마켓플레이스를 엽니다.
ES7+ React/Redux/GraphQL/React-Native snippets: 리액트 컴포넌트나 함수 등을 빠르게 작성할 수 있도록 코드 스니펫을 제공합니다. rafce (React Arrow Function Component Export)와 같은 단축어를 사용하면 기본적인 컴포넌트 구조를 빠르게 생성할 수 있습니다.
Prettier - Code formatter: 코드를 일관된 스타일로 자동으로 포맷팅해줍니다. 협업 시 코드 스타일을 통일하고 가독성을 높이는 데 필수적입니다.
Auto Rename Tag: HTML/JSX 태그의 시작 태그를 변경하면 자동으로 닫는 태그도 변경해줍니다.
Material Icon Theme / vscode-icons: 파일 및 폴더 아이콘을 시각적으로 구분하기 쉽게 만들어줍니다.
이제 Node.js와 VS Code가 모두 준비되었으니, 드디어 첫 번째 리액트 프로젝트를 생성해 볼 차례입니다. 현재 실무/커뮤니티에서 가장 널리 쓰이는 시작 방식 중 하나인 Vite를 사용하겠습니다. Vite는 빠른 개발 서버와 간결한 설정을 제공해, 입문 단계에서도 복잡한 번들 설정 없이 바로 개발을 시작할 수 있도록 돕습니다.
과거에는 다른 스타터 도구를 많이 사용했지만, 현재는 초기 속도와 설정 단순성 측면에서 Vite가 학습과 실무 모두에서 유리한 선택이 되는 경우가 많습니다.
특히 빠르게 띄우고 빠르게 수정 반영하기가 중요한 입문 단계에서는, 빌드 체인 이해보다 화면-코드 피드백 루프를 짧게 가져가는 것이 학습 효율을 크게 높입니다.
다만 도구가 단순해도 Node 버전과 패키지 설치 상태가 어긋나면 실행이 실패하므로, 각 단계의 확인 명령을 반드시 함께 점검하는 습관이 중요합니다.
프로젝트 생성 과정
프로젝트를 생성할 폴더로 이동: 터미널(또는 명령 프롬프트)을 열고, 프로젝트를 생성하고 싶은 디렉토리로 이동합니다. 예를 들어, C:\Users\YourName\Documents 또는 ~/Documents와 같은 폴더에 프로젝트를 만들고 싶다면 다음과 같이 명령어를 입력합니다.
# Windows 예시cd C:\Users\YourName\Documents# macOS/Linux 예시cd ~/Documents
만약 아직 해당 폴더가 없다면 mkdir my-react-projects 와 같이 폴더를 생성하고 이동할 수 있습니다.
Vite로 프로젝트 생성: 다음 명령어를 입력하여 my-first-react-app이라는 이름의 새로운 리액트 프로젝트를 생성합니다. (프로젝트 이름은 자유롭게 지정할 수 있습니다.)
VS Code 메뉴에서 File (파일) > Open Folder (폴더 열기...)를 선택합니다.
또는 터미널에서 npm run dev를 실행했던 my-first-react-app 폴더로 이동한 상태에서 다음과 같이 명령어를 입력하면 VS Code가 해당 폴더를 열면서 실행됩니다. (이 방법이 더 편리합니다.)
code .
(.은 현재 디렉토리를 의미합니다.)
VS Code의 탐색기(Explorer)에서 my-first-react-app 폴더의 구조를 확인할 수 있습니다. src 폴더 안에 있는 App.js 파일을 열어보면 리액트 컴포넌트 코드를 볼 수 있습니다. 이 코드를 수정하고 저장하면, 개발 서버가 자동으로 변경 사항을 감지하여 웹 브라우저에 바로 반영되는 것을 확인할 수 있을 것입니다. (이것을 Hot Module Replacement라고 부르며, 개발 편의성을 크게 높여줍니다.)
