๐Ÿ› ๏ธ ๋””๋ฒ„๊น…

Parcel์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์†Œ์Šค๋งต์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์—, Parcel์„ ์ด์šฉํ•˜์—ฌ ๋””๋ฒ„๊น…์„ ์„ค์ •ํ•˜๋ฉด ๋Œ€๋ถ€๋ถ„์˜ ์˜์—ญ์„ ์ตœ์†Œํ•œ์˜ ๋…ธ๋ ฅ์œผ๋กœ ๋””๋ฒ„๊น… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ

์†Œ์Šค๋งต์ด ๊ฐ€๋Šฅํ•˜๋ฉด, ๋ถ€๊ฐ€์ ์ธ ์„ค์ •์ด ํ•„์š”์—†์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํด๋” ๊ตฌ์„ฑ์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ src
    โ”œโ”€โ”€ index.html
    โ””โ”€โ”€ index.ts

index.ts๋Š” ๋‹ค์Œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

const variable: string = "Hello, World!";

document.getElementById("greeting").innerHTML = variable;

๊ทธ๋ฆฌ๊ณ  index.html์€ ๋‹ค์Œ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <title>Chrome Debugging Example</title>
  </head>
  <body>
    <h1 id="greeting"></h1>
    <script src="./index.ts"></script>
  </body>
</html>

(package.json์—๋Š” parcel-bundler๋งŒ ์„ค์น˜๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.)

์ด ์„ค์ •์œผ๋กœ, parcel src/index.html์„ ์„ค์ •ํ•˜๊ณ , ์†Œ์Šค์ฝ”๋“œ์—์„œ breakpoint๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฌ๋กฌ Breakpoint ์˜ˆ์‹œ

Visual Studio code

Chrome ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ์„ค์ •๊ณผ ์œ ์‚ฌํ•œ ํด๋” ๋ฐ ํŒŒ์ผ ๊ตฌ์„ฑ์„ ๊ฐ€์ •ํ•˜๋ฉด, launch.json์„ Debugger for Chrome ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

{
  // ๊ฐ€๋Šฅํ•œ ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ธํ…”๋ฆฌ์„ผ์Šค๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  // ๊ธฐ์กด ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋งˆ์šฐ์Šค๋ฅผ ์†์„ฑ ์œ„์— ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค.
  // ๋” ๋งŽ์€ ์ •๋ณด๋ฅผ ๋ณด์‹œ๋ ค๋ฉด https://go.microsoft.com/fwlink/?linkid=830387 ์„ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:1234",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "../*": "${webRoot}/*"
      }
    }
  ]
}

์„ค์ •ํ•œ ๋‹ค์Œ, index.html์„ ์ง„์ž…์  (์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ)๋กœ ์„ค์ •ํ•˜์—ฌ Parcel ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

$ parcel src/index.html

๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„๋Š” ๋””๋ฒ„๊ทธ ํŒจ๋„์—์„œ ๋…น์ƒ‰ ํ™”์‚ดํ‘œ๋ฅผ ํด๋ฆญํ•˜์—ฌ ๋””๋ฒ„๊น… ํ”„๋กœ์„ธ์Šค๋ฅผ ์‹คํ–‰์‹œํ‚ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ œ ์ฝ”๋“œ์—์„œ breakpoint๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์ข… ๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

VSCode ๋””๋ฒ„๊น… ์˜ˆ์‹œ

๋ฌธ์„œ์˜ ๊ฐœ์„ ์„ ๋„์™€์ฃผ์„ธ์š”

๋น ์ง„์ ์ด ์žˆ๊ฑฐ๋‚˜ ๋ช…ํ™•ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, ์›น ์‚ฌ์ดํŠธ ์ €์žฅ์†Œ์— ์ด์Šˆ๋ฅผ ์ œ๊ธฐํ•ด ์ฃผ์‹œ๊ฑฐ๋‚˜ ํŽ˜์ด์ง€๋ฅผ ์ˆ˜์ •ํ•ด ์ฃผ์„ธ์š”..