빈 프로젝트 부터 시작하여 풀스펙 Vue.js 프로젝트 구축

Blog Logo
  



빈 프로젝트(디렉토리)부터 시작하여 NPM, Webpack, Babel 등을 사용하여 풀스펙 Vue.js 프로젝트를 점진적으로 구축해 본다.

이전 글에서는 Vue CLI 를 사용해 풀스펙 Vue.js 프로젝트를 만들어 보았다.

Vue CLI 처럼 풀스펙 프로젝트를 생성해주는 툴은 상당한 편리함을 주지만

다른 한편으로는 처음 시작하는 개발자에게는 복잡한 프로젝트 구성이 진입장벽으로 다가올 수 있다.

이번 글에서는 빈 프로젝(디렉토리)부터 시작하며, 한가지씩 기능을 추가하면서 풀스펙 프로젝트로 점진적으로 구축을 해보도록 한다.

아래 과정을 진행하기 전에 NPM은 기본적으로 설치되어 있어야 한다.

NPM 설치에 관해서는 이전 글 개발자 기본 개발 환경 설정 에서 확인할 수 있다.

I. 시작 프로젝트 만들기

1. NPM 초기화

  • 터미널(컴맨드) 창을 열고, 아래 명령으로 빈 디렉토리를 만든다.
$ mkdir vueapp01
$ cd vueapp01
  • 아래 명령으로 NPM을 초기화 한다.
$ npm init

NPM이 프로젝트를 생성하기 위한 초값들을 물어보는데 모두 기본값(엔터 입력)으로 진행한다.

처음 생성했던 작업공간에 “package.json” 파일이 아래와 같이 생성이 된다.

  • “package.json” 파일 내용은 아래와 같다.
{
  "name": "vueapp01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  • 디렉토리 구조는 “package.json” 파일 하나만 존재하는 상태가 된다.
~/Projects/vueapp01
$ la
total 1
-rw-r--r--  1 heehun.kang  staff   204B  2 25 11:07 package.json

이후부터는 통합개발환경으로 이 디렉토리를 열어 작업하도록 한다.

2. 필수 모듈 설치

터미널(컴맨드) 창에서 아래 명령으로 필수 모듈들을 설치한다.

$ npm install --save vue vue-router vuex
$ npm install --save-dev webpack webpack-cli

여기서 사용된 NPM 옵션 2가지에 대해 간략히 설명하도록 한다.

  • —save-dev
    현재 프로젝트의 “node_modules” 폴더에 선택된 모듈들을 설치하도록 한다.
    이 모듈들은 빌드시에만 사용되며 따라서 배포결과물에 추가되지 않는다.

  • —save
    현재 프로젝트의 “node_modules” 폴더에 선택된 모듈들을 설치하도록 한다.
    이 모듈들은 빌드뿐만 아니라 실행시에도 사용되므로 배포결과물에 추가된다.

프로젝트 디렉토리에 “package-lock.json” 파일이 생성이 되고 “node_modules” 폴더에는 위의 명령으로 선택 모듈들이 설치가 된다.

~/Projects/vueapp01
❯ la
total 322
drwxr-xr-x  320 heehun.kang  staff    10K  2 25 11:16 node_modules
-rw-r--r--    1 heehun.kang  staff   139K  2 25 11:16 package-lock.json
-rw-r--r--    1 heehun.kang  staff   381B  2 25 11:16 package.json

II. 기본 Vue.js 프로젝트 구축

1. app.js, App.vue 파일 생성

프로젝트 폴더에 “src” 하위 폴더를 생성하고, “app.js” 파일과 “App.vue” 파일을 생성한다.

이 두 파일의 내용은 아래와 같이 입력한다.

  • /src/app.js 파일 내용
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})
  • /src/App.vue 파일 내용
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

“app.js”은 최초 진입점(Entry-point)이 되고 “App.vue” 파일로부터 App 컴포넌트를 생성한다.

2. Webpack 환경파일 생성

프로젝트 폴더에 “build” 하위 폴더를 생성하고, “webpack.config.dev.js” 파일을 생성한다.

  • /build/webpack.config.dev.js 파일 내용
'use strict'
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'development',
  entry: [
    './src/app.js'
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

빌드모드(mode)는 development, 진입스크립트(entry)는 “app.js”로 지정이 되었고
*.vue 파일을 만나면 vue-loader 모듈에서 실행이 되도록 규칙(rules)이 만들어 졌다.

3. Webpack 빌드 환경 구성

  • 터미널(컴맨드)에서 아래 명령을 실행하여 vue-loader 관련 모듈들을 설치 한다.
$ npm install --save-dev vue-loader vue-template-compiler
  • “package.json” 파일을 열어서 “scripts” 항목에 아래 속성 값을 추가한다.
"build": "webpack --config build/webpack.config.dev.js"
  • 프로젝트 루트 디렉토리에 “index.html” 파일을 만들고 아래 내용을 입력한다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>My Vue app with webpack 4</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/main.js" type="text/javascript"></script>
  </body>
</html>

4. Webpack 빌드 명령 실행

이제부터는 웹팩을 사용해서 Vue.js 프로젝트 빌드결과물을 생성할 수 있다

터미널(컴맨드)에서 아래 명령을 실행하면 “/dist” 폴더에 Webpack 빌드결과물이 생성이 된다.

$ npm run build

지금까지 구축된 프로젝트 구조는 아래와 같다.

Vue.js 프로젝트 구조

프로젝트내의 index.html 파일을 웹브라우져에서 바로 읽거나,
외부 웹서버의 게시 폴더에 “index.html” 과 “dist” 폴더를 배포하고 웹브라우져로 접속하면 빌드결과물을 확인할 수 있다.

Vue.js 프로젝트 실행

III. Vue.js 프로젝트 확장

1. 웹팩 개발서버 추가

지금 프로젝트를 수정하고 결과를 반영하기 위해서는 항상 “npm run build”를 실행하고 index.html을 갱신해야만 했다.

이런 불편함을 해소하기 위해 “webpack-dev-server”를 추가하도록 한다.

  • 아래 명령을 입력하여 babel-loader를 설치한다.
$ npm install --save-dev webpack-dev-server html-webpack-plugin
  • “/package.js” 파일을 열어서 scripts 속성값에 아래 내용을 추가한다.
"dev": "webpack-dev-server --config build/webpack.config.dev.js"
  • “/build/webpack.config.dev.js” 파일을 열어서 아래 내용으로 수정한다. 
    'use strict'
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
  
entry: [
  './src/app.js'
],
devServer: {
  hot: true,
  watchOptions: {
    poll: true
  }
},
module: {
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader'
    }
  ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new VueLoaderPlugin(),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true
  })
]
}

