Spring boot + React (1)

boot-react라는 리액트 프로젝트를 만들어준다.

리액트 프로젝트 경로에 들어가서 비동기 통신에 필요한 axios와 CORS 오류를 해결하기 위한 http-proxy-middleware를 npm으로 설치한다.

 http-proxy-middleware 설정을 위해 리액트 프로젝트의 src 폴더에 setupProxy.js 파일을 생성했다.

설정을 통해 /api 주소로 시작하는 요청은 localhost:8087로 호출한다.

예를 들어 axios로 "/api/test"로 요청을 보내면 localhost:8087/api/test로 요청이 간다. changeOrigin 설정은 CORS 문제를 해결해준다.

간단한 테스트를 위해 리액트 프로젝트 생성 시, 최상단에 기본적으로 노출되는 App 컴포넌트를 다음과 같이 수정했다.

컴포넌트가 잘 나타나는지 실행해보자.

잘 나온다. 이제 Spring boot 프로젝트를 생성해보자.

Spring Starter Project로 프로젝트를 만든다.

편한대로 설정하자.

향후에 myBatis를 통해 db에 연결하기 위한 의존성, 편리한 의존성들을 추가했다.

 

json 형태로 편하게 ajax를 사용하기 위해 GSON 의존성을 추가했다.

먼저 setupProxy.js에서 설정했던 서버의 포트를 잡아준다. 

datebase는 지금 사용하지는 않을 거지만, 넣지 않으면 앞서 추가했던 의존성 때문에 프로젝트가 실행되지 않으니 넣어준다.

설정이 끝난 후 Gradle 프로젝트틀 Refresh 해준다.

테스트를 위한 컨트롤러를 만들어준다.

요청은 setupProxy.js에서 설정한대로 모두 /api를 붙여서 보내기 때문에 RequestMapping 어노테이션에 "/api/"를 넣어줬다.

이후 단순히 스트링값을 받아서 리턴해주는 메서드를 만든다. ajax로 요청을 받을 땐 어노테이션 RequestBody를 사용해야 한다.

 

작성 후, 스프링 부트 프로젝트를 실행하고 아까 만든 리액트 컴포넌트에서 요청을 보내본다. 

요청을 콘솔에 찍어보기로 했으므로 요청을 보낸 후 콘솔을 열어서 확인해보자.

설정한대로 value에 setValue한 값이 들어가서 리턴된 걸 확인할 수 있다. 

이제 서버에서 온 값을 리액트 컴포넌트에 넣어보자.

리턴 객체의 data 프로퍼티 안에 value라는 키값으로 값이 담겨있으니, 결과를 보여줄 rvalue의 state를 다음과 같이 바꿔준다.

 

잘 작동한다.