리액트)리액트 vscode에서 디버깅 설정

리액트에서 디버깅 모드를 설정하고, 실행하는 방법
 
1)VSCODE 확장 프로그램에서 
JavaScript Debugger Companion Extension
를 설치한다.

 
 
2)리액트를 설치하고, 최상위 폴더에 .vscode 폴더를 만들고, 폴더 안에 launch.json 파일을 만든다.

 
 
3) launch.json에 입력.
아래의 세팅은 디버깅 모드 실행시,
url이 localhost:3000인 새로운 Chrome창이 열리면서, terminal창에 npm run dev 명령어가 입력되도록 하는 세팅이다.

{

  "version": "0.2.0",

  "configurations": [

    {

      "name": "Chrome",

      "type": "chrome",

      "request": "launch",

      "url": "http://localhost:3000",

      "webRoot": "${workspaceFolder}",

      "sourceMap": true,

      "trace": true

    },

    {

      "name": "Node",

      "type": "node-terminal",

      "request": "launch",

      "command": "npm run dev"

    }

  ],

  "compounds": [

    {

      "name": "Debug",

      "configurations": ["Chrome", "Node"]

    }

  ]

}

 
4) Run And Bebug 탭에서 초록색 화살표를 눌러서 디버깅 모드를 실행한다.

 
참고로, launch.json에서 백엔드로 C#이나, node등을 추가로 설정해서 리액트와 동시에 디버깅하는 것도 가능하다.