프로젝트 배포

작성자

vita

작성일

2023-11-19 22:04

조회

396

이제 React와 Spring Boot 의 모든 기능들이 완성되었습니다. 마지막으로 따로 개발한 기능을 합쳐야 합니다. 여러가지 방법이 있지만 여기서는 React에서 먼저 빌드를 한 후 Spring Boot에 복사하여 합치는 방법으로 진행합니다.

1. React 프로젝트 빌드

React 프로젝트를 빌드합니다.

npm run build

React 프로젝트 하위에 build 디렉토리가 생성됩니다.

c:/react/frontend/build 디렉토리에 있는 index.html 파일을 복사하여 스프링 프로젝트의 views 디렉토리에 복사합니다.

Spring Boot에서는 jsp를 사용하는 것으로 설정을 했으므로 파일 이름을 변경합니다.

index.html 에서 index.jsp 로 바꿉니다.

c:/react/frontend/build/static 디렉토리 하위의 js와 css 디렉토리 전체를 복사하여 스프링 프로젝트의 src/main/webapp/static 디렉토리에 복사합니다.

[생략]

@RestController

public class ProductController {

@Autowired

ProductDAO productDao;

@RequestMapping("/")

public ModelAndView home() {

return new ModelAndView("index", "", "");

}

[생략]

}

[풀이]

@RequestMapping("/")

http://localhost 라고 입력을 하면 index.jsp 페이지가 실행됩니다.

return new ModelAndView("index", "", "");

ModelAndView는 화면에 데이터를 담아서 출력시키는 함수입니다.

아래와 같은 형식입니다.

new ModelAndView( 뷰이름, 변수명, 데이터 )

뷰이름은 index.jsp이고 전달할 변수는 없습니다.

이제 스프링의 포트 번호를 사용하여 결과를 확인합니다.

http://localhost

이제 모든 작업이 완료되었습니다. 여기까지 실습하시느라 대단히 수고가 많으셨습니다.

간단한 예제이지만 React와 Spring Boot의 기본적인 동작 원리 및 연동하는 방법에 대해 설명을 드렸습니다. 이 방법을 활용하여 다양한 기능을 확장하여 만들 수 있을 것입니다.

목록보기