Vue.js 시작하기 1

두달 전쯤에 써논 글인데 이젠 한글 홈페이지도 있고 문서가 많아진 것 같다 ㅜ.ㅜ

이번에 새로운 프로젝트를 시작하면서 vue2.0을 적용하였다. 아직 문서도 없고 이전에 react나 angular2를 실 프로젝트에 쓰일만큼 deep하게 다뤄본적이 없어서 어려움을 많이 겪었다. 이에 관하여 몇가지 글을 써보고자 한다. (가끔은 vue2.0과 상관이 없는 이야기 일수도 있다)

왜 vue를 선택했을까?

  • vue는 angular1의 문법과 쓰임이 매우 유사하다. prefix만 조금 다를뿐 (v-와 ng-) 아무 이질감 없이 받아들일 수 있다.
  • vue는 기본적으로 component를 기본으로 한다. angular의 component, directive와 유사하다. (angular 1도 1.5부터 component를 제공한다.)

개발환경 설치

  • 파이썬과의 혼용을 방지하기 위해 folder는 client 하위에 두었다.
  • 프론트 개발 서버 및 모듈 번들러 도구로는 webpack.

  • vue설치

    • package.json에 명시
      • dependency: vue로 된 app을 돌리기 위해 필요한 패키지들.
      • dev-dependency: 개발 환경에서만 필요한 패키지들.
    • vue-cli를 global로 설치하여 vue init으로 pack을 설치하여도 된다.

how-was-your-day프로젝트의 dependency를 보자

"dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.1",
    "lodash": "^4.17.2",
    "material-design-icons": "^3.0.1",
    "serialize-javascript": "^1.3.0",
    "serve-favicon": "^2.3.0",
    "vue": "^2.0.1",
    "vue-router": "^2.0.0",
    "vue-ui": "^0.1.3",
    "vuex": "^2.0.0",
    "vuex-router-sync": "^3.0.0"
  }

직접 코드내에서 쓸 jquery등을 비롯해 vue, vue-router, vuex등은 실제 구동 환경에서도 쓰여야하기 때문에 dependency에 넣는다.

"devDependencies": {
    "babel-core": "^6.13.2",
    ...
    "css-loader": "^0.23.1",
    "eslint": "^3.2.2",
    ...
    "file-loader": "^0.8.4",
    "karma": "^1.1.2", 
    ...
    "sass-loader": "^4.0.2",
    "vue-loader": "^9.7.0",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.0",
    "style-loader": "^0.13.1"
  }

dev에는 개발환경에서만 필요한 webpack, loader, test library등을 넣는다.

webpack 설정하기

npm-module들을 깔았으면 vue를 개발하기 위한 환경을 구동해야 할 것이다.
vue-loader만 설치하면 vue와 관련된 기본적인 것들을 처리해준다. 거기에 추가로 몇가지 loader만 설정해주면 문제 없이 쓸 수 있다.

webpack.config.js

var path = require('path')
var webpack = require('webpack')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'), //어디에 놓을 것인지 파일명은 기본 bundle.js

    publicPath: '/dist/', //정적파일의 경로

    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here

        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(scss|css)$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html

  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

간단하게 기본적인 것들만 집어 넣은 상태라 어렵지는 않다. 추가적으로 우리는 sass를 쓸것이기 때문에 node sass와 sass-loader를 집어 넣었다.
webpack이 버전 업이 되고 module 쓰임새가 좀 바뀌어서 공식 홈페이지 들어가 꼭 확인을 해볼 것을 권장한다. loader들은 rules하위에 넣고 모든 loader들은 뒤에 -loader라고 post-fix를 붙여야만한다.

.babelrc설정

새로만드는 프로젝트를 es6를 적용하지 않는다면 반쪽짜리 프론트 프로젝트 일 것이다. babel을 쓰려면 webpack에서 es6를 compile 할 수 있도록 위 처럼 webpack.config.js에 babel-loader를 설정하고 babel정보를 webpack.cofnig.js에 넣거나 혹은 root에 .babelrc를 만들어 넣어야 한다. 우리는 .babelrc파일을 만들어 넣었다.

.babelrc

{
  "presets": [["es2015", { "modules": false }], "stage-2"],
  "ignore": ["node_modules/*"]
}

stage는 얼마큼 es6를 적용할 것이냐다. ECMA표준이 여러 단계로 나눠서 들어가 있고 숫자가 낮을수록 더 큰 preset(상위 단계 0 - proposal, 3 - finishehd) 이다. 쓰고자 하는 만큼 설정하면 된다. es7의 async/await 같은 경우는 stage-0에 있다. 우리는 vuex의 mapgetter를 쓰기 위해 stage2정도로 해둔다.

자세한 사항은 이곳 참조

파일 생성

모두 설정했으면 webpack에 설정되어 있는 entry(번들러하고자 하는 루트)경로에 파일을 만들어야 한다. src/main.js로 파일을 하나 만든다. vue를 만드는 과정은 다음 장에서 설명한다.

dev server 띄우기

webpack은 dev-server를 통해 개발 서버까지도 생성해준다.

webpack-dev-server --inline --hot을 쉘에 입력하면 개발 서버를 띄울 수 있다. (webpack-dev-server가 global 로 설치되어있다는 가정하에)
아니면 node_modules/.bin/webpack-dev-server로 실행시킨다.

--inline은 런타임코드를 번들에 추가,
--hot은 새로고침없이 변경사항을 반영해주는 hotmodule을 서버에 추가해준다는 옵션이다.
--port옵션등으로 포트도 변경해 줄 수 있다 (기본: 8080)

매번 webpack-dev-server ....xxxxx를 치기 귀찮으므로 npm script로 등록해두자

package.json에 아래와 같이 등록해두면

"scripts": {
    "start": "node_modules/.bin/webpack-dev-server  --hot --inline"
  }

npm start로 실행 시킬 수 있다.

Comments

comments powered by Disqus
comments powered by Disqus