스프링부트 미니 프로젝트 만들기 - 리액트 연동 초기 세팅

개발환경

포스팅 하기 앞서 내가 만들 미니 프로젝트의 개발환경은 이러하다.

 

BACKEND
framework |  springboot 
build tool |  gradle
ide |  STS

FRONTEND
library |  react.js 
ide |  VScode

 

스프링부트에 리액트를 연동해보고 테스트 데이터도 받아 와보자.

 

 

 

---

 

 

1. 스프링부트 프로젝트 내 React 프로젝트 생성 

 

(1) 터미널 오픈

 

(2) 리액트 프로젝트 폴더 생성: 터미널에 아래 명령어 입력. 프로젝트명은 영어 소문자로 해야 할거다.

npx create-react-app 프로젝트명

 

 

 

 

이렇게 나오면 성공.

 

 

 

 

2. 리액트 경로 확인 

나는 이클립스 터미널이 영 텍스트도 짤리고 엑박도 많아서 그냥 탐색기 들어가서 확인을 해보았다.

탐색기에 스프링부트 프로젝트가 있는 경로에 가서 아까 만든 리액트 폴더가 있는지 확인해보자.

확인 완료.

 

 

 

 

3. 프론트에서 Proxy를 잡아서 CORS(cross-origin requests) 문제 해결하기 

 

(1) vscode에서 리액트 프로젝트를 연다

 

(2) package.json 을 열고 아래 코드를 추가한다

"proxy": "http://localhost:8080/",

 

 

 

 

4. 로컬 서버 띄우기 

리액트와 스프링부트 각각에서 서버를 띄워줘야 한다. 

이때 리액트 서버를 구동하기 위해 npm start 말고 yarn을 이용하자.

 

(1) vscode에서 yarn부터 설치하자.

 npm install -g yarn

그냥 터미널에 그리고 yarn start로 서버를 실행한다.

yarn start를 했을 때 에러가 난다면 이 방법을 추가해보자.

https://jjaecoding.tistory.com/21

리액트 yarn start시 proxy 에러 해결 방법

 

(2)STS에서 boot dashboard를 눌러 서버를 실행한다.  참고로 이는 (1)번과 동시에 진행하는 것이다.

서버를 둘 다 켜야 한다.

 

(3) localhost:3000/web, localhost:8080/web 둘 다 이런 화면이 뜨면 성공.

 

참고로 이때 나오는 spring boot 부분의 코드는 아래 링크에서 확인할 수 있다.

https://jjaecoding.tistory.com/15

스프링부트 초보의 미니 프로젝트 만들기 - Maven, Gradle 두 버전으로 프로젝트 생성

 

저 링크 가서 확인하는게 귀찮은 사람들을 위해 그냥 코드로도 보여드림.

/web 을 requestmapping 했을 때 helloworld라는 문장이 return되도록 했었다.

 

package miniproject;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import lombok.extern.log4j.Log4j2;

@Log4j2
@RestController
public class HelloController {
	@RequestMapping("/console")
	public static void main(String[] args) {
		System.out.println("helloWorld");
	}

	@RequestMapping("/web")
	public String reHello() {
		return "helloword";
	}

	@GetMapping(value = "/log")
	public void log() throws Exception {
		// FATAL, ERROR, WARN, INFO, DEBUG, TRACE
		log.trace("Hi I'm {} log", "TRACE");
		log.debug("Hi I'm {} log", "DEBUG");
		log.info("Hi I'm {} log", "INFO");
		log.warn("Hi I'm {} log", "WARN");
		log.error("Hi I'm {} log", "ERROR");
	}

}