[Vue] Vuex, 뷰의 반응성, SSR, 뷰 개발을 위한 웹 팩

Do it! Vue.js 입문을 읽고 정리한 내용입니다.

Vuex

뷰엑스는 애플리케이션의 상태 관리를 돕는 라이브러리이다.

상태(state) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터

상태 관리가 필요한 이유

최하단 컴포넌트에서 메인 컴포넌트로 데이터를 전달할 경우 그 사이에 너무 많은 컴포넌트가 있기 때문에 모든 컴포넌트를 거쳐서 props로 데이터를 전달하는 것은 번거롭고 관리도 힘들어지게 된다.

이벤트 버스를 사용할 경우 상-하위 간의 데이터 전달 구조를 따르지 않고도 한 번에 로그인 폼 컴포넌트에서 메인 컴포넌트로 데이터를 보낼 수 있게 쉽게 데이터를 전달할 수 있다. 하지만 단방향 데이터 흐름이 아닌 다양하고 많은 데이터 흐름일 경우에는 파악이 힘들어질 것이다.

이러한 이유로 상태 관리가 필요하다.

애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 하는 것이 상태 관리의 목적이다.

튜토리얼 : https://joshua1988.github.io/web-development/vuejs/vuex-start/

공식 사이트 : https://vuex.vuejs.org/en/intro.html

뷰의 반응성 (Vue Reactivity)

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

뷰의 반응성을 이해하면

• 프레임워크 내부적으로 화면을 그리는 방법
• 가상 돔이 동작하는 방법
• 화면을 빠르게 그리기 위해 브라우저에 부하를 주지 않고 돔을 추가-삭제하는 방법

을 익힐 수 있다.

데이터가 변경되었을 때 뷰의 화면 갱신

• 뷰로 애플리케이션을 구현하기 위해 인스턴스 생성
• 인스턴스 생성시 data 속성에 정의된 객체들은 특정 변환 작업을 거친다.
  • 라이브러리에서 data에 정의된 모든 속성을 getter, setter 형태로 변환 (뷰 인스턴스에 정의해 놓은 data 속성에 변화가 생길 때 뷰에서 감지하기 위해 라이브러리 내부적으로 필요)

참고 : Reactivity in Depth | Vue.js

CSR vs SSR

웹 페이지가 브라우저에 로딩되는 순서는 다음과 같다.

• 브라우저에 url 입력
• 서버에 해당 페이지를 요청
• 서버에서 페이지 전송
• 브라우저가 페이지를 그림

클라이언트 사이드 렌더링이란 웹 페이지를 화면에 그릴 때 화면을 그리는 동작을 클라이언트(브라우저)에서 수행하는 것을 의미한다. 서버 사이드 렌더링은 완벽히 그려진 HTML 페이지를 브라우저에서 받는 것을 의미한다.

뷰 공식 사이트 서버 사이드 렌더링 : https://ssr.vuejs.org/en/

서버 사이드 렌더링 라이브러리 Nuxt.js : https://nuxtjs.org/

뷰 개발을 위한 웹팩

웹팩이란

웹팩은 모듈 번들러라고 불린다. 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해주는 변환도구로서 즉, 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해주는 변환도구이다.

애플리케이션 동작과 관련된 여러 개의 파일등르 1개의 자바스크립트 파일 안에 다 넣어 버리고, 해당 자바스크립트 파일만 로딩해도 웹 앱 이 돌아가게하자는 취지를 가지고 있다.

왜 1개의 파일에 담는지

웹 앱의 로딩 속도를 향상시킬 수 있다.

일반적으로 웹 페이지를 브라우저에 나타내기 위해 웹 화면을 구성할 떼 화면 구성에 필요한 js, css, img마다 서버로 보내는 HTTP 요청이 발생한다. 따라서 HTTP 네트워크 요청 숫자가 늘어나면 늘어날수록 웹 화면 로딩 시간은 길어지게된다.

주요 속성

• entry : 웹팩으로 빌드할 대상 파일을 지정하는 속성, 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다.
• output : 웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성
• loader : 웹팩으로 빌드할 때 HTML, CSS, PNG 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성
• plugin : 웹팩으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성, 결과물의 사이즈를 줄이거나 결과물을 기타 CSS, HTML 파일로 분리하는 기능 등이 있다.
• resolve : 웹팩으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성, 특정 라이브러리를 로딩할 때 버전은 어떤 걸로 할지, 파일 경로는 어디로 지정하는지 등을 정의한다.

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

