vue3 [WDS] Disconnected! 해결방법 [해결완료]

코딩애플님의 강의를 보고 따라 했다.

https://www.youtube.com/watch?v=0BbF7UxKKvg&t=303s 

다 좋은데!!!!!

왜 항상 이런 시련은 나에게만 오는 것일까?

해당 문제는 Vue의 장점이라고 하는 자동 렌더링이 안 되는 문제였다.

---

해당 문제를 확인하기 위해서 F12 크롬 DevTool을 열었다.

이것 외에 다양한 문구가 나왔는데

[WDS] Disconnected!

ERROR_SSL_PROTOCOL_ERROR

이런 문구가 나왔다.

WDS는 

Webpack Development Server 라고 하는데 이 부분이 문제가 있는 것 같았다.

해당 문제를 해결하기 위해서 방화벽도 건드려보고 백신도 건드려봤는데

다 안되던 와중

https://tagmerge.com/question/vue-cli-hot-reload-suddenly-not-working-in-browsers

vue.js - Vue cli 3 hot reload suddenly not working in browsers - TagMerge

이 글을 만났다..... 그저 빛...

package.json에서

"serve": "vue-cli-service serve",
// to
"serve": "vue-cli-service serve --host localhost",

또는

root에 vue.config.js파일을 만들어주고

module.exports = {
  devServer: {
    host: 'localhost'
  }
}

를 넣어주면 된다.

 

그럼 자동 렌더링 끝~~~~

왜 나에게만 이런 시련이 ㅠㅠ 했지만

포기만 하지 않으면 된다!!