Backend와 Frontend 연결 방법

 

 

 

목차

 

 

 

1. Backend와 Frontend 프로젝트를 따로 분리하는 이유

• 역할 분리가 명확하여 협업이 쉬움.
• 각각 독립적으로 배포, 관리 가능.
• 대형 서비스 및 기업은 대부분 이런 구조로 개발함.

 

Frontend가 API( /api/users ) 를 통해 Backend에게 데이터를 요청하는 방식.

 

 

2. Backend와 Frontend를 연결하는 방법.

1. 각각 서버 실행

1. React : npm start → localhost:3000 에서 실행됨.
2. Spring Boot : ./gradlew bootRun → 보통 localhost:8080에서 실행됨.

 

2. CORS 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 경로에 대해 CORS 허용
                .allowedOrigins("http://localhost:3000") // 프론트엔드 애플리케이션의 URL 명시
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메소드
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true) // 자격 증명(쿠키, HTTP 인증 등) 허용
                .maxAge(3600); // Pre-flight 요청 결과를 캐시할 시간 (초 단위)
    }
}

• 서로 다른 포트를 사용하고 있기 때문에 브라우저가 보안을 위해 차단함.
• Spring Boot 쪽에서 CORS 허용 필요.

 

3. Frontend에서 API 호출 및 API 주소 관리.

import axios from 'axios';

// API 베이스 URL 설정
const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080';

// axios 인스턴스 생성
const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});