React - SpringBoot 연동하기

frontend는 react로 구성하고

backend는 springboot로 구성한다.

 

이 둘을 연동해보자!

 

1) 아래 사이트에서 springboot 프로젝트 하나 만들어준다.(STS4 사용했는데, IntelliJ로 바꿈)

start.spring.io/

 

 

위의 설정을 따라 만든다.

 

 

zip 파일을 풀고 IntelliJ 프로젝트에서 built.gradle을 Import 해준다.

 

2) 그리고 src>main>java>tongtong.demo 폴더 밑에 TestController.java 파일을 만들어 준다.

 

 

package tongtong.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;

@RestController
public class TestController {
    @GetMapping("/api/hello")
    public String hello(){
        return "안녕하세요. 현재 서버시간은 "+new Date() +"입니다. \n";
    }
}

 

스프링부트의 백엔드 서버는 localhost:8080에서 실행되고 있고, React 프론트엔드 서버는 localhost:3000번으로 실행됩니다. 그러다보니까 CORS( cross-origin requests) 가 발생하게되는데, 그런 문제를 해결 하기위해서는 Proxy를 프론트쪽에서 잡아주어야합니다.

출처: https://sundries-in-myidea.tistory.com/71 [얇고 넓은 개발 블로그]

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

 

 

3) Package.json 파일을 아래와 같이 변경합니다
"proxy": "http://localhost:8080"을 추가해준다.

 

 

 

 

4) 추가 후 springboot와 react를 켜고 명령어를 통해서 값을 확인해보면

(저는 react를 3001 포트로 열었습니다.)

curl http://localhost:3000/api/hello

 

 

 

현재까지 react-spring 통신을 위해 아래 블로그를 참고하였습니다.

sundries-in-myidea.tistory.com/71

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