오늘의 개발 문제 : 리액트, html REST API 연결

REST API 서버를 만드는 시간을 가졌다 그런데 처음에 API가 잘 동작하는지 확인하려고 테스트용 HTML을 만들었는데 궁극적인 목표인 react로에 연동에 취지를 잊고 Html로 rest api에 연결해게 되었다.

src/main/resources/static/
├── index.html
├── home.html
├── login.html
├── diaryList.html
├── js/
│   ├── login.js
│   └── diaryList.js
└── css/
    └── style.css

"잠깐 테스트만 하려고..." 라고 시작했는데...

---

문제 발생

HTML 하나 만들고... JS 추가하고... CSS도 넣고...

어느 순간 Spring Boot 안에서 프론트엔드를 만들고 있었다.

근데 원래 계획은? React 프로젝트랑 연동하는 거였다.

 

 

실제 React 프로젝트: C:\workspcae\06_React\07_project
내가 잘못하고 있는 위치: src/main/resources/static/

---

깨달음

REST API 서버는 HTML을 제공하면 안 된다

❌ 잘못된 구조
Spring Boot → HTML + CSS + JS + API 전부 다

✅ 올바른 구조
Spring Boot → API만 (JSON 데이터)
React → 화면 담당 (별도 프로젝트)

---

연동하면서 만난 문제: CORS

React(localhost:5173)에서 Spring Boot(localhost:8080)로 요청하니까 에러 발생.

 

Access to fetch at 'http://localhost:8080/api/members' 
from origin 'http://localhost:5173' has been blocked by CORS policy

해결: Vite 프록시 + 백엔드 CORS 설정

 

javascript

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:8080'
    }
  }
})

 

 

java

// WebConfig.java
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:5173", "http://localhost:5174")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

---

결과

BeforeAfter

Spring Boot에서 HTML까지 작성	API만 제공
테스트하려고 static 폴더에 삽질	React에서 fetch로 호출
역할 구분 없이 뒤죽박죽	프론트/백 완전 분리

---

오늘 배운 것

1. REST API는 데이터만 - HTML 제공하면 안 됨
2. "잠깐 테스트"는 위험 - 어느새 본격 작업이 되어버림
3. CORS는 피할 수 없다 - 프록시 있어도 백엔드 설정 필요
4. 포트는 여러 개 허용 - 5173, 5174 등 미리 등록해두면 편함