이제 Node.js와 VS Code가 모두 준비되었으니, 드디어 첫 번째 리액트 프로젝트를 생성해 볼 차례입니다.
현재 실무/커뮤니티에서 가장 널리 쓰이는 시작 방식 중 하나인 Vite를 사용하겠습니다.
Vite는 빠른 개발 서버와 간결한 설정을 제공해, 입문 단계에서도 복잡한 번들 설정 없이 바로 개발을 시작할 수 있도록 돕습니다.
과거에는 다른 스타터 도구를 많이 사용했지만, 현재는 초기 속도와 설정 단순성 측면에서 Vite가 학습과 실무 모두에서 유리한 선택이 되는 경우가 많습니다.
특히 빠르게 띄우고 빠르게 수정 반영하기가 중요한 입문 단계에서는, 빌드 체인 이해보다 화면-코드 피드백 루프를 짧게 가져가는 것이 학습 효율을 크게 높입니다.
다만 도구가 단순해도 Node 버전과 패키지 설치 상태가 어긋나면 실행이 실패하므로, 각 단계의 확인 명령을 반드시 함께 점검하는 습관이 중요합니다.
React 공식 문서는 새 프로덕션 앱에는 라우팅·데이터 로딩 같은 기능을 통합한 프레임워크부터 검토하라고 안내합니다. 이 절의 Vite 템플릿은 React의 기본 원리와 클라이언트 앱 구조를 직접 학습하기 위한 출발점이며, 완성된 프로덕션 아키텍처를 대신하지는 않습니다.
프로젝트 생성 과정
프로젝트를 생성할 폴더로 이동: 터미널(또는 명령 프롬프트)을 열고, 프로젝트를 생성하고 싶은 디렉토리로 이동합니다.
예를 들어, 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 .
(.은 현재 디렉토리를 의미합니다. macOS에서는 먼저 명령 팔레트에서 Shell Command: Install 'code' command in PATH를 실행해야 하며, Windows/Linux에서도 code를 찾지 못하면 VS Code 설치의 PATH 설정을 확인합니다.)
VS Code의 탐색기(Explorer)에서 my-first-react-app 폴더의 구조를 확인할 수 있습니다.
src 폴더 안에 있는 App.jsx 파일을 열어보면 리액트 컴포넌트 코드를 볼 수 있습니다.
이 코드를 수정하고 저장하면 Vite가 변경된 모듈을 감지합니다. create-vite의 React 템플릿에는 React Fast Refresh가 미리 구성되어 있어 지원되는 변경은 전체 페이지를 다시 불러오지 않고 빠르게 반영되며, 변경 종류에 따라 전체 새로고침이 일어날 수도 있습니다.
개발 환경을 갖출 때는 설치가 끝났다는 사실보다 저장한 코드가 개발 서버와 브라우저에 바로 반영되는 루프를 확인하는 것이 중요합니다.
이 루프가 잡히면 다음 절에서 src/App.jsx를 수정하며 첫 화면을 직접 바꿔볼 수 있습니다.
