이미 진행중인 프로젝트에 vue 직접 추가해보기

vue-cli를 이용해서 vue 프로젝트를 직접 생성하면

 

webpack, babel 을 포함안 모든 설정이 아주 군더더기 없이 깔끔하게 설치되기때문에

 

별다른 고민을 할필요가 없습니다.

 

매끄럽게 vue 기반의 프로젝트를  실행할수 있습니다.

 

 

그런데 이미 jquery기반의 프론트엔트 프로젝트를 운영중이라면

 

막상 저렇게 적용하기는 어렵죠

 

 

webpack설정부터 babel, vue-loader까지 직접 설정을 해야합니다.

 

기존에 webpack을 사용하고 있었다면 기존 webpack설정에 vue를 위한 설정을 더해야하구요

 

그런데 제가 못찾는건지 아쉽게도 vue.js 홈페이지에서 해당 내용이 없더라구요

 

 

마침 비슷한 고민의 다른분들의 포스팅을 참고하여 수월하게 기존프로젝트에 vue를 추가하는 작업을 했습니다.

 

nodejs 기반의 샘플프로젝트인데 한번 차근차근 따라해볼까요

 

 

 

일단 php가 되었든 java가 되었든 nodejs가 되었든 이미 기존의 프로젝트가 있다고 가정합니다

 

그리고 여기에 webpack과 babel 그리고 vue를 추가하여 사용해볼것입니다

 

 

 

일단 vue는 당연히 필요하겠죠

 

그리고 webpack과 webpack-cli가 필요합니다

 

npm 명령어를 통해서 빌드를 할테니깐요

 

그리고 vue 파일을 컴파일해야하니깐 vue-template-compiler가 있어야 하고,

 

webpack과 연동을 위해 vue-loader가 필요합니다.

 

babel도 필요하고요 @babel/preset-env를 사용할겁니다

 

 

 

npm install vue

npm install -D webpack webpack-cli
npm install -D vue-loader vue-template-compiler
npm install -D @babel/core @babel/preset-env babel-loader

 

이렇게 설치를 마치고

 

.babelrc 파일을 생성하여 다음과 같이 입력합니다

 

저는 @babel/preset-env 이것을 썼는데요 다른 프리셋을 쓰실분은 다른것을 사용하셔도 됩니다.

 

 

그리고 webpack도 설정을 해야겠죠

 

 

webpack.config.js 파일을 다음과 같이 만들어봅니다

 

 

vue-loader 플러그인을 추가하고, vue-loader와 babel-load의 룰을 설정합니다

 

그리고 app.js, users.js 라는 두개의 파일을 읽어서 public 폴더에 app.js, users.js라는 아웃풋 파일을 만들도록 했습니다

 

물론 하나의 파일에 모두 넣어도 무방하지만, 만약에 프로젝트 크기가 크다면,

 

특정 페이지에서 안쓰이는 자바스크립트 코드, 컴포넌트까지 모두 포함되어있어 용량이 큰 코드를 한꺼번에 로드를 해야하기때문에

 

적당히 여러분들이 판단해서 잘라주시면 됩니다.

 

 

그리고 webpack 빌드를 사용하도록 package.json을 수정합니다

 

개발환경에서는 webpack의 watch 옵션을 사용해서 파일의 변화가 있을때 자동으로 작업을 수행하도록 합니다

 

 

샘플 프로젝트는 2개의 라우터를 만들었습니다

 

/ 경로랑 /users 이렇게 두개를 만들었어요

 

/ 에서는 <hello-world>라는 컴포넌트를 사용할거구요

 

/users에서는 <hello-user>라는 컴포넌트를 사용할겁니다

 

 

 

 

각각의 컴포넌트에 대한 vue 템플릿 싱글파일을 만들었구요



app.js와  user.js에서 각각 vue component에 등록을 하도록 했어요

 

 

 

/에서는 index.ejs 파일을 읽어 렌더를 하는데요

 

index.ejs 파일을 보시면 

 

vue 파일을 따로 불러오고 app.js를 불러오도록 했습니다

 

 

vue core 를 포함하여 app.js 하나의 파일로 빌드할수 있는데

 

그것보다는 독립적인 파일로 만들어서 캐싱을 해두려고요

 

그러면 여러곳에서 필요할때마다 vue를 불러오고 그 뒤에 해당 페이지에서 필요한 추가적인 js를 로드하도록 할거거든요

 

이렇게 하면 캐시되어있는 vue core를 로드하고, 추가적으로 필요한 컴포넌트들이 있는 js 파일들 추가로 로드할테니깐

 

좀 더 네트워크 절약이 될것 같아요

 

하지만 이렇게 할경우 vue.js 로딩과 vue로 작성된 스크립트가 실행되는 시간차이가 발생할수도 있기 때문에 적절하게 조치해주셔야해요

 

물론 케바케니깐, 다른분들도 본인의 상황에 맞는 전략을 선택하시면 될것 같아요

 

 

 

 

잘나오는군요

 

 

 

 

깃헙에도 샘플프로젝트를 올려두었습니다. 개발하시는데 도움이 되었길 바랍니다

 

https://github.com/spotlight21c/vue-sample

spotlight21c/vue-sample

 

 

 

 

 

 

 

 

참고링크

 

http://labs.brandi.co.kr/2018/10/23/chunbs.html

http://labs.brandi.co.kr/2018/08/07/kangww.html