🕊️ Spring Boot&React에서 새로 고침 404 오류 해결

React로 단일 페이지 애플리케이션(SPA)을 개발하고 Spring Boot를 통해 배포하는 과정에서, 사용자들이 특정 페이지로 이동한 후 새로고침을 하면 404 오류가 발생하는 경우가 있습니다. 이는 React와 Spring Boot가 라우팅을 처리하는 방식의 차이에서 비롯된 문제로, 많은 개발자가 마주하는 흔한 이슈입니다.

문제 상황: 새로고침 시 404 오류 발생

React 애플리케이션에서 BrowserRouter를 사용하여 클라이언트 사이드 라우팅(Client-Side Routing)을 처리할 때, 새로고침 시 다음과 같은 404 오류가 발생할 수 있습니다.

GET https://example.com/purchased-product 404 (Not Found)

이 상황은 브라우저가 /purchased-product 경로에 대한 요청을 서버로 보냈지만, Spring Boot 서버가 해당 경로를 처리하는 방법을 알지 못해 404 Not Found를 반환했기 때문에 발생합니다.

React는 클라이언트에서 모든 라우팅을 처리하도록 설계되었으나, 브라우저는 새로고침하거나 직접 URL을 입력했을 때 서버에 요청을 보내는 기본 동작을 따릅니다. 따라서 Spring Boot 서버가 이러한 요청을 적절히 처리하지 않으면 위와 같은 문제가 발생합니다.

문제 원인: React와 Spring Boot 라우팅 처리 방식의 차이

[React의 클라이언트 사이드 라우팅]

React에서 BrowserRouter는 브라우저의 주소(URL)를 변경하지만 실제로 서버에 요청을 보내지 않습니다. 대신, 클라이언트 측에서 라우팅이 이루어지며, 경로에 매핑된 React 컴포넌트를 렌더링합니다.

• URL 변경은 브라우저 주소창에서만 이루어집니다.

• React 내부에서 지정된 컴포넌트가 로드됩니다.

[브라우저의 기본 동작]

반면, 브라우저에서 새로고침하거나 URL을 직접 입력하면 해당 경로에 대한 요청을 서버로 보냅니다.

• 서버는 경로에 대해 정의된 처리가 없는 경우, 404 Not Found를 반환합니다.

• 이는 서버가 클라이언트 사이드 라우팅 경로에 대해 무지한 상태이기 때문입니다.

React와 브라우저의 동작 차이를 이해했으니, 이제 이를 해결하기 위한 Spring Boot 설정 방법을 살펴보겠습니다.

해결 방법: Spring Boot에서 React 경로 처리하기

Spring Boot 서버가 React 애플리케이션의 모든 경로를 처리하도록 설정하면, 브라우저가 서버로 보내는 모든 요청에 대해 React의 index.html 파일을 반환할 수 있습니다. 이렇게 하면 브라우저는 React 애플리케이션을 다시 로드하고, 클라이언트 측에서 올바른 경로를 렌더링할 수 있습니다.

[구현 방법]

Spring Boot에서 React 라우팅을 처리하기 위한 WebController를 다음과 같이 작성할 수 있습니다.

import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController implements ErrorController {

    @GetMapping({
        "/purchased-product"
    })
    public String index() {
        // Spring Boot가 React의 index.html 파일을 반환하도록 설정
        // index.html은 /resources/static 또는 /resources/public에 위치
        return "index.html";
    }
}

 위 코드는 React 애플리케이션의 경로를 명시적으로 나열하고, 해당 경로에 대한 요청이 들어오면 index.html을 반환하도록 설정합니다. 이렇게 하면 React의 라우터가 클라이언트 측에서 경로를 처리할 수 있는 환경을 제공하게 됩니다.

결론

Spring Boot와 React를 통합할 때, 클라이언트 사이드 라우팅으로 인해 발생하는 새로고침 404 오류는 React와 브라우저의 기본 동작 차이에서 발생합니다. 서버에서 React의 모든 경로를 처리하도록 설정함으로써 문제를 쉽게 해결할 수 있습니다.