Vue.js 기초(5)_심화

이번에는 Vue.js와 관련해서 좀더 고급단계에 대해 알아보겠습니다.

책에서 설명한 대로 쓰는 것이어서 이 부분은 크게 도움이 안 될 수도 있습니다.

 

Vuex

뷰엑스 : 애플리케이션의 상태 관리(state management)를 돕는 라이브러리 입니다.

상태 관리가 필요한 이유

• 어떤 하나의 컴포넌트와 최상위 컴포넌트 사이에 너무 많은 컴포넌트가 존재한다면 
• props로 데이터를 전달하기가 힘듭니다. (유지보수의 어려움)
• 이벤트 버스를 사용하면 되겠지만, 데이터의 흐름을 보기가 어려워집니다.
• 수십개의 컴포넌트를 가졌을 때 이벤트 버스를 사용한다면 데이터 흐름을 파악할 수 없을 것입니다.

그래서 상태 관리가 필요합니다.

-> 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리

-> 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 하는 것이 상태 관리의 목적

컴포넌트 관리에 어려움이 있을 때 필요합니다.

State, Getters, Mutations, Actions 라는 기능도 존재합니다. 

https://vuex.vuejs.org/en/intro.html 에서 더 자세히 알 수 있다고 합니다.

 

 

뷰의 반응성

: 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성

뷰가 어떻게 자동으로 화면 갱신을 하는지 알아보겠습니다.

1. 인스턴스 생성
2. 그 때 data 속성에 정의된 객체들은 특정 변환 작업 거침.
   라이브러리에서 data에 정의된 모든 속성(객체)을 getter, setter 형태로 변환
   (이 때 getter, setter는 사용자가 접근할 수 있는 속성 아님)
3. 화면을 다시 갱신하는 속성인 watcher가 존재
   watcher는 모든 컴포넌트에 존재하는 속성으로, 화면 재구성에 중요한 역할을 함
4. 특정 data의 속성을 바꾸거나 접근하면 watcher에서 감지
5. watcher에서 다시 화면을 그리라는 신호 보냄

이 때 인스턴스 data속성에 반응성이 언제 생기는가? -> 인스턴스를 생성하는 시점

-> 인스턴스 생성 후 data속성에 객체를 추가하면 그 객체는 반응성 없다.

더 자세한 점은

https://vuejs.org/v2/guide/reactivity.html 에서 찾아볼 수 있다고 합니다.

 

 

서버 사이드 렌더링 & 클라이언트 사이드 렌더링

클라이언트 사이드 렌더링 : 웹 페이지를 화면에 그릴 때 화면을 그리는 동작을 클라이언트(브라우저)에서 수행하는 것을 의미

웹페이지가 브라우저에 로딩되는 순서

1. 브라우저에 url입력
2. 서버에 해당 페이지 요청
3. 서버에서 페이지 전송
4. 브라우저가 페이지를 그림

클라이언트 사이드 렌더링	서버 사이드 렌더링
다 그려져 있지 않은 HTML 페이지를 브라우저에서 받고 프런트엔드 프레임워크와 같은 자바스크립트를 이용하여 나머지 부분을 그리는 것	완벽하게 그려진 HTML 페이지를 브라우저에서 받는 것
-	검색 엔진 최적화(SEO, Search Engine Optimization)
웹페이지를 받은 후 자바스크립트 혹은 프레임워크로 추가 내용을 화면에 부착 -> 노출 정도가 상대적으로 낮음	이미 다 그려진 상태로 클라이언트에 넘어와서 내용의 노출 정도가 높음
매끄러운 화면 전환과 사용자 경험의 향상	초기 화면 렌더링 속도가 빠름 -> 다 그려진 상태에서 화면에 나타내기 때문

서로 장단점이 있으므로 적재적소에 맞는 기법을 사용해야 한다.

서버 사이드 렌더링 관련 링크

https://ssr.vuejs.org/en/ 

https://nuxtjs.org/ 

 

웹팩(webpack)

흔히 모듈 번들러로 알려져있다.

웹팩 : 서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해주는 변환도구

       -> 즉 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환도구

 웹팩의 플러그인 기능을 활용하면 1개 이상의 자바스크립트 파일 또는 CSS, HTML 파일을 추가 생성 가능

다만, 기본 취지는 1개의 자바스크립트 파일 안에 다 넣고 해당 JS파일만 로딩해도 웹 앱이 돌아가게 하는 것.

그 이유: 웹 앱의 로딩 속도를 향상시키기 위해서

 

웹팩의 주요 속성

속성	설명
entry	웹팩으로 빌드할 대상 파일을 지정하는 속성
output	웹팩으로 빌드한 결과물의 위치와 파일이름 등 세부 옵션을 설정하는 속성
loader	웹팩으로 빌드할 때 HTML, CSS, PNG 등을 JS로 변환하기 위해 필요한 설정을 정의
plugin	웹팩으로 빌드하고 나온 결과물에 대해 추가기능을 제공하는 속성
resolve	웹팩으로 빌드할 떄 해당 파일이 어떻게 해석되는지 정의하는 속성

 

