Spring & Vue.js 연동

이번에는 Spring과 Vue.js를 연동해보겠습니다.

그러면 Spring은 Backend가 되고, Vue.js는 frontend가 되게 됩니다.

 

프로젝트를 만드는 방법은 다양하지만, 저는 스프링 프로젝트를 먼저 만든 후 Vue-cli를 적용할 것입니다.

 

먼저 스프링 프로젝트를 만듭니다.

저는 다음과 같은 Dependency를 포함해서 넣었습니다. 넣고 싶은 것을 넣으면 됩니다.
(여기서 일단 스프링 세큐리티는 제외하시기를 권장합니다.)

그럼 다음과 같은 프로젝트 구조를 보실 수 있으실 겁니다.

그리고 실행을 한다면 실행이 안됩니다. MariaDB 설정을 안하셔서 그렇습니다.

저는 마리아DB로 했지만, 다른 dB를 원한다면 그것을 하시면 됩니다.

 

먼저 pom.xml 파일로 가서 다음을 추가합니다.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
  <groupId>org.mariadb.jdbc</groupId>
  <artifactId>mariadb-java-client</artifactId>
</dependency>

그리고 application.properties에 다음과 같이 추가합니다.

server.port=8083

spring.datasource.driverClassName=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:3307/test
spring.datasource.username=root
spring.datasource.password=1234

서버 포트의 경우 기본으로 8080으로 설정되니 굳이 바꿀 필요는 없습니다.

그 다음 실행을 하시면 다음과 같은 화면을 볼 수 있습니다.
(스프링 시큐리티를 넣지 않으셨다면 다른 화면이 보이실 겁니다.)

 

이제 뷰 연동을 하겠습니다.

먼저 Vue-Cli가 설치 되어 있으셔야 합니다.

그럼 터미널을 열어서 다음처럼 입력합니다.

Enter를 누르면 다음의 화면이 등장하는데

Default로 하면 바로 설치가 되고, Manually로 하면 다른 설정을 진행한 후 설치가 진행됩니다.

아무거나 설치해서 진행합니다.

Default로 진행하시면 나중에 Router를 따로 추가하시기 바랍니다. router기능도 쓸 것이어서...

vue add router를 터미널에 치면 설치가 자동으로 진행됩니다.

그리고 vue를 실행해보면 우리가 알던 그 기본 뷰 화면이 나옵니다.

 

참고로 파일 구조는 다음처럼 변경됩니다.

이제 뷰 스프링 연동을 위해 vue.config.js 파일을 다음처럼 추가합니다.

그리고 vue.config.js 파일에는 다음처럼 작성합니다.

module.exports = {  
  outputDir: "../src/main/resources/static",  
  indexPath: "../static/index.html",  
  devServer: {  
    proxy: "http://localhost:8080"  
  },  
  chainWebpack: config => {  
    const svgRule = config.module.rule("svg");    
    svgRule.uses.clear();    
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");  
  }  
};

참고로 proxy 부분은 아까 application.properties에서 설정했던 서버 포트와 같게 설정하셔야 합니다.
(저는 8083으로 해서 여기도 8083으로 적어놨습니다.)

outputDir은 npm run build로 빌드 시 파일이 생성되는 위치,

indexPath는 index.html 파일이 생성될 위치를 지정,

devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소를 작성하면 됩니다.

 

이제 다시 터미널 창으로 와서

' npm run build ' 명령어를 입력하시면 됩니다.

그러면 다음과 같은 화면이 등장합니다.

프로젝트 구조는 다음처럼 추가가 됩니다.

 

그런 다음 스프링을 실행합니다.

이런 화면이 나타날 것입니다.

그리고 터미널 창으로 가서 'npm run serve'를 입력해봅니다.

위의 화면처럼 접속 주소가 나타날 것입니다.(접속 주소가 저하고는 같지 않을 수 있습니다.)

그리고 접속을 해보시면

같은 화면이 나오는 것을 보실 수 있습니다.

 

개발을 진행할 때는 뷰를 실행시키고 개발을 진행하면 개발 내용이 즉각적으로 반영되기 때문에 개발하기 한결 편합니다.

스프링으로 설정한 주소에서 개발한 내용을 보고 싶다면 'npm run build'를 입력한 후 스프링을 재실행하면 개발 내용이 적용된 것을 확인 하실 수 있습니다.

이후 개발하시고 싶은 것을 개발하면 됩니다~

 

이렇게해서 뷰-스프링 연동을 마치겠습니다.

 

참고자료

https://mr-spock.tistory.com/3