Spring과 Vue.js를 연동하는 방법
먼저 Spring을 연동하고 Spring의 기본 프로젝트를 설정한다 설정 방법은 다음 시리즈에 설명하고 있으니 참고하길 바랍니다.
Vue.js란?
- 개념
사용자 인터페이스를 만들기 위한 프로그래시브 프레임워크로 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있다고 홈페이지에 설명하고 있다.
CLI를 설치하는 방법을 이용하여 Vue.js의 서버를 띄웠다면 콘솔에서 Vue.js에 대한 명령어를 쳐서 스프링을 연동할 수 있다.
연동 방법.
CLI를 연동할 때 서버를 연결할 포트 번호까지 설정하는 것을 설정하였다면 이제 이 포트로 Vue.js에서 Spring에 설정해둔 서버와 통신할 수 있어야한다.
우리는 통신을 위해서 axios를 설정해줄 것이다.
기본적으로 vue.js에 담긴 데이터를 통신하기 위해서는 axios를 사용해야한다. form action처럼 원래 javascript의 내용처럼 사용하지 않는다. 그렇기 때문에 vue.js의 내용을 송신하려면 axios의 설정을 넣어주어야한다.
cmd창에서 CLI의 설정을 끝마쳤으면
vue.config.js 파일을 프로젝트에서 찾아볼 수 있다.
vue.config.js > webpack이란?
webpack은 최신 프론트엔드 프레임워크(vue, react, angular)에서 모두 권장하는 모듈 번들러로 서로 연관되어 있는 모듈 간의 관계를 해석하여 정적인 자원(javascript)으로 변환시켜주는 도구이다.
vue CLI 3버전부터는 vue.config.js로 웹팩 설정을 관리함. vue.config.js파일을 보면 'cli-service'라는 부분이 있는데, 웹팩의 기본 설정이 이 cli-service모듈에 감춰져 있음
webpack 주요 속성
entry
-웹팩으로 빌드할 대상 파일을 지정
entry: "./src/main.js",output
- 빌드 결과물의 위치와 파일이름 등을 설정
output:{
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/'
filename: "build.js",//vue CLI 프로젝트 실행 시 npm run serve로 실행 시 webpack 기반으로 동작을 한다면 빌드 디렉토리가 생성되어야 할 것 같은데 빌드 디렉토리(/dist) 생성되지 않음.
//npm run build로 실행하면 루트에 dist 빌드 디렉토리 생성되고 하위에 결과 파일들 생성되어 있음
//npm run serve 실행 시는 빌드 결과물을 파일 시스템으로 생성하는 것이 아닌 '메모리'에 생성 함(빠른 Read/Write 가능)으로 소스 변경에 따른 빠른 반영 가능하다
},module
- html,css,이미지 파일 등을 js로 변환하기 위한 Loader 설정
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"], // css -> js 변환
},
{
test: /\.vue$/,
use: ["vue-loader"], // vue -> js 변환
},
{
test: /\.js$/,
use: ["babel-loader"], // ES6문법 -> 호환가능한 js 변환
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
use: ["file-loader"], // 이미지파일 -> js파일로 변환
options:{
name: '[name].[ext]?[hash]'
}
},
],
},plugin
- 빌드 결과물에 대한 추가 기능 적용(ex. 결과물 사이즈 줄이기, 기타 css,html 파일로 분리 등)
plugins: [new CleanWebpackPlugin("build.js")],resolve
- 빌드 시 해당 파일이 어떻게 해석되는지 정의(라이브러리 버전, 파일 경로 등 지정)
resolve: {
// 웹팩에서 모듈을 찾을 때 어떤 디렉토리를 찾을지 설정
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}웹팩 설정을 변경하고 싶으면 vue.config.js 파일에서 수정을 해줘야한다
아래 vue 가이드를 참조해서 진행해야 한다.
