React 17 개발 환경 설정 가이드 (Windows 11)

Windows 11 환경에서 요청하신 버전 기준으로 React 17 개발 환경 단계별 가이드

요구 버전:

• Node.js v14.17.0
• npm 6.14.13
• Yarn 1.22.22
• Java OpenJDK 11 (2018-09-25 / 11.0.x 계열)
• React 17.0.2

 

기존 Node / Java 제거 (권장)

이미 다른 버전이 설치되어 있다면 제거 후 진행 권장
(제어판 → 프로그램 제거)

 

 

방법 2 — Node 14 직접 MSI 설치 (가장 빠른 해결)

nvm이 계속 문제라면, 사실 React 17 프로젝트에서는 nvm 필수 아님

👉 바로 설치:

🔗 https://nodejs.org/dist/v14.17.0/

Windows x64 .msi

설치 후:

 

 

node -v
npm -v

 

정상 출력:

 

 

v14.17.0
6.14.13

 

그 다음:

 

 

npm install -g yarn@1.22.22

 

 

 

 

---

🔹 방법 2 – 공식 설치 파일

• https://nodejs.org/dist/v14.17.0/
• Windows x64 .msi 다운로드

설치 후:

node -v
npm -v

---

3️⃣ Yarn 1.22.22 설치

Node 설치 후:

npm install -g yarn@1.22.22

확인:

yarn -v
# 1.22.22

---

4️⃣ OpenJDK 11 설치

React 프로젝트에서 Spring Boot 등과 연동할 경우 필요.

🔹 방법 1 (권장) – Adoptium Temurin 11

1. 다운로드:
   https://adoptium.net/temurin/releases/?version=11
2. Windows x64 MSI 설치
3. 환경변수 확인

java -version

출력 예시:

openjdk version "11.0.x" 2018-09-25
OpenJDK Runtime Environment

---

🔹 환경변수 수동 설정 (필요 시)

1. JAVA_HOME 설정

• 시스템 → 고급 시스템 설정 → 환경 변수
• 새로 만들기

변수명: JAVA_HOME
값: C:\Program Files\Eclipse Adoptium\jdk-11.x.x

2. PATH 추가

%JAVA_HOME%\bin

확인:

echo %JAVA_HOME%
java -version

---

5️⃣ React 17 프로젝트 생성

🔹 Create React App 방식

npx create-react-app my-app --template cra-template --scripts-version 4.0.3

또는 명시적으로 React 17 설치:

npx create-react-app my-app
cd my-app

npm install react@17 react-dom@17

---

🔹 Yarn 사용 시

yarn create react-app my-app
cd my-app
yarn add react@17 react-dom@17

---

6️⃣ React 17 버전 확인

npm list react

또는 package.json 확인:

"react": "^17.0.2",
"react-dom": "^17.0.2"

---

7️⃣ 개발 서버 실행

npm start

또는

yarn start

브라우저 자동 실행:

http://localhost:3000

---

8️⃣ 권장 VSCode 설정

설치 추천 확장

• ES7+ React/Redux Snippets
• Prettier
• ESLint
• Auto Rename Tag

---

9️⃣ 버전 최종 점검 체크리스트

node -v      # v14.17.0
npm -v       # 6.14.13
yarn -v      # 1.22.22
java -version # openjdk 11

---

🔟 문제 발생 시 체크 포인트

1️⃣ npx 오류

npm cache clean --force

2️⃣ 포트 충돌

netstat -ano | findstr 3000

3️⃣ node-gyp 오류

npm install --global windows-build-tools

---

📌 실무 권장 구성 (Spring + React 연동 시)

frontend/  (React 17)
backend/   (Spring Boot Java 11)

React build:

npm run build

Spring static 리소스 경로:

src/main/resources/static

---

✅ 최종 구성 요약

구성요소버전

Node	14.17.0
npm	6.14.13
Yarn	1.22.22
Java	OpenJDK 11
React	17.0.2

---

원하시면:

• 🔥 React 17 + Webpack 수동 구성 가이드
• 🔥 React 17 + TypeScript 구성
• 🔥 React 17 + Spring Boot 연동 상세 가이드
• 🔥 사내 폐쇄망 설치 가이드

중 어떤 방향이 필요한지 말씀해 주세요.