이제 우리는 리액트의 개념과 장점에 대해 충분히 이해했습니다. 이론적인 지식만큼 중요한 것은 직접 코드를 작성하고 실행해보는 경험입니다. 이 장에서는 여러분의 컴퓨터에 리액트 개발을 위한 환경을 구축하고, 첫 번째 리액트 프로젝트를 생성하여 실행하는 과정을 차근차근 따라 해 볼 것입니다. 전혀 어렵지 않으니, 천천히 함께 진행해 볼까요?
리액트 프로젝트를 개발하기 위해서는 몇 가지 필수적인 도구가 필요합니다. 크게 다음 세 가지를 준비할 것입니다.
리액트는 웹 브라우저에서 실행되는 자바스크립트 라이브러리이지만, 리액트 개발 과정에서는 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: 파일 및 폴더 아이콘을 시각적으로 구분하기 쉽게 만들어줍니다.
확장 프로그램 검색창에 이름을 입력하고 "Install(설치)" 버튼을 클릭하여 설치합니다.
이제 Node.js와 VS Code가 모두 준비되었으니, 드디어 첫 번째 리액트 프로젝트를 생성해 볼 차례입니다. 우리는 리액트 개발팀에서 공식적으로 제공하는 create-react-app이라는 도구를 사용할 것입니다. 이 도구는 리액트 개발에 필요한 모든 설정(웹팩, 바벨 등)을 미리 구성해 주기 때문에, 복잡한 설정 없이 바로 개발을 시작할 수 있도록 돕습니다.
프로젝트 생성 과정
프로젝트를 생성할 폴더로 이동: 터미널(또는 명령 프롬프트)을 열고, 프로젝트를 생성하고 싶은 디렉토리로 이동합니다. 예를 들어, C:\Users\YourName\Documents 또는 ~/Documents와 같은 폴더에 프로젝트를 만들고 싶다면 다음과 같이 명령어를 입력합니다.
# Windows 예시cd C:\Users\YourName\Documents# macOS/Linux 예시cd ~/Documents
만약 아직 해당 폴더가 없다면 mkdir my-react-projects 와 같이 폴더를 생성하고 이동할 수 있습니다.
create-react-app으로 프로젝트 생성: 다음 명령어를 입력하여 my-first-react-app이라는 이름의 새로운 리액트 프로젝트를 생성합니다. (프로젝트 이름은 자유롭게 지정할 수 있습니다.)
npx create-react-app my-first-react-app
npx는 npm 5.2 이상 버전부터 제공되는 도구로, 로컬에 설치하지 않은 패키지를 한 번 실행할 때 유용합니다. create-react-app을 글로벌로 설치하지 않고 바로 사용할 수 있게 해줍니다.
이 명령어는 리액트 프로젝트를 만드는 데 필요한 파일들을 다운로드하고 설정하는 데 몇 분 정도 시간이 소요될 수 있습니다. 인내심을 가지고 기다려 주세요.
프로젝트 폴더로 이동: 프로젝트 생성이 완료되면, 새로 생성된 프로젝트 폴더(my-first-react-app)로 이동합니다.
cd my-first-react-app
리액트 애플리케이션 실행: 이제 다음 명령어를 입력하여 개발 서버를 시작하고 리액트 애플리케이션을 실행합니다.
npm start
이 명령어를 실행하면 웹 브라우저가 자동으로 열리면서 http://localhost:3000 주소로 리액트 기본 페이지가 나타날 것입니다. 만약 자동으로 열리지 않는다면, 직접 웹 브라우저를 열고 해당 주소로 접속해 보세요.
화면에 리액트 로고가 회전하고 "Edit src/App.js and save to reload."라는 텍스트가 보인다면, 성공적으로 첫 리액트 프로젝트를 실행한 것입니다! 축하드립니다!
VS Code 메뉴에서 File (파일) > Open Folder (폴더 열기...)를 선택합니다.
또는 터미널에서 npm start를 실행했던 my-first-react-app 폴더로 이동한 상태에서 다음과 같이 명령어를 입력하면 VS Code가 해당 폴더를 열면서 실행됩니다. (이 방법이 더 편리합니다.)
code .
(.은 현재 디렉토리를 의미합니다.)
VS Code의 탐색기(Explorer)에서 my-first-react-app 폴더의 구조를 확인할 수 있습니다. src 폴더 안에 있는 App.js 파일을 열어보면 리액트 컴포넌트 코드를 볼 수 있습니다. 이 코드를 수정하고 저장하면, 개발 서버가 자동으로 변경 사항을 감지하여 웹 브라우저에 바로 반영되는 것을 확인할 수 있을 것입니다. (이것을 Hot Module Replacement라고 부르며, 개발 편의성을 크게 높여줍니다.)
