[Spring] Spring boot과 React 연동 개발환경 세팅(다시)

1. srping boot 기본설정하기

spring initalizar로 프로젝트 생성해두기 (dependency는 web만 추가)

 

2. REST API 테스트해보기

RestController가 핵심

/api/test에서 확인

3.React 설치

설치명령어 npx create-react-app frontend

설치완료 : 보면 frontend 폴더가 하나 생겼다

4.React 실행

/frontend 경로에가서 npm start 명령어를 입력하면 바로 실행이 되며 리액트 초기화면이 나오면 성공!

npm start

react 실행성공

 

5.CORS문제해결하기 

스프링부트의 백엔드는 8080에서 실행되고, React의 프론트엔드는 3000에서 실행하고 있다.

이때 CORS(cross-orgin requests)가 발생해서 프론트단에서 proxy를 잡아줘야한다

즉, 8080으로 보내도록 말이다. 

리액트의 package.json파일에 "proxy" : "http://localhost:8080"추가한다

6.리액트 js작성

참고한 블로그를 바탕으로 튜토리얼처럼 작성한 것이다. 

7. 스프링실행, 리액트 실행

둘다 run시켜준다

 

 

띠용가리, 이상하게  리액트 index.html파일을 반환하게 된다. 

나원참 어이가 없네 이 10분짜리 간단한 환경세팅이 왜이렇게 안되는거?

 

출처

Spring Boot와 React를 연동하여 개발환경을 만들어보자

soojong.tistory.com/entry/Spring-Boot-React-%ED%99%98%EA%B2%BD%EC%85%8B%ED%8C%85

Spring Boot + React 환경셋팅