Spring과 React/Vue/Angular 연결

웹프레임워크(ex) Spring, Django )을 통해서 정적사이트를 만들 수 있다.

 

SPA(홈페이지는 그대로인데 내용만 바뀌는것)는 정적사이트(전체페이지가져옴)를 보완하기 위해 AJAX를 통해 구현함.

하지만, SPA를 위한 프레임워크가 있음(JS로 구성된 Angular, React, View)를 통해서 만들 수 있다.

정적사이트 단점보완하는 SPA를 위한 js프레임워크

 

따라서, 웹 페이지를 구축할때는 아래와 같이 한다.

 

프론트- JS를 이용한 React/Vue/Angular 로 웹페이지 만들기

백엔드- Java+SpringBoot로 구축

 

=> 왜 React/Vue/Angular로만 만들지 않는가? : 대표적으로 DB를 연결하려면 Spring이 필요하다.

즉, DB외에도 다른 서비스들을 연동하려면 백엔드단으로 따로 나누어 Spring의 도움이 필요한것으로 추측한다.

 

=> 그럼 예를들어 Vue.js를 사용한다고 하면, Spring과 어떤 방식으로 연결하는가?

예를 통해서 설명해보겠다.

#EXAMPLE

1. Visual Studio에서 Vue.js를 통해 동적인 웹페이지를 개발한다.

-> localhost 8080

2. Intellij에서 Java Spring Boot를 통해서 DB연결과 같은 서버 쪽을 개발한다.(mysql이랑 연동시켜놓고 sqlmapping으로)

-> localhost 9000

3. Vue.js(8080)에서 Spring(9000)에 연결을 하여 DB와 같은 것들을 가져오게 한다.

axios통신으로 Vue에서 연동할 수 있다.

4. 이렇게 연동된 것을 웹서버에 올린다.

-> 이부분은 추후에 다루도록 하겠다.

로컬에서 개발을 할 때 예시

 

 

<영상참고>하면 React + SpringBoot + Mysql 의 활용도를 알수 있다.

https://www.youtube.com/watch?v=hHRLN9j1kqI