웹팩 데브 서버(webpack-dev-server)

웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자 Node.js서버

  -> 웹팩으로 화면을 빠르게 제작하고자 할 때 유용하게 사용 가능

잘 아시겠지만, vue-cli로 프로젝트 생성 후 npm run dev를 통해 프로젝트 구동이 된다.

 

webpack 설정 파일 분석

• 파일 경로와 웹팩 라이브러리 로딩

프로젝트 생성 후 webpack.config.js 파일을 확인할 수 있다.

var path = require('path')
var webpack = require('webpack')

output 속성에서 사용할 노드 path 라이브러리와

웹팩 플러그인에서 사용할 node_modules의 웹팩 라이브러리를 node_modules 폴더에서 로딩하여 

path, webpack에 저장합니다.

• entry 속성

entry: './src/main.js',

웹팩으로 빌드할 파일을 src 폴더 및의 main.js 파일로 지정합니다.

main.js 파일에 정의한 내용에 따라 애플리케이션의 구성요소 및 파일들이 웹팩으로 번들링(빌드)됩니다.

• output 속성

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }

웹팩으로 빌드한 후 결과물 파일의 위치와 이름을 지정합니다. 

위치는 dist/build.js입니다.

• module 속성

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

웹팩으로 애플리케이션 파일들을 빌드할 때 HTML, CSS, PNG 등의 파일을 자바스크립트로 변환해주는 로더를 지정합니다.

• resolve 속성

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  }

웹팩으로 빌드할 때 뷰 라이브러리의 여러 유형 중 어떤 걸 선택할지 지정합니다.

• devServer 속성

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  }

웹팩 데브 서버 관련 속성을 지정합니다.

historyApiFallback: 클라이언트 사이드 라우팅인 뷰 라우터와 함께 사용하기 위해 true로 지정합니다.

noInfo: 처음 서버를 시작할 때만 웹팩 빌드 정보를 보여줍니다.

overlay: 웹팩으로 빌드할 때 오류가 있으면 브라우저 화면 전체에 오류를 표시합니다.

• performance 속성

  performance: {
    hints: false
  }

웹팩으로 빌드한 파일의 크기가 250kb를 넘으면 경고 메시지를 표시할지 설정합니다.

• devtool 속성

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({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

애플리케이션의 기능과 화면을 구현한 후 최종적으로 사용자나 사이트에 배포할 때 애플리케이션의 성능 향상을 위해 추가한 설정입니다.

• #soucre-map: 개발자 도구 분석옵션을 지정합니다.
• new webpack.DefinePlugin : 자바스크립트 파일의 크기를 줄이는 Uglify 플러그인과 환경 변수 값을 설정합니다.

 

뷰 개발을 위한 ES6

ES6(ECMAScript 2015)는 최신 자바스크립트 문법이자 스펙입니다.

-> 2015년에 문법적인 큰 변화가 있어서 ES6 혹은 ECMAScript 2015라고 부르고, 기본 자바스크립트는 ES5라고 부릅니다.

const & let

ES6에서는 var 대신 let으로 변수 선언을 합니다.

let a = 10;
a = 20; // a=20
const b= 30;
b = 40; // Uncaught TypeError: Assignment to constant variable

이런 특징을 보이기 때문에, const는 상수 값과 함수를 정의할 때, let은 그 외의 변수와 반복문에서 활용합니다.

블록의 유효범위

var i=10;
for(var i=0; i<5; i++) {
	console.log(i); // 0,1,2,3,4
}
console.log(i); // 5

let i=10;
for(let i=0; i<5; i++) {
	console.log(i); // 0,1,2,3,4
}
console.log(i); // 10

이렇게 let으로 변수 선언을 하면 { } 안으로 변수의 유효 범위가 한정됩니다.

화살표 함수

var sumNumbers = function(a,b) {
	return a+b;
}

var sumNumbers = (a,b) => {
	return a+b;
}

기존 ES5의 함수 정의 방식을 간소화한 문법으로, 자바의 람다식이라고 생각하시면 될 것 같습니다.

import & export

둘 다 모두 모듈화와 관련된 기능 ( 모듈화: 코드를 특정 기능이나 로직 단위로 구분하여 각각의 모듈로 관리하는 것 )

import: 한 파일에서 다른 파일의 내용을 불러올 때 사용

export: 한 파일의 특정 기능을 다른 파일에서 사용할 수 있도록 설정할 때 사용

// ./app/login.js
export const id = 'test';

// ./main.js
import { id } from './app/login.js';
console.log(id);

app/login.js 파일에서 id값을 사용할 수 있게 하고,

main.js 파엘에서는 id값을 불러와서 콘솔 창에 출력합니다.