devServer 설정값으로 HMR(Hot Module Replacement)가 활성화 되었고
plugins 설정값으로 관련 플러그인들이 생성되었다.

  • /dist 폴더가 존재하면 이 폴더의 빌드결과물들이 우선권을 가지므로 삭제하도록 한다. 
    $ rm -rf dist
  • 이제 아래 명령으로 웹팩 개발 서버를 실 할 수 있게 되었다. 
    $ npm run dev

웹팩 개발 서버를 실행하면 http://localhost:8080/ URL로 index.html 파일에 접속할 수 있으며 프로젝트 내의 소스가 변경되면 바로 내용이 수정된다.

2. CSS 스타일 로더 추가

Vue.js 에서 CSS 스타일을 적용하는 방법은 2가지 방법이 있다.

1) 별도의 *.css 파일을 만들고 app.js 파일에서 이 css 파일을 import

2) *.vue 파일안에 <style></style> 태그를 추가하고 이 안에 CSS 스타일을 구현

지금은 CSS 파일에 대한 규칙(rule)을 입력하지 않아서 빌드시에 에러가 발생한다.

따라서 이 문제를 해결하기 위해 CSS 로더 모듈을 추가하도록 한다.

  • 터미널(컴맨드) 창에서 아래 명령을 입력해서 css-loader와 vue-style-loader 를 설치한다.
$ npm install --save-dev css-loader vue-style-loader
  • “/build/webpack.config.dev.js” 파일을 열어서 rule 속성값에 아래 내용을 추가한다. 
    {
test: /\.css$/,
use: [
  'vue-style-loader',
  'css-loader'
]
}

3. CSS 스타일 적용 #1

첫번째 방법으로 *.css 파일을 만들어서 적용하는 방법을 구현해 본다.

  • 프로젝트 디렉토리에 /assets 폴더를 만들고 app.css 파일을 생성한 뒤 아래 내용을 입력한다.
div {
    width: 100%;
}
h1 {
    display: flex;
    justify-content: center;
}
  • /src/app.js 파일을 열어서 아래 내용을 추가한다.
import '../assets/app.css'
  • 터미널(컴맨드) 창에서 아래 명령을 입력하여 프로젝트를 실행한다.
$ npm run dev
  • 웹브라우져에서 index.html 를 접속하여 바뀐 내용을 확인한다.

CSS 스타일이 적용된 결과 화면

CSS 스타일이 적용되어 “Hello World!” 텍스트가 가운데 정렬 되었음을 확인 할 수 있다.

4. CSS 스타일 적용 #2

두번째 방법으로 *.vue 파일안에 <style></style> 태그를 추가하는 방법을 구현해 본다.

  • /src/App.vue 파일을 연뒤에 마지막에 아래 내용을 추가한다.
<style scoped>
    h1 {
        color: navy;
    }
</style>
  • 터미널(컴맨드) 창에서 아래 명령을 입력하여 프로젝트를 실행한다.
$ npm run dev
  • 웹브라우져에서 index.html 를 접속하여 바뀐 내용을 확인한다.

CSS 스타일이 적용된 결과 화면

CSS 스타일이 적용되어 “Hello World!” 텍스트가 파란색으로 바뀌었음을 확인할 수 있다.

5. 바벨 추가

현재의 프로젝트 구성은 낮은 자바스크립트 스펙의 웹브라우져(Internet Explore 11 같은)로 접속했을때 정상적으로 표시가 되지 않는다.

이런 낮은 자바스크립트 스펙의 웹브라우져를 지원하기 위해서는 babel-loader를 설치해야 한다.

  • 아래 명령을 입력하여 babel-loader를 설치한다.
$ npm install --save-dev @babel/core babel-loader @babel/preset-env
  • “/build/webpack.config.dev.js” 파일을 열어서 rule 속성값에 아래 내용을 추가한다.
{
  test: /\.js$/,
  use: 'babel-loader'
}
  • 프로젝트 디렉토리에 “.babelrc” 파일을 생성하고 아래 내용을 입력한다.
{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
  • 터미널(컴맨드) 창에서 아래 명령을 입력하여 프로젝트를 실행한다.
$ npm run dev
  • 낮은 자바스크립트 스펙의 웹브라우져(Internet Explorer 11 등)에서 index.html 를 접속하여 바뀐 내용을 확인한다.

바벨이 적용된 결과 화면

낮은 자바스크립트 스펙의 웹브라우져에서도 해당 내용이 잘 보임을 확인할 수 있다.

본 예제 결과물 vueapp01.zip 소스파일은 아래 링크에서 다운받을 수 있다.
vueapp01.zip 소스파일

Front-end Vue.js NPM Webpack Babel

Written by
Blog Logo

HeeHun Kang

Published

Supported by