🛠️ React 개발 환경 설정 가이드

🎯 준비물

• Node.js [Node.js 공식 홈페이지]
• Visual Studio Code [VSCode 공식 홈페이지]

---

🚀 개발환경 셋팅

1️⃣ 본인 OS에 맞는 Node.js 설치하기

🔗 Node.js 공식 홈페이지 에 접속하여 설치하세요.

✅ Windows, macOS

• 해당 홈페이지에서 다운로드 후 설치 진행

✅ Ubuntu, Linux
터미널에서 아래 명령어를 입력하여 설치합니다:

# NodeSource 저장소 추가
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
# Node.js 설치
sudo apt install -y nodejs
# Node.js 및 npm 버전 확인
node -v   
npm -v    

---

2️⃣ 프로젝트를 위한 폴더 만들기

• 폴더를 만들었나요? 📂

운영체제	폴더에서 터미널 여는 방법
🖥️ Windows	폴더 선택 → Shift + 마우스 우클릭 → 여기서 PowerShell 열기
🍏 macOS	폴더 선택 → 우클릭 → 서비스 → 폴더에서 새로운 터미널 열기
🐧 Ubuntu/Linux	터미널 열기 → cd /path/to/folder (예: cd ~/my_project)

---

3️⃣ 리액트 프로젝트 생성하기

터미널에서 아래 명령어 입력:

npm create vite@latest

이 명령어는 React 프로젝트를 생성하는 명령어입니다.

📌 처음 실행 시, y 입력 후 엔터를 누르세요.

📍 프로젝트 이름 설정

? Project name: › vite-project

📝 원하는 프로젝트명을 입력한 후 Enter

📍 프레임워크 선택

? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

👉 화살표 키를 이용해 React 선택 후 Enter

📍 타입스크립트(TypeScript) 또는 자바스크립트(JavaScript) 선택

? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

👉 원하는 언어를 선택 후 Enter (예: JavaScript 선택)

---

✅ 설치 마무리

Done. Now run:

  cd 프로젝트명  # 프로젝트 폴더로 이동
  npm install  # 의존성 패키지 설치
  npm run dev  # 개발 서버 실행

터미널에서 아래 명령어 입력 후 실행하세요.

cd 프로젝트명
npm install

✨ 이제 프로젝트가 성공적으로 생성되었습니다! 🎉