1월 19일-리액트와 스프링 부트 연결

리액트와 스프링 부트 연결하기

리액트로 구성된 친구와 스프링으로 구성된 친구를 연결해 보려한다.각각의 단계들과 예재들을 이용해서 알아보자.

1. 백엔드 API 확인

먼저, 스프링 부트 서버가 제공하는 API의 엔드포인트와 요청/응답 형식을 확인한다. 이는 리액트 앱에서 정확한 요청을 보내고, 응답을 올바르게 처리하는 데 필수적이다.

// 예시: 스프링 부트 컨트롤러의 API 엔드포인트
@RestController
@RequestMapping("/api")
public class ExampleController {

    @GetMapping("/data")
    public ResponseEntity<ExampleData> getData() {
        // 데이터 처리 로직
        return ResponseEntity.ok(new ExampleData(...));
    }
}

2. 리액트에서 API 호출 준비

리액트 프로젝트에서는 axios나 fetch API를 이용해 HTTP 요청을 보낸다. 이 예시에서는 axios를 사용한다.

3. 리액트에서 API 호출

리액트 컴포넌트에서 스프링 부트 서버의 API를 호출한다. 이 때, API 엔드포인트 URL, HTTP 메소드, 필요한 경우 요청 본문(body)을 정확히 지정해야 한다.

import axios from 'axios';

class ExampleComponent extends React.Component {
    componentDidMount() {
        this.fetchData();
    }

    fetchData = () => {
        axios.get('http://localhost:8080/api/data')
            .then(response => {
                console.log('Data:', response.data);
                // 응답 데이터 처리
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    };

    render() {
        // 렌더링 로직
    }
}

4. CORS 이슈 해결

@CrossOrigin(origins = "http://localhost:3000") // 리액트 서버의 URL
@RestController
@RequestMapping("/api")
public class ExampleController {
    // 컨트롤러 메소드
}

5. 상태 관리 및 컴포넌트 업데이트

리액트에서는 서버로부터 받은 데이터를 상태(state)로 관리하고, 이를 통해 UI를 업데이트한다. useState와 useEffect 훅을 사용하여 비동기적으로 데이터를 로드하고 UI를 갱신할 수 있다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ExampleComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('http://localhost:8080/api/data')
            .then(response => {
                setData(response.data);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    }, []);

    return (
        <div>
            {data ? <div>{data.someField}</div> : <p>Loading...</p>}
        </div>
    );
}

6. 에러 처리 및 로딩 상태 관리

API 호출 과정에서 발생할 수 있는 에러를 처리하고, 데이터 로딩 중 상태를 사용자에게 표시하는 것이 중요하다. 에러 발생 시 적절한 메시지를 표시하고, 로딩 중 상태는 UI에 로딩 인디케이터나 메시지를 통해 표시한다.

완료

여기까지가 이루어지면 연결이 가능해진다! 그런데 CROS는 뭘까?

CORS

CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘이다. 기본적으로 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 따르기 때문에, 리액트 앱(예: localhost:3000에서 실행 중)이 스프링 부트 서버(예: localhost:8080에서 실행 중)의 리소스에 접근하려 할 때 CORS 정책 위반 문제가 발생할 수 있다!

CORS 설정 과정

1. 스프링 부트에서의 CORS 설정

스프링 부트에서 CORS를 설정하는 방법에는 여러 가지가 있다. 간단한 방법으로는 컨트롤러 또는 메소드 수준에서 @CrossOrigin 어노테이션을 사용하는 것이다.

a. @CrossOrigin 어노테이션 사용

@CrossOrigin 어노테이션은 특정 컨트롤러 또는 핸들러 메소드에 대해 CORS 정책을 설정할 수 있다.

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class MyController {
    @GetMapping("/example")
    public String example() {
        return "CORS enabled response";
    }
}

여기서 origins 속성은 리액트 앱이 실행 중인 주소를 지정한다. 모든 출처를 허용하려면 origins = "*"를 사용할 수 있지만, 보안상의 이유로 이는 권장되지 않는다.

b. 전역 CORS 설정

전체 애플리케이션에 걸쳐 CORS를 설정하려면 WebMvcConfigurer 인터페이스를 구현하는 클래스를 만들고, addCorsMappings 메소드를 오버라이드한다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .allowCredentials(true);
    }
}

이 설정은 /api/** 경로로 시작하는 모든 요청에 대해 CORS를 활성화한다.

2. 리액트에서 CORS 관련 이슈 처리

리액트 애플리케이션에서는 일반적으로 CORS 설정을 할 필요가 없다. CORS는 서버 측에서 구현되며, 클라이언트 측에서의 변경 사항은 필요하지 않다. 그러나 API 요청을 보낼 때 출처 정보가 포함되도록 해야 한다.

CORS 설정 시 고려사항

• 보안: 모든 출처를 허용(*)하는 것은 보안 위험을 초래할 수 있다. 가능한 한 구체적으로 출처를 지정해야 한다.
• 메소드 제한: allowedMethods를 사용하여 허용되는 HTTP 메소드를 지정할 수 있다. 이를 통해 보안을 강화할 수 있다.
• 헤더 및 인증 정보: allowedHeaders와 allowCredentials를 통해 허용되는 헤더와 쿠키/인증 정보의 사용 여부를 제어할 수 있다.

CORS 설정은 웹 애플리케이션의 보안과 직접적인 관련이 있기 때문에, 상황에 맞게 적절히 구성하는 것이 중요하다.