Vscode: ๋””๋ฒ„๊ทธ CRA ํ…Œ์ŠคํŠธ๊ฐ€ v1.19์—์„œ ์ž‘๋™ ์ค‘์ง€๋จ

์— ๋งŒ๋“  2017๋…„ 12์›” 15์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: microsoft/vscode

  • VSCode ๋ฒ„์ „ : 1.19
  • OS ๋ฒ„์ „ : Windows 10

์žฌํ˜„ ๋‹จ๊ณ„ :

  1. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging -tests-in-visual-studio-์— ์„ค๋ช… ๋œ๋Œ€๋กœ ์‹œ์ž‘ ๊ตฌ์„ฑ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์•”ํ˜ธ
  2. F5๋กœ ๋””๋ฒ„๊ฑฐ๋ฅผ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ๋””๋ฒ„๊น… ํŒจ๋„์—์„œ ์žฌ์ƒ
  3. ๋””๋ฒ„๊ฑฐ๊ฐ€ test ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹œ์ž‘ํ•˜์ง€ ์•Š๊ณ  ๊ฒฐ๊ตญ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.
  4. ๋ฒ„์ „ 1.18๋กœ ๋กค๋ฐฑ
  5. 1-2 ๋‹จ๊ณ„๋ฅผ ๋”ฐ๋ฅด์‹ญ์‹œ์˜ค.
  6. ๋””๋ฒ„๊ฑฐ๊ฐ€ test ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ณ  ๋””๋ฒ„๊ฑฐ์— ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ  : 1.19์˜ ๋ณ€๊ฒฝ ๋กœ๊ทธ์—๋Š” ๋””๋ฒ„๊น… ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ƒˆ๋กœ์šด ์ถ”๊ฐ€ ์‚ฌํ•ญ์ด ์–ธ๊ธ‰๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging -tests- ์ธ๋น„ ์ฃผ์–ผ ์ŠคํŠœ๋””์˜ค ์ฝ”๋“œ

๋ฐ€์ ‘ํ•œ ๊ด€๋ จ์ด์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฏ€๋กœ Create React App์— ๋™์ผํ•œ ๋ฌธ์ œ๋ฅผ ๊ฒŒ์‹œ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
https://github.com/facebookincubator/create-react-app/issues/3602


ํ™•์žฅ์—†์ด ์žฌํ˜„ : ์˜ˆ

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@amadeogallardo ๊ตฌ์„ฑ์€ ๋ชจ๋“  ๋ฒ„์ „์˜ VS ์ฝ”๋“œ์—์„œ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging -tests-in-visual-studio-code์˜ ์‹œ์ž‘ ๊ตฌ์„ฑ์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค ( ๊ทธ๋Ÿฌ๋‚˜ VS Code์—๋Š” ์ด์ „ ๋ฒ„์ „์—์„œ ๋ฒ„๊ทธ ๊ฐ€ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์šฐ์—ฐํžˆ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.)

  • VS Code๋Š” ์‚ฌ์šฉ์ค‘์ธ node.js ๋ฒ„์ „์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์‚ฝ์ž…ํ•˜๋ฏ€๋กœ "--inspect-brk"๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.
  • "test"๋Š” ๋Ÿฐํƒ€์ž„ ์ธ์ˆ˜๊ฐ€ ์•„๋‹ˆ๋ฉฐ "args"๋ฐฐ์—ด์— ์†ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ ์‹œ๋„ํ•˜์‹ญ์‹œ์˜ค :

{
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "args": [
        "test",
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }

@weinand์˜ ์‹ ์†ํ•œ ๋‹ต๋ณ€์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์œ„์˜ ๊ตฌ์„ฑ์€ VS Code 1.19์—์„œ ์ž˜ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.
์ด์— ๋”ฐ๋ผ ๋ฌธ์„œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด Create React App์˜ ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

@amadeogallardo ๊ตฌ์„ฑ์€ ๋ชจ๋“  ๋ฒ„์ „์˜ VS ์ฝ”๋“œ์—์„œ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