{"id":38318,"date":"2024-11-01T17:17:32","date_gmt":"2024-11-01T17:17:32","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38318"},"modified":"2024-11-26T06:44:39","modified_gmt":"2024-11-26T06:44:39","slug":"express-%ea%b0%9c%eb%b0%9c-%ea%b0%95%ec%a2%8c-%eb%94%94%eb%b2%84%ea%b9%85-%ea%b8%b0%eb%b2%95-%eb%b0%8f-%eb%8f%84%ea%b5%ac-node-js-inspector-vscode-debugger","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38318\/","title":{"rendered":"Express \uac1c\ubc1c \uac15\uc88c, \ub514\ubc84\uae45 \uae30\ubc95 \ubc0f \ub3c4\uad6c (Node.js Inspector, VSCode Debugger)"},"content":{"rendered":"

<\/p>\n

Node.js \uc0dd\ud0dc\uacc4\uc5d0\uc11c Express<\/strong> \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uac00\uc7a5 \uc778\uae30 \uc788\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uae30\ub2a5\uacfc \uc0dd\ud0dc\uacc4\uc758 \uc9c0\uc6d0 \ub355\ubd84\uc5d0 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 Express\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6f9 \uc11c\ubc84\ub97c \uad6c\ucd95\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc11c\ubc84\uac1c\ubc1c\uc5d0\uc11c \ubc1c\uc0dd\ud560 \uc218 \uc788\ub294 \ubc84\uadf8\ub294 \ud56d\uc0c1 \uc874\uc7ac\ud558\uba70, \uc774\ub97c \ud6a8\uacfc\uc801\uc73c\ub85c \ucc3e\uc544\ub0b4\uace0 \uc218\uc815\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Node.js Inspector<\/strong>\uc640 VSCode Debugger<\/strong>\ub97c \uc911\uc2ec\uc73c\ub85c Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub514\ubc84\uae45\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\ub514\ubc84\uae45\uc774\ub780?<\/h2>\n

\ub514\ubc84\uae45\uc740 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c \uacfc\uc815\uc5d0\uc11c \ud504\ub85c\uadf8\ub7a8\uc758 \ucf54\ub4dc, \uc54c\uace0\ub9ac\uc998, \uc2dc\uc2a4\ud15c \ub4f1\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc624\ub958\ub098 \ubb38\uc81c\ub97c \ucc3e\uc544 \uc218\uc815\ud558\ub294 \uacfc\uc815\uc744 \ub9d0\ud569\ub2c8\ub2e4. \uc774\ub294 \uac1c\ubc1c\uc790\uc758 \ucf54\ub4dc \ud488\uc9c8\uc744 \ub192\uc774\uace0, \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub354 \ub098\uc740 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 \ud544\uc218\uc801\uc778 \uacfc\uc815\uc785\ub2c8\ub2e4.<\/p>\n

Express\uc5d0\uc11c\uc758 \ub514\ubc84\uae45 \uae30\ubc95<\/h2>\n

Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub514\ubc84\uae45\ud558\ub294 \ubc29\ubc95\uc5d0\ub294 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc73c\uba70, \uadf8 \uc911\uc5d0\uc11c\ub3c4 Node.js Inspector\uc640 VSCode Debugger\uac00 \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uac01\uac01\uc758 \ub3c4\uad6c\ub97c \uc774\uc6a9\ud560 \ub54c\uc758 \ud2b9\uc9d5\uacfc \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

Node.js Inspector<\/h3>\n

Node.js Inspector<\/strong>\ub294 Chrome \uac1c\ubc1c\uc790 \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec Node.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub514\ubc84\uae45\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\ud558\uae30 \uac04\ud3b8\ud558\uace0, \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec \ub9ce\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uc120\ud638\ub429\ub2c8\ub2e4.<\/p>\n

Node.js Inspector \uc0ac\uc6a9\ud558\uae30<\/h4>\n
    \n
  1. \uc11c\ubc84 \uc2e4\ud589\ud558\uae30<\/strong>: Node.js Inspector\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc544\ub798\uc640 \uac19\uc774 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n
    node --inspect index.js<\/code><\/pre>\n
  2. Chrome\uc5d0\uc11c \uac1c\ubc1c\uc790 \ub3c4\uad6c \uc5f4\uae30<\/strong>: Chrome \ube0c\ub77c\uc6b0\uc800\ub97c \uc5f4\uace0 \uc8fc\uc18c\ucc3d\uc5d0 chrome:\/\/inspect<\/code>\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n
  3. \uc6d0\uaca9 \ub514\ubc84\uae45 \uc138\uc158 \ucd94\uac00<\/strong>: Configure...<\/code> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uace0 localhost:9229<\/code>\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n
  4. \ub514\ubc84\uae45 \uc138\uc158 \uc2dc\uc791<\/strong>: “Remote Target” \ubaa9\ub85d\uc5d0\uc11c \ub514\ubc84\uae45\ud558\uace0\uc790 \ud558\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n
  5. \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \uc124\uc815<\/strong>: \ucf54\ub4dc\uc5d0\uc11c \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uac00\ub2a5\uc131\uc774 \uc788\ub294 \ubd80\ubd84\uc5d0 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8\ub97c \uc124\uc815\ud55c \ud6c4, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n
  6. \ub514\ubc84\uae45 \uc9c4\ud589<\/strong>: \ucf54\ub4dc\uac00 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8\uc5d0\uc11c \uba48\ucd94\uba74, \ubcc0\uc218 \uac12\uc744 \ud655\uc778\ud558\uace0 \ud638\ucd9c \uc2a4\ud0dd\uc744 \ud0d0\uc0c9\ud558\uba74\uc11c \ubb38\uc81c\ub97c \ucc3e\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ol>\n
    Node.js Inspector \uc608\uc81c<\/h4>\n
    \ub2e4\uc74c\uc740 Node.js Inspector\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c Express \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub514\ubc84\uae45\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
    const express = require('express');\n    const app = express();\n\n    app.get('\/', (req, res) => {\n        let message = 'Hello, World!';\n        console.log(message);\n        res.send(message);\n    });\n\n    app.listen(3000, () => {\n        console.log('Server running on http:\/\/localhost:3000');\n    });<\/code><\/pre>\n
    \uc704\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud55c \ud6c4, Node.js Inspector\ub97c \uc124\uc815\ud558\uc5ec \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8\ub97c console.log(message);<\/code> \uc904\uc5d0 \ucd94\uac00\ud55c \ud6c4 \uc2e4\ud589\ud558\uba74, \ucf54\ub4dc\uac00 \uc911\ub2e8\ub418\uace0 \ubcc0\uc218 message<\/code>\uc758 \uac12\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    VSCode Debugger<\/h3>\n
    Visual Studio Code<\/strong>\ub294 \uc720\uc6a9\ud55c \ub0b4\uc7a5 \ub514\ubc84\uac70\ub97c \uc81c\uacf5\ud558\uc5ec Node.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub514\ubc84\uae45\ud558\ub294 \ub370 \ub9e4\uc6b0 \uc801\ud569\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 UI\uc640 \uc26c\uc6b4 \uc124\uc815 \ub355\ubd84\uc5d0 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc774 VSCode\ub97c \uc774\uc6a9\ud574 \ub514\ubc84\uae45\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
    VSCode Debugger \uc0ac\uc6a9\ud558\uae30<\/h4>\n
      \n
    1. VSCode \uc5f4\uae30<\/strong>: VSCode\ub97c \uc2e4\ud589\ud558\uace0 \ud504\ub85c\uc81d\ud2b8\ub97c \uc5fd\ub2c8\ub2e4.<\/li>\n
    2. \ub7f0 & \ub514\ubc84\uadf8 \ud0ed \uc120\ud0dd<\/strong>: \uc67c\ucabd \uc0ac\uc774\ub4dc \ubc14\uc5d0\uc11c \ub7f0 & \ub514\ubc84\uadf8 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n
    3. launch.json \uc124\uc815\ud558\uae30<\/strong>: create a launch.json file<\/code>\ub97c \ud074\ub9ad\ud558\uc5ec \uc544\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n
      {\n            \"version\": \"0.2.0\",\n            \"configurations\": [\n                {\n                    \"type\": \"node\",\n                    \"request\": \"launch\",\n                    \"name\": \"Launch Program\",\n                    \"program\": \"${workspaceFolder}\/index.js\"\n                }\n            ]\n        }<\/code><\/pre>\n
    4. \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8 \uc124\uc815\ud558\uae30<\/strong>: \ucf54\ub4dc\uc5d0\uc11c \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ud074\ub9ad\ud558\uc5ec \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/li>\n
    5. \ub514\ubc84\uae45 \uc2dc\uc791\ud558\uae30<\/strong>: F5<\/code> \ud0a4\ub97c \ub20c\ub7ec \ub514\ubc84\uae45\uc744 \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n
      VSCode Debugger \uc608\uc81c<\/h4>\n
      \uc544\ub798\uc758 \ucf54\ub4dc\ub294 Express \uc11c\ubc84\uc640 VSCode \ub514\ubc84\uac70\ub97c \uc0ac\uc6a9\ud558\ub294 \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
      const express = require('express');\n    const app = express();\n\n    app.get('\/api\/data', (req, res) => {\n        let data = { id: 1, name: 'John Doe' };\n        console.log('Fetching data:', data);\n        res.json(data);\n    });\n\n    app.listen(3000, () => {\n        console.log('Server running on http:\/\/localhost:3000');\n    });<\/code><\/pre>\n
      \uc704\uc758 \uc608\uc81c\ub97c \uc2e4\ud589\ud558\uace0, console.log('Fetching data:', data);<\/code> \uc904\uc5d0 \ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8\ub97c \uc124\uc815\ud55c \ud6c4 \ub514\ubc84\uae45\uc744 \uc2dc\uc791\ud558\uba74 \ud638\ucd9c \uc2dc \ubd88\ub7ec\uc624\ub294 \ub370\uc774\ud130\uc758 \uac12\uc744 \ucd94\uc801\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
      \ub514\ubc84\uae45\uc744 \ub354\uc6b1 \ud6a8\uc728\uc801\uc73c\ub85c \ud558\ub294 \uae30\ubc95<\/h2>\n
      \ub514\ubc84\uae45 \uacfc\uc815\uc5d0\uc11c \ud6a8\uc728\uc131\uc744 \ub192\uc774\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \ucd94\uac00 \uae30\ubc95\ub4e4\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n