[프로젝트]React + Spring Legacy 연동하는 방법

개요

국비지원 마지막 개인프로젝트를 풀스택으로 개발해보기로 결정함.

프론트는 리액트를 이용하고, 서버는 스프링 레거시를 이용할 예정이었다. 내가 궁금했던 부분은 리액트와 스프링 레거시를 어떻게 연동하는지에 대한 방법을 찾아보는 것이었다.

확인해보니 크게 두 가지 방법이 있었다. 차근차근 알아보도록하자.

---

연동하기

⚡️ proxy 설정

기본적으로 리액트 프로젝트와 스프링 레거시 프로젝트의 포트번호가 다르기 때문에 하나의 포트번호로 연동을 시키거나 어느 한쪽으로 포트번호를 전환시켜주어야한다. 이런 경우 사용하는 것이 proxy이다.

리액트 프로젝트에서는 'http-proxy-middleware' 모듈을 사용하여 스프링 레거시 프로젝트와 통신할 수 있다.

🖥️ http-proxy-middleware 설치

설치하는 위치는 연동하고자하는 리액트 프로젝트 루트디렉토리이다.

npm install http-proxy-middleware

설치가 완료되면 setupProxy.js 파일을 생성하고 설정을 해준다.

🖥️ setupProxy.js 설정

const proxy = require('http-proxy-middleware');

module.exports = function(app){
	app.use(
    	'/api',
      proxy({
      	target: 'http://localhost:해당포트번호', //스프링 레거시의 경우 8080
        changeOrigin: true,
      })
    );
}

이렇게 설정을 해주면 리액트 프로젝트에서 '/api'로 시작하는 요청이 들어올 경우 해당 요청은 스프링 레거시 프로젝트로 proxy되어 전달된다.

⚡️ CORS 설정

다음은 CORS를 이용한 설정에 대하여 알아보자. CORS는 Cross-Origin Resource Sharing의 줄임말로 웹 애플리케이션에서 다른 출처(Origin)의 리소스에 접근할 수 있도록 해주는 방식을 이야기한다. 여기서 출처는 URL 스키마, 호스트 이름, 포트 번호를 모두 합친 것으로, 같은 출처에서만 리소스를 공유할 수 있는 특징을 가지고 있다.

웹 브라우저는 보안상의 이유로 스크립트에서 다른 출처의 리소스를 직접적으로 접근할 수 없도록 제한하고 있다. 하지만 CORS를 이용하면 서버에서 클라이언트로 보내는 응답 헤더를 설정하여 다른 출처의 리소스에 접근할 수 있게끔 허용하는 것이다.

설정 방법을 알아보자.

🖥️ web.xml 설정

<filter>
  <filter-name>corsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name> <!--출처를 허용-->
    <param-value>http://localhost:3000</param-value> <!--react의 주소를 입력-->
  </init-param>
    <init-param>
    <param-name>cors.allowed.methods</param-name> <!--http 메소드를 허용-->
    <param-value>GET, POST, PUT, DELETE, HEAD, OPTIONS<</param-value> <!--http메소드명 입력-->
  </init-param>
</filter>
<filter-mapping>
  <filter-name>corsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

위 설정에서 'corsFilter'라는 이름으로 CORS 필터를 등록하고, 허용되는 origin(출처)은 리액트의 주소이다. 'cors.allowed.methods'는 허용되는 HTTP 메소드를 설정하는 것이다.

이제 리액트 프로젝트에서 별도 설정을 하지 않아도 CORS에 설정에 의해 스프링 레거시 프로젝트와 통신이 가능하다.

다만, 주의해야할 점은 CORS로 인해 모든 요청에 대해서 CORS를 허용하기 때문에 보안에 취약할 수 있다는 것이다.

⚡️ proxy와 CORS의 보안 취약정도

두가지 방법 모두 보안에 대한 고려가 필요하다.

하지만 보통 proxy 설정을 이용한 방법이 보안 측면에서 더 안전하다고 생각된다. proxy는 서버를 통해 클라이언트와 서버 간의 통신을 중계하며, 이를 통해 클라이언트와 서버 간의 직접적인 통신을 차단할 수 있기 때문이다. 따라서 서버에서 요청을 받을 때, 실제 요청을 보내는 클라이언트의 IP 주소를 알 수 없게된다.

반면에 CORS 설정을 이용한 방법은 서버에서 모든 origin의 요청을 허용해야 하므로, 서버에서 노출되는 정보가 많아지는 것에 대한 문제가 있을 수 있다.

이러한 문제들을 대처하는 방법은 다양하기 때문에 해당 내용을 잘 찾아보고 적용한 뒤 사용하는 것이 보안상 안전한 방법일 것이다.

그럼 이만.👊🏽