2020년 7월 2일 목요일

Vue.js 를 VSCODE 에서 디버그 하기(브레이크 포인트잡기)

Vue.js 를 VSCODE 에서 디버그 하기(브레이크 포인트잡기)

 js 는 브레이트포인트 잡는게 썅. 
 일단 Vue.js (이름참 좃같...) 의 작업을 한다.

"That basically acts as the magic goo that enables the rest of this to work." WTF NUXT!

https://github.com/in28minutes/spring-boot-vuejs-fullstack-examples
예제를 기준으로!

1.프론트쪽 폴더에서 npm run serve 실행
2.프론트쪽 폴더 선택후 VSCODE 에서 실행하면 launch.json 만들라고 하니까 만듬
3.런쳐는 크롬을 띄워서 디버그 해야 되니까 다음과 같이 입력

{
    "version": "0.2.0",
    "configurations": [
     {
        "type": "chrome",
        "request": "launch",
        "name": "[Debug] Vue.js: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
  }
4.브레이크 잡고 확인

어이없는 이런 방식이 맞는가 싶네...

참고.

https://medium.com/@changjoopark/visual-studio-code%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-vue-js-%EC%95%B1-%EB%94%94%EB%B2%84%EA%B9%85%ED%95%98%EA%B8%B0-6a402fefafe

Related Posts:

  • Vue.JS 해볼까나~일단 공식문서 부터..한글로 잘되어 있다 https://kr.vuejs.org/v2/guide/index.html MVVM 방식에 컨포넌트 기능을 살려 재사용성을 높인다라는 건 좋을것 같다 참고 사이트들 http://meetup.toast.com/posts/99 https://vuejs-kr.github.io/ http://blog.naver.com/PostView.nhn?blogId… Read More
  • NuxtJs, VueJs 로 프론트엔드 구축시 정리했던 자료새로운 프로젝트에서 기존의 springboot + thymeleaf 보다 VueJs를 사용하려고 했더니 NuxtJs라는 놈이 있어서 서버구축까지 간단하게 된다는 것을 알게되었다.NextJs라는 ReactJs의 프레임워크를 VueJs로 포팅(?) 했다는 건데 사용법이 매우 간단했다.thymeleaf 는 html에 이런저런 지저분한 자체태그옵션과 문법, 그리고 Jquery 등을 이용해서 정말 구린방식으로… Read More
  • Vujs , Nuxt 를 해보다. Vuejs 와 Nuxtjs 는 문서화가 잘 되어있으니까 그냥 쓰면 되고,컴퍼넌트라는 단위로 만드는 것은 좋으나, 컴퍼넌트에 너무 많은 비지니스 로직이 들어가지 않도록 하는게 좋을거 같다.또 컴퍼넌트에서 직접 서버와 통신하여 자료를 for 로 출력하는것은 테스트를 어렵게 만들기 때문에 되도록 Repositry 를 이용하여 컴퍼넌트에 props 나 mixin 형태로 주입(?) 하는 것이 좋다.… Read More
  • Vue.js 를 VSCODE 에서 디버그 하기(브레이크 포인트잡기)Vue.js 를 VSCODE 에서 디버그 하기(브레이크 포인트잡기) js 는 브레이트포인트 잡는게 썅.  일단 Vue.js (이름참 좃같...) 의 작업을 한다.https://medium.com/js-dojo/debugging-nuxt-js-with-vs-code-60a1a9e75cf6"That basically acts as the magic goo that enables… Read More

0 comments:

댓글 쓰기