Vue Loader

https://vue-loader-v14.vuejs.org/kr/features/scoped-css.html

Scoped CSS

<style> 태그가 scoped 속성을 가지고있을 때, CSS는 현재 컴포넌트의 엘리먼트에만 적용

`scoped` option

scoped option은 해당 컴포넌트에만 영향을 준다
- 하지만, class 지정은 해야한다
  - 그렇게 해야 속도가 빠르다!
    - why?
      - browser 가 css select 를 rendering 하는 방식 때문에 class 를 지정하지 않으면 전체를 탐색함

Local style 과 global style

하나의 컴포넌트 안에 scoped style과 그렇지 않은 style을 동시에 사용할 수 있다

ex)
```
<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>
```

Child component의 Root element

scoped 속성을 사용하면 부모 컴포넌트의 style은 자식 component에 영향을 미치지 않는다
- 하지만!
  - 자식 component의 root node 는 영향을 받는다!
    - 자식 component의 root element를 바꿈으로써 layout을 설정하기 위한 목적

Deep Selectors

`>>>` Combinator

scoped style을 사용하면서 자식 component에도 영향을 미치려면 >>> combinator 를 사용하면 된다

ex)
```
<style scoped>
.a >>> .b { /* ... */ }
</style>
```

`v-html` 과 `scoped` style

v-html 은 scoped style의 영향을 받지 않는다
- but, deep selector (ex. 바로 위에서 본 >>> combinator) 를 사용하면 style 할 수 있다

+

`v-html` vs `v-text`

: innerHTML과 innerText의 차이 라고 생각하면 된다!

lazy load 란?

component 가 쓰일 때에만 call을 보낸다
- 훨씬 경제적!
빠른 loading이 필요할 때 사용
잘 안가는 곳은 lazy로 설정하자!
- ex) 고객센터