🛠 Windows/Mac 별 JetBrains IDE 활용 React 초기 세팅 방법

React 개발을 시작하려면 Node.js, 패키지 매니저(npm/yarn), 그리고 JetBrains IDE를 활용한 환경 설정이 필요해.
Windows와 Mac에서 React 프로젝트를 세팅하는 과정을 자세히 알아보자.

---

✅ 1. 필수 프로그램 설치

🔹 1-1. Node.js 설치

React는 JavaScript 기반이므로 Node.js가 필요해.

• 공식 사이트에서 최신 LTS (Long-Term Support) 버전을 다운로드해 설치해.
• 설치가 완료되면 터미널(mac) 또는 명령 프롬프트(cmd)에서 버전 확인:

  node -v
  npm -v
  

  정상적으로 설치됐다면 Node.js와 npm 버전이 출력될 거야.

🔹 1-2. JetBrains IDE (WebStorm / IntelliJ IDEA) 설치

• JetBrains 공식 사이트에서 WebStorm 또는 IntelliJ IDEA를 다운로드해.
• IntelliJ IDEA를 사용하려면 "All Plugins"에서 "React" 플러그인을 활성화해야 해.
• 학생이라면 무료 라이선스도 제공되니 확인해봐!

---

✅ 2. React 프로젝트 생성

JetBrains IDE에서는 터미널을 사용해 프로젝트를 생성하는 방법과, 내장 GUI 기능을 활용하는 방법이 있어.
우선 터미널을 사용하는 방법을 먼저 볼게.

🔹 2-1. Vite로 React 프로젝트 생성 (빠르고 가벼움 🚀)

1. JetBrains IDE를 실행하고, 터미널을 열어 아래 명령어 입력:

   npm create vite@latest my-app
   cd my-app
   

2. 의존성 설치

   npm install
   

3. 개발 서버 실행

   npm run dev
   

4. 브라우저에서 http://localhost:5173 접속

🔹 2-2. JetBrains IDE의 GUI로 프로젝트 생성

1. WebStorm 또는 IntelliJ IDEA 실행
2. File → New Project → React 선택
3. Node.js 버전 확인 (최신 버전인지 확인해!)
4. "Use npm" 또는 "Use Yarn" 선택
5. 프로젝트 생성 후 package.json이 있는지 확인하고, npm install 실행

---

✅ 3. JetBrains IDE 설정 최적화

🔹 3-1. 필수 확장 플러그인 설치

WebStorm / IntelliJ IDEA 플러그인 설정에서 다음 플러그인을 설치해.

• React Plugin 👉 JSX 문법 하이라이트, 자동 완성
• Prettier 👉 코드 자동 정렬
• ESLint 👉 코드 스타일 체크
• Material Theme UI 👉 예쁜 테마 적용

🔹 3-2. Prettier 설정

1. Preferences → Languages & Frameworks → JavaScript → Prettier
2. "On save" 활성화 → 자동 코드 정렬

🔹 3-3. JetBrains IDE에서 터미널 단축키

• Windows: Ctrl + Alt + T
• Mac: Cmd + Alt + T

---

✅ 4. 필수 라이브러리 설치

React 개발에 자주 쓰이는 라이브러리를 설치해두면 좋아.

npm install react-router-dom axios styled-components

• react-router-dom 👉 페이지 이동 (라우팅)
• axios 👉 API 호출
• styled-components 👉 CSS-in-JS 스타일링

---

✅ 5. Git 초기화 & GitHub 연결

코드를 안전하게 관리하려면 Git을 사용해야 해.

🔹 5-1. Git 설치

• Git 공식 사이트에서 다운로드 후 설치
• 터미널에서 확인:

  git --version
  

🔹 5-2. Git 초기화 & GitHub 연결

JetBrains IDE에서 터미널을 열고 아래 명령어 실행:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <GitHub 레포지토리 URL>
git push -u origin main

GitHub에 새로운 레포지토리를 만들고 위 명령어를 실행하면 코드가 올라가!

---

✅ 6. 개발 서버 실행 & 첫 React 실행

이제 모든 준비가 끝났어! 🚀
이제 React 프로젝트를 실행해보자.

1. JetBrains IDE에서 터미널을 열고

   npm run dev
   

2. 브라우저에서 http://localhost:5173로 접속
3. 기본 React 페이지가 뜨면 성공! 🎉

---

🎯 마무리

이제 JetBrains IDE에서 React 개발을 시작할 수 있어!
👉 Vite를 사용해 빠르게 프로젝트를 세팅하고,
👉 JetBrains 플러그인 & Prettier로 코드 스타일을 깔끔하게 유지,
👉 Git으로 프로젝트를 안전하게 관리할 수 있어.

이제 컴포넌트를 만들고 API를 연동하면서 React 프로젝트를 완성해보자!