17일차

vue를 사용할 때 vue와 vue-template-compiler의 버전을 맞춰줘야만 webpack이 정상적으로 작동한다. 

둘의 버전을 맞춰줬는데

[webpack-cli] Error: Cannot find module 'vue/compiler-sfc'

이러한 에러가 발생했다.

해당 사유는 내 vue버전이 2.6.14였는데 vue가 2버전의 경우에는  vue-loader 16+에서는 사용할수가 없기 때문이다. 

v-bind 를 통해서 파일내 vue state와 연결시킬 수 있다. 

ex) v-bind:class='wating' -> waiting이란 변수를 사용하는 것이 된다.

<style scoped> 를 사용하면 해당 파일내에서만 사용하게된다.

만약 뒤에 scoped를 붙이게되면 #screen[data-v-22c711ee] 이런식으로 클래스 뒤에 식별자가 붙게된다. css는 뒤에서부터 찾아나가기 때문에 이런식으로 붙어도 성능에 영향이 없다.

# css 가 찾아나가는 방식 이해필요

webpack-dev-server : 동적으로 화면이 변하게 한다. --hot 붙이기

그리고 webpack에 publicPath: '경로'를 추가해줘야한다. 

webpack dev server 를 하는데 처음에는 GET / 가 뜨더니 현재는 js파일을 로드 못하고있다. 왜 이럴까... 아무래도 검색하는데 내 버전과 작동하는것이 다른것을 보아 webpack dev server의 버전을 낮춰봐야 할 것 같다.

강의는 4-3까지 수강

https://www.inflearn.com/course/web-game-vue/lecture/23177?tab=note&volume=0.37&speed=1.5&mm=close