8.중급 지식

개요

• 중급지식에 대한 간단한 설명만을 제공

Vuex

• App 의 상태를 관리하는 라이브러리이다.
• Vuex 의 State 란 Vue 의 data() {} 와 유사하다.
• ex) 로그인시 id 를 제공 받고 이를 전역적으로 사용하면 모든 컴포넌트가 id(State) 를 공유한다.
• 즉, 특정한 data() {} 를 여러 Component 에서 공유하고 있을 때에 이를 State 라고 한다.
• React 에서 가져온 단방향 데이터 흐름에서 최상위 컴포넌트를 통해 하위로 데이터를 넘겨주는 것은 트리구조가 깊으면 깊을 수록 어려운 일이다.
•  이를 해결해기위해 Event Bus 를 사용하는데, 수많은 요청들에 대한 Event Bus 의 흐름을 추적하는(Slueth) 일은 재앙이다.
• 모든 데이터를 중앙에서 관리하여 data() {} 관리를 효율적으로 가져가는 것이 State Management 의 목적이다.
• 느낌 으로는 MSA 에서 MS 사이의 로그나 기록을 추적하는 Slueth 와 이를 보여주는 Zipkin 과 비슷하게 보인다.
• State , Getters , Mutations , Actions 개념과 기능은 넒은 범위를 가지며, 곧 학습 계획에 있으니, 카테고리를 나누어 작성하겠다.

---

Vue Reactivity

• Vue 가 데이터 변화를 감지하였을 시 자동으로 화면을 갱신시킨다.
• Vue Instance 생성 시 data() {} 속성에 정의한 모든 속성을 getter, setter 의 메서드 화 시킨다.
• 이 getter setter 는 Vue 의 반응성을 위해 내부에 기술한 Property 이다.
• 화면 단의 갱신은 watcher 가 한다. 모든 Component 에 존재한다.
• Instance 등록 후 data() {} 가 갱신되면 watcher 가 이를 감지하고 다시 화면을 그리라고 신호한다.
• Vue Instance 생성 시 data() {} 에 반응성을 추가한다. doli0413.tistory.com/713

2.Vue Instance 와 속성, 라이프 사이클

• 즉 Instance 생성 후 data() {} 에 속성을 추가해도 반응성은 생겨나지 않는다.

---

Server Side Rendering & Client Side Rendering

• Server Side Rendering 은 완벽하게 그려진 HTML 페이지를 Server Side 에서 받는 것을 의미한다. JSP 나 Thymeleaf 처럼 템플릿 엔진을 사용하여 응답으로 html 파일을 넘겨주는 형태를 말한다.
• Client Side Rendering 은 다 그려지지 않은 HTML 페이지를 브라우저에서 받아 Front-End Framework 등의 JS 를 이용하여 나머지 부분은 그리는 것을 의미한다.
• 결론적으로 보면 Vue 는 Client Side Rendering 이다.

---

WebPack

• Webpack 은 Module Bundler 이다.
• Module Bundler 란 연관된 파일 ( .vue , .css , .js , .png , .coffee ) 을 해석하여 하나의 JavaScript 파일로 바꿔주는 변환 도구이다.
• 즉 의존관계를 가지는 각 파일들을 분석하여 하나의 파일로 묶는 어마어마한 기능을 가졌다는 것이다. 하나의 파일은 JS 파일이다.
• 보통 Server Side Rendering 방식에서 개발자 도구로 요청을 확인하면, 이미지 등의 필요한 정적자원마다 새로운 요청을 만들어내는 것을 볼 수 있다. 이는 로딩시간을 지연시키는 원인이다.        
• 요청을 줄여 속도와 렌더링 방식에서 좋은 UX 를 가져다주는 것이 Webpack 을 쓰는 이유다.

---

WebPack 에서 지원하는 중요 속성

• entry :  Webpack 으로 빌드할 대상 파일을 지정하는 속성이다. 해당 파일에는 전체 App 로직과 필요한 라이브러리를 로딩하는 로직이 포함된다.

// Root Component << 필요한 컴포넌트, 로직, import 라이브러리 모두 포함되기 때문에 기술
entry: './src/main.js',

• output  : Webpack 으로 빌드한 결과물의 위치, 파일 이름등의 옵션이 기술 된다.

// 결과 물 => dist/build.js

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

• loader : HTML , CSS, PNG 등의 파일을 js 파일로 변환 시키기위해 필요한 설정이 기술 된다.

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      // 바벨 로더는 ES6 문법을 모든 브라우저가 호환할 수 있는 JS 로 변환한다.
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // 이미지를 변환시키는 file-loader
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

• resolve : Webpack 으로 빌드시 해당 파일이 어떻게 해석될지 기술 된다.

resolve: {
    alias: {
    // vue.esm.js 는 최신 Webpack 과 사용할 수 있는 Full 버전 라이브러리 이다.
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  }

• dev-server : Webpack-dev-server 관련 속성이 기술 된다.

devServer: {
	//Vue Router 와 함께 쓰기 위해 true
    historyApiFallback: true,
    // 처음 서버 구동 제외 Webpack 빌드 정보 로깅 안함
    noInfo: true,
    // 에러 발생시 브라우저 화면 전체에 오류 표시
    overlay: true
  },

• performance : Webpack 빌드 파일 크기가 250kb 넘으면 경고 메시지 표시할지 설정

performance: {
    hints: false
  },

• dev-tools : Webpack 으로 빌드시킨 파일로 웹 앱 구동 시 개발자 도구에서 사용할 디버깅 방식 지정

devtool: '#eval-source-map'

• 배포옵션 : 최종적으로 사이트 배포시 App 성능 상향을 위해 추가한 설정정보

if (process.env.NODE_ENV === 'production') {
// 개발자 도구 분석 옵션을 source-map 으로 지정
  module.exports.devtool = '#source-map'
  
  
  // js 파일 크기를 줄이는 Uglify 플러그인 & 환경변수 설정
  
  // 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
    })
  ])
}