📚 최종 스프링 프로젝트: React와 연동하기

React와 Spring 프로젝트를 연결하는 과정을 단계별로 정리해 보았다👩🏻‍💻

---

1️⃣ Spring 컨트롤러 파일 생성

✅ 컨트롤러 파일 생성

• Spring 프로젝트에 React 뷰(화면)와 연결할 컨트롤러 파일을 만들어줍니다.
• 📂 src/main/java/com/example/controller에 컨트롤러 파일을 생성하세요.

✅ 파일 생성 후 컨드롤러 생성

💡 여기서 "dashboard"는 직관적인 이름으로 만들어줍니다

---

2️⃣ React 프로젝트 설정 변경

• React 프로젝트에서 package.json 파일을 수정합니다.

✅ 수정 내용

• package.json 에서 proxy 제거 후 "homepage": "dashboard", 추가

💡 "dashboard"는 Spring 컨트롤러에서 설정한 뷰 이름과 동일해야 합니다.

---

3️⃣ React 실행 확인

✅ yarn start 실행

• React 프로젝트를 실행해 화면을 확인합니다

🔎 참고:

• Spring이 가동되기 전이라 데이터(그래프 등)는 표시되지 않습니다
• 프록시를 제거했기 때문에 API 호출 데이터가 보이지 않을 수 있습니다

---

4️⃣ React 빌드 및 경로 확인

✅ yarn build 실행

• React 프로젝트를 빌드합니다
• 빌드 후 생성된 build 폴더 확인
• 경로파일 확인

---

5️⃣ index.html 이름 변경

• 리엑트 빌드 폴더안에 빌드된 index.html 파일 이름을 Spring 컨트롤러에서 설정한 이름과 동일하게 수정합니다.(컨트롤러에서 맞춘 뷰 이름)

🔎 참고:

• 변경 전: index.html
• 변경 후: dashboard.html

---

6️⃣ Spring 프로젝트에 React 파일 추가

• React 빌드 결과물을 Spring 프로젝트에 추가합니다.

✅ 파일 복사 경로

1. dashboard.html

📂 src/main/resources/templates안에 리엑트 빌드 폴더에 있는  dashboard.html 를 추가

2. 나머지 빌드 파일

📂 src/main/resources/static/안에 dashboard 폴더 생성 후
 리엑트 빌드 폴더에 안에 있는 html 빼고 전부 복사 후 dashboard폴더안에 추가

---

7️⃣ Spring 프로젝트 실행

✅ Spring 가동

🎉 Spring 프로젝트를 실행하면 React 화면이 출력 되는걸 확인 할수 있다!!

---