🔥 React + Vite 프로젝트 시작하기

🚀 React + Vite 프로젝트 생성 방법

안녕하세요! 이번 글에서는 빠르고 가볍게 React 개발 환경을 구성할 수 있는 Vite를 사용해 프로젝트를 시작하는 방법을 소개합니다.
Vite는 빠른 번들링 속도와 간편한 설정으로 최근 가장 주목받는 프론트엔드 도구입니다.
React를 처음 시작하거나, CRA(Create React App)의 느린 속도에 지쳤다면 이 글을 꼭 따라해보세요.

---

✅ 1단계: Node.js 설치

Vite를 사용하려면 먼저 Node.js가 필요합니다.

• 공식 사이트: https://nodejs.org
• LTS(Long Term Support) 버전 다운로드 권장

설치 후, 터미널에서 아래 명령어로 정상 설치 여부를 확인합니다.

node -v
npm -v

버전 정보가 잘 출력되면 다음 단계로 넘어가세요.

---

✅ 2단계: Vite + React 프로젝트 생성

Vite는 다양한 템플릿을 제공합니다. 우리는 React 템플릿을 선택해서 프로젝트를 생성할 것입니다.

npm create vite@latest my-app -- --template react

• my-app은 원하는 폴더 이름으로 변경 가능합니다.
• 실행 후, 몇 가지 선택지가 나오면 기본 옵션(React + JavaScript)으로 진행해도 충분합니다.

---

✅ 3단계: 의존성 설치 및 개발 서버 실행

프로젝트 디렉토리로 이동한 후 필요한 패키지를 설치하고, 개발 서버를 실행합니다.

cd my-app
npm install
npm run dev

아래와 같은 주소가 터미널에 표시됩니다:

  ➜  Local:   http://localhost:5173/

브라우저에서 접속하면 Vite + React 초기 화면이 보이게 됩니다.

---

✅ 4단계: VSCode에서 프로젝트 열기 (선택 사항)

Visual Studio Code를 사용한다면 아래 명령어로 바로 프로젝트를 열 수 있습니다.

code .

단, code 명령어가 동작하지 않는다면 VSCode에서 Command Palette (Cmd+Shift+P 또는 Ctrl+Shift+P)를 열고
Shell Command: Install 'code' command in PATH 를 실행해주세요.

---

🎯 마무리

이제 React + Vite 기반의 개발 환경이 성공적으로 준비되었습니다!

이 환경에서는 빠른 HMR(Hot Module Replacement), 간단한 설정 파일, 빠른 빌드 속도 등 다양한 장점을 누릴 수 있어요.
앞으로 컴포넌트를 만들고, 상태 관리를 추가하며 프론트엔드 개발을 본격적으로 시작해보세요.

---

📌 다음 글 예고

다음 포스팅에서는 Tailwind CSS를 Vite + React 프로젝트에 적용하는 방법을 알아볼 예정입니다.
궁금한 점이나 오류가 있다면 댓글로 남겨주세요. 감사합니다 😊