[React 개발환경1]먼저 Node.js를 설치해볼까!

🚀 React 개발을 위한 Node.js 설치 가이드 (2024 최신)

이번 글을 시작으로 React의 전반적인 개발에 필요한 내용을 작성하려고 합니다. 먼저 본 글에서는 React 개발을 위한 필수 환경인 Node.js 설치 방법을 설치하는 방법을 정리합니다. 

Node.js는 JavaScript 실행 환경이며, React 프로젝트 실행과 패키지 관리를 위한 npm을 제공합니다.

 

Windows 기반으로 설치부터 환경 변수 설정까지 하나씩 자세히 알려드릴 테니, 차근차근 따라와 주세요! 🙌

---

1. Node.js 다운로드 및 설치

React 프로젝트를 실행하려면 먼저 Node.js를 설치해야 합니다.
Node.js는 공식 웹사이트에서 다운로드할 수 있어요.

✅ Node.js 다운로드 (LTS 버전 추천)

📌 Node.js 공식 사이트에 접속하세요.
📌 LTS (Long-Term Support) 버전을 선택하여 다운로드하세요.

• ⚡ LTS 버전: 안정적인 환경 (추천!)
• 🚀 Current 버전: 최신 기능 포함 (테스트 용도)

사이트 접속 후 LTS 다운로드

✅ 설치 과정 (Windows 기준)

1️⃣ 다운로드한 설치 파일을 실행합니다.

2️⃣ Next 버튼을 눌러 진행하세요.

3️⃣ 라이선스 동의 → "I accept the terms in the License Agreement" 선택 후 Next

4️⃣ 설치 경로 선택 → 기본값 그대로 두고 Next

5️⃣ 설치 옵션 확인 → 기본 설정 유지 후 Next

 

6️⃣ Install 버튼 클릭 → 설치 진행

7️⃣ 완료되면 Finish 버튼을 눌러 종료

---

2. Node.js 및 npm 버전 확인

설치가 정상적으로 완료되었는지 확인하려면 터미널(명령 프롬프트, PowerShell)을 열고 아래 명령어를 입력하세요.

node -v

 

📌 명령 프롬프트 실행 결과: 설치 버전에 따라 다른 버전이 표시될 수 있습니다. 

 

같은 방식으로 npm(Node.js 패키지 관리자)도 버전을 확인할 수 있어요.

npm -v

 

📌 명령 프롬프트 실행 결과: 설치 버전에 따라 다른 버전이 표시될 수 있습니다. 

 

---

3. 환경 변수 설정 확인 (Windows 사용자만)

설치 과정을 순서대로 실행했다면 자동으로 환경 변수에 설정되어 있을 것이라고 생각되지만 혹시 터미널에서 node 또는 npm 명령어가 실행되지 않는다면 환경 변수 설정을 확인해야 해요. 

✅ 환경 변수 설정 확인 방법

1️⃣ Windows 검색창에 환경 변수 입력 후 "시스템 환경 변수 편집" 선택

2️⃣ 고급 > 환경 변수 버튼 클릭

3️⃣ 시스템 변수 목록에서 Path를 찾아 클릭 후 편집

4️⃣ C:\Program Files\nodejs\ 경로가 포함되어 있는지 확인

 

• 없다면 새로 만들기 버튼을 눌러 해당 경로를 추가 후 저장합니다. 

📌 변경된 내용이 있다면 저장 후 기존에 사용 중이던 터미널에서는 바로 적용되지 않으므로 터미널을 닫았다가 다시 열어야 적용됩니다.

---

5. 정리 & 마무리

🎯 React 개발을 위해 Node.js를 설치해야 합니다. 버전은 여러분이 선택하는 것에 따라 다르며 설치하는 과정은 동일합니다. 
🎯 공식 사이트에서 LTS 버전을 다운로드하여 설치하는 것이 권장됩니다.
🎯 node -v, npm -v 명령어를 통해 정상적으로 설치되었는지 확인하세요.
🎯 환경 변수 설정을 점검하여 터미널에서 node 및 npm이 정상 실행되는지 확인하세요.

이제 Node.js 개발 환경이 완벽하게 준비되었습니다! 🎉

 

다음 글에서는 VS Code 설정 및 React 프로젝트 생성 과정을 알아볼게요. 🚀