Vue.js 에서 권장하는 스타일 가이드. 코딩 컨벤션 같은 거랄까..

1. 컴포넌트 이름에 합성어 사용

Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

2. 컴포넌트 데이터

Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

export default {
  data: {
    foo: 'bar'
  }
}

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

// It's OK to use an object directly in a root
// Vue instance, since only a single instance
// will ever exist.
new Vue({
  data: {
    foo: 'bar'
  }
})

3. Props 정의

// This is only OK when prototyping
props: ['status']

props: {
  status: String
}

// Even better!
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

4. v-for에 key 지정

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

5. v-if 와 v-for 를 동시에 사용하지 마세요

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

• 필터링 된 리스트는 users 배열에 active 변경사항이 있는 경우만 다시 계산되므로 필터링이 훨씬 효과적이다.
• v-for="users in activeUsers" 를 사용하면, 렌더링 동안에 active users 만 순회하므로 렌더링이 훨씬 효과적이다.
• 로직과 화면 영역이 분리되어, 유지관리가 훨씬 수월 해 진다.

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

6. 컴포넌트 스타일 스코프

<template>
  <button class="btn btn-close">X</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

<template>
  <button class="button button-close">X</button>
</template>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>

<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>

<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

7. Private 속성 이름

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    _update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $_update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

서론

일반적으로 디스플레이는 1초에 화면을 60번 그린다. 

디스플레이가 1초에 60번 바뀌는데 웹페이지가 1초에 10번 그려진다면, 사용자는 페이지가 느리다고 느낀다. 우리는 이런 현상을 Jank 라고 부른다.

그렇다면 최적화가 필요한데, 웹페이지 렌더링을 최적화 한다는 것은 브라우저가 1초에 60번 렌더링 할 수 있도록 하면 된다.

웹페이지를 회작화 하기 위해 느린 부분을 찾아서 개선해야 한다. 어떤 부분이 느린지를 찾으려면 웹페이지가 화면을 어떻게 그리는지를 알아야 한다.

브라우저 렌더링이란?

브라우저 렌더링 엔진

Webkit (웹킷)

Gecko (게코)

브라우저 렌더링 과정

렌더링 엔진 용어

DOM 트리와 렌더 트리의 관계

Concepts

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Output

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loaders

1. test 속성은 변환되어야하는 파일 또는 파일들을 나타낸다
2. use 속성은 변환을 수행하는데 사용해야만 하는 loader 를 나타낸다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

위의 설정에서 정의된 rules 속성은 두가지 프로퍼티가 요구된다. test 와 use

이것은 webpack의 컴파일러에게 다음과 같은 의미를 전달한다

헤이 webpack~

import 나 require() 의 경로에서 .txt 로 리졸브되는 경로를 발견하면, 

번들에 추가하기 전에 raw-loader 를 사용하여 변환해줘

Plugins

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

위의 예에서는, html-webpack-plugin 이 모든 생성되는 번들을 자동적으로 인젝팅하여 어플리케이션에 HTML 파일을 생성한다.

webpack은 많은 플러그인을 제공한다.

webpack 설정에서 플러그인의 사용은 간단하지만, 좀 더 유심히 봐야할 경우가 있다.  Learn more about them here.

Mode

Learn more about the mode configuration here and what optimizations take place on each value.

Browser Compatibility

webpack

webpack 은 모듈 시스템 지원 외에도, 로더, 빠른 컴파일 속도 등 장점이 많다.

Node.js 가 설치된 환경에서 실행되는데, 사용법은 아래와 같다.

webpack이 설치되면 엔트리 파일 및 번들 파일 형식으로 명령어를 실행하여 모듈을 컴파일 한다.

webpack 은 컴파일 시 엔트리 파일을 시작으로, 디펜던시가 있는 다른 파일들을 엮어서 하나의 번들 파일을 만든다.

이 묶여진 번들 파일을 HTML 에서 로딩하기만 하면 전체 모듈을 사용할 수 있다.

webpack config

로더

참고