웹팩 설정 파일의 변화를 감지하여 빠르게 웹팩을 빌드할 수 있도록 지원하는 유틸리티이자 Node.js 서버. 웹팩 데브 서버는 웹팩 설정 파일의 내용이 변경되면 브라우저 화면을 자동으로 새로 고침하고, 바로 다시 웹팩으로 빌드하는 기능을 갖고 있다. 따라서 웹팩으로 화면을 빠르게 제작하고자 할 때 유용하게 사용할 수 있다.

npm run dev

npm run dev 을 실행하면 아래와 같은 결과가 출력된다.

웹팩을 빌드하는 명령어인 npm run build를 사용하지 않고도 웹 팩으로 빌드한 결과물을 실행하고 있는 것처럼 동작한다. npm run build 명령어로 /dist/라는 웹팩 빌드 결과물을 만들지 않아도 웹팩 데브 서버는 빌드한 파일을 파일 시스템에 저장하지 않고 컴퓨터 메모리에만 저장하기 때문에 파일 시스템 상에서는 빌드 파일을 확인할 수 없다.

이렇게 하는 이유는 파일 시스템에 파일을 쓰고 읽는 시간보다 메모리에 저장하고 읽는 시간이 더 빠르기 때문이다.

그래서 웹팩 데브 서버를 인 메모리 기반이라고 한다.

webpack-simple 프로젝트의 웹팩 설정 파일 분석

뷰 애플리케이션을 실행하기 위해 npm run dev 명령어를 입력했을 때 webpack.config.js 파일에 정의된 설정에 따라 .vue 파일을 포함한 기타 파일들이 웹팩으로 빌드가 된다.

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

ouput 속성에서 사용할 노드 path 라이브러리와 웹팩 플러그인에서 사용할 node_modules의 웹팩 라이브러리를 node_modules 폴더에서 로딩하여 path, webpack에 각각 저장한다

// 파일 경로와 웹팩 라이브러리 로딩
var path = require('path')
var webpack = require('webpack')

✅ entry 속성

웹팩으로 빌드할 파일을 src 폴더 밑의 main.js 파일로 지정한다. main.js 파일에 정의한 내용에 따라 애플리케이션의 구성 요소 및 파일들이 웹팩으로 번들링된다.

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

✅ output 속성

웹팩으로 빌드를 하고 난 결과물 파일의 위치와 이름을 지정한다. 결과물 파일 위치는 dist/build.js이다.

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

✅ module 속성

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

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },

✅ resolve 속성

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

웹팩으로 빌드할 때 뷰 라이브러리의 여러 유형 중 어떤 걸 선택할지 지정한다. 여기서 설정된 vue.esm.js는 최신 웹팩 버전과 사용할 수 있는 full 버전의 라이브러리를 의미하며 이렇게 별도로 설정하지 않으면 런타임 버전인 vue.runtime.esm.js를 사용한다.

devServer 속성

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

• historyApiFallback 속성은 클라이언트 사이드 라우팅인 뷰 라우터와 함께 사용하기 위해 true로 지정한다.
• noInfo 속성은 처음 서버를 시작할 때만 웹팩 빌드 정보를 보여주고, 이후 변경 시에는 빌드 정보를 보여주지 않는다.
• overlay 속성은 웹팩으로 빌드할 때 오류가 있으면 브라우저 화면 전체에 오류를 표시한다.

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

performance 속성

웹팩으로 빌드한 파일의 크기가 250kb를 넘으면 경고 메시지를 표시할지를 설정한다. hints가 false이므로 크기와 관계 없이 경고가 표시되지 않는다.

devtool 속성

웹팩으로 빌드된 파일로 웹 앱을 구동했을 때 개발자 도구에서 사용할 디버깅 방식을 지정한다. https://webpack.js.org/configuration/devtool/

에서 옵션들을 확인할 수 있다.

✅ 배포할 때 옵션

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

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
    })
  ])
}

빌드 과정

main.js파일에서 App.vue 파일과 Vue.js 라이브러리를 불러와서 애플리케이션을 동작시키고 App.vue에서 logo.png 파일을 이용하여 웹 페이지를 생성하는 구조

• 웹팩으로 빌드할 때 파일 간의 관계에 따라 build.js 파일을 생성
• 생성된 build.js는 애플리케이션 구조대로 파일 간의 순서가 설정되어 있음
• index.html 파일에서 웹팩으로 빌드한 build.js 파일만 로딩하면 애플리케이션 로직을 구성하는 vue 파일, png 파일, 자바스크립트 라이브러리를 로딩한 것과 동일한 방식으로 동작한다.