개발환경 최신화 및 리액트 연동

백엔드 분야 취준생 친구를 스터디에 영입했다.

동시에 좀더 기술적으로 최신 경향에 가까운 개발 프로젝트를 만들기 위해 스프링 부트 + 인텔리제이 + 리액트를 도입하기로 했다.

이전 버전에서는 롬복도 마이바티스도 안 썼는데 이번에 도입해 봄으로써 해당 라이브러리/프레임워크를 도입했을 때 얼마나 개발 코드 작성이 편해지는지 경험해 볼 수 있을 것이라 생각한다.

 

개발 환경을 세팅하고, 리액트를 설치했다.

알아보기 쉽게 frontend 경로에 설치해 보았다.

C:\DevStudy\IntelliJ\SuiteCare_v2\src\main> npx create-react-app frontend

 

리액트 공부를 할 때 생성됐던 폴더가 그대로 생겼다. 이제 npm start 명령어를 통해 node.js 환경에서 App.js를 실행시키면 리액트 설치 기본 포트인 localhost:3000에서 리액트 앱이 실행되는 것을 볼 수 있다.

하지만 원하는 것은 지정한 url로 접속했을 때 원하는 페이지를 띄우는 것이다.
이때 React는 3000포트, Spring Boot는 8080 포트이기 때문에 CORS 문제가 발생한다.
다음 블로그들을 참고해 프록시 설정을 추가해 fetch 방식으로 페이지를 불러왔다.

[React+Spring Boot] React + Spring Boot 연동하기

Spring boot와 React 연동하기, 빌드하기

단, 이때 application.properties에 별도의 server.servlet.context-path를 설정한 상태면 3000번 포트에서 데이터를 받아올 수 없다.

 

다음과 같이 Axios 라이브러리를 사용하는 방식도 있다고 한다.

Spring Boot + React.js 개발환경 연동하기