{"id":264569,"date":"2022-07-14T06:14:51","date_gmt":"2022-07-14T05:14:51","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/"},"modified":"2022-07-14T06:22:55","modified_gmt":"2022-07-14T05:22:55","slug":"fomo-digest-1","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/ko\/webstorm\/2022\/07\/fomo-digest-1\/","title":{"rendered":"FOMO Digest #1: JavaScript \uac1c\ubc1c\uc744 \uc704\ud55c JetBrains IDE\uc758 \uc0c8\ub85c\uc6b4 \uae30\ub2a5"},"content":{"rendered":"\n<p>JS \uac1c\ubc1c\uc744 \uc704\ud55cJetBrains IDE\uc758\uc0c8\ub85c\uc6b4 \uae30\ub2a5<\/p>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy ez-toc-transparent\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">\ubaa9\ucc28<\/p>\n<p><\/p>\n<\/div>\n<nav>\n<ul class=\"ez-toc-list ez-toc-list-level-1\">\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" title=\"Code With Me\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Code_With_Me\">Code With Me<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" title=\"\uc885\uc18d\uc131 \uc5c5\ub370\uc774\ud2b8\ub97c \uc704\ud55c \uc0c8\ub85c\uc6b4 \uac80\uc0ac\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#New_inspection_for_updating_dependencies\">\uc885\uc18d\uc131 \uc5c5\ub370\uc774\ud2b8\ub97c \uc704\ud55c \uc0c8\ub85c\uc6b4 \uac80\uc0ac<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" title=\"package.json\uc758 'imports' \ubc0f 'exports' \ud544\ub4dc \uc9c0\uc6d0\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Support_for_imports_and_exports_fields_in_packagejson\">package.json\uc758 &#8216;imports&#8217; \ubc0f &#8216;exports&#8217; \ud544\ub4dc \uc9c0\uc6d0<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" title=\"\uae30\ubcf8 HTML \ubbf8\ub9ac\ubcf4\uae30 \ubc0f \uc800\uc7a5 \uc2dc \ub2e4\uc2dc \ub85c\ub4dc\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Built-in_HTML_preview_and_reload_on_save\">\uae30\ubcf8 HTML \ubbf8\ub9ac\ubcf4\uae30 \ubc0f \uc800\uc7a5 \uc2dc \ub2e4\uc2dc \ub85c\ub4dc<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" title=\".js\uc640 .d.ts \ud30c\uc77c \uac04\uc758 \ub9e4\ud551 \uac1c\uc120\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Better_mapping_between_js_and_dts_files\">.js\uc640 .d.ts \ud30c\uc77c \uac04\uc758 \ub9e4\ud551 \uac1c\uc120<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-6\" title=\"private \ud544\ub4dc\uc5d0 \ub300\ud55c \uc774\ub984 \ubcc0\uacbd \ub9ac\ud329\ud130\ub9c1\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Rename_refactoring_for_private_fields\">private \ud544\ub4dc\uc5d0 \ub300\ud55c \uc774\ub984 \ubcc0\uacbd \ub9ac\ud329\ud130\ub9c1<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" title=\"Angular \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c \ub9ac\ud329\ud130\ub9c1\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Extract_Angular_component_refactoring\">Angular \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c \ub9ac\ud329\ud130\ub9c1<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" title=\"Vue \ubc0f React \uc18d\uc131\uc5d0 \ub300\ud55c \ud0c0\uc785 \uac80\uc0ac\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Type_checking_for_Vue_and_React_attributes\">Vue \ubc0f React \uc18d\uc131\uc5d0 \ub300\ud55c \ud0c0\uc785 \uac80\uc0ac<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-9\" title=\"'require' \ubb38 \uc790\ub3d9 \uac00\uc838\uc624\uae30\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Auto-import_for_require_statements\">&#8216;require&#8217; \ubb38 \uc790\ub3d9 \uac00\uc838\uc624\uae30<\/a><\/li>\n<li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-10\" title=\"\uc0c8\ub85c\uc6cc\uc9c4 Deno \ud1b5\ud569\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2022\/05\/fomo-digest-1\/#Reworked_Deno_integration\">\uc0c8\ub85c\uc6cc\uc9c4 Deno \ud1b5\ud569<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<p>FOMO\uc5d0 \ub300\ud574 \ub4e4\uc5b4\ubcf8 \uc801\uc774 \uc788\uc73c\uc2e0\uac00\uc694? Fear Of Missing Out, \ub193\uce58\ub294 \uac83\uc744 \uac71\uc815\ud55c\ub2e4\ub294 \ub73b\uc774\uc8e0. WebStorm \ubc0f \uae30\ud0c0 JetBrains IDE\uc5d0\ub294 \ub108\ubb34 \ub9ce\uc740 \uae30\ub2a5\uc774 \uc788\uc5b4 \uac1c\ubc1c\uc790\ub85c\uc11c\uc758 \uc0b6\uc744 \ub354 \uc27d\uac8c \ub9cc\ub4e4\uc5b4 \uc904 \uc218 \uc788\ub294 \uba4b\uc9c4 \uc0dd\uc0b0\uc131 \ub3c4\uad6c\ub97c \uac04\uacfc\ud558\uae30 \uc27d\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uadf8\ub798\uc11c \uc0c8\ub85c\uc6b4 \ud615\uc2dd\uc758 \ube14\ub85c\uadf8\ub97c \uc900\ube44\ud588\uc2b5\ub2c8\ub2e4. WebStorm\uc758 <strong>\uac00\uc7a5 \uc720\uc6a9\ud55c \uc0dd\uc0b0\uc131 \ud5a5\uc0c1 \uae30\ub2a5<\/strong>\uc744 \ud55c \uacf3\uc5d0 \ubaa8\uc544\ub193\uc740 \uc0c8\ub85c\uc6b4 \uc2dc\ub9ac\uc988\uc778 <strong>FOMO \ub2e4\uc774\uc81c\uc2a4\ud2b8<\/strong>\ub97c \uc18c\uac1c\ud569\ub2c8\ub2e4. \uc774 \ube14\ub85c\uadf8 \uc2dc\ub9ac\uc988\ub294 \ub2e4\ub978 JetBrains IDE\uc5d0\uc11c JavaScript \ubc0f \uad00\ub828 \uae30\uc220\ub85c \uc791\uc5c5\ud558\ub294 \ubd84\ub4e4\uc5d0\uac8c\ub3c4 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4. PhpStorm, IntelliJ IDEA Ultimate, PyCharm Professional, GoLand, Rider, RubyMine \ub4f1, \uc774 \ubaa8\ub4e0 IDE\uc5d0\ub294 \uae30\ubcf8\uc801\uc73c\ub85c, \ub610\ub294 \ubb34\ub8cc \ud50c\ub7ec\uadf8\uc778\uc744 \ud1b5\ud574 WebStorm \uae30\ub2a5\uc774 \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/p>\n<p>\uccab \ubc88\uc9f8 \ub2e4\uc774\uc81c\uc2a4\ud2b8\uc5d0\uc11c\ub294 2021\ub144\uc5d0 \ucd94\uac00\ub41c \uba87 \uac00\uc9c0 \ucd5c\uace0\uc758 \uc0dd\uc0b0\uc131 \ud5a5\uc0c1 \uae30\ub2a5\uc744 \uc54c\ub824 \ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"code_with_me\"><span id=\"Code_With_Me\" class=\"ez-toc-section\"><\/span>Code With Me<\/h2>\n<p>2021\ub144\uc5d0 \uc808\ub300\uc801\uc778 \uc0ac\ub791\uc744 \ubc1b\uc740 (\uae0d\uc815\uc801\uc778 \ud53c\ub4dc\ubc31\uc5d0\uc11c \uc54c \uc218 \uc788\ub4ef\uc774 \uc5ec\ub7ec\ubd84\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\ub85c \ub9ce\uc740 \uad00\uc2ec\uc744 \ubcf4\uc778) \uae30\ub2a5 \uc911 \ud558\ub098\ub294 Code With Me\uc785\ub2c8\ub2e4. \uc774\ub294 \uacf5\ub3d9 \uac1c\ubc1c\uc744 \uc704\ud55c \uc0c8\ub85c\uc6b4 JetBrains \uc11c\ube44\uc2a4\ub85c, \uc774\ub97c \uc774\uc6a9\ud574 IDE\uc5d0\uc11c \ubc14\ub85c \uc2e4\uc2dc\uac04\uc73c\ub85c, \ud568\uaed8 \ucf54\ub529\ud558\uace0 \ub300\ud654\ub97c \ub098\ub20c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc601\uc0c1 \ud1b5\ud654\ub3c4 \uc9c0\uc6d0\ub429\ub2c8\ub2e4!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/05\/CWM_smile_and_wave.png\" alt=\"WebStorm\uc758 Code With Me\" width=\"800\" data-gif-src=\"https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/CWM_smile_and_wave.gif\"><\/p>\n<p>\uc544\uc9c1 \uc0ac\uc6a9\ud574\ubcf4\uc9c0 \uc54a\uc558\ub2e4\uba74 \uc9c0\uae08\uc774 \uc88b\uc740 \uae30\ud68c\uc785\ub2c8\ub2e4. <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/code-with-me.html\" target=\"_blank\" rel=\"noopener\">Code With Me \uc2dc\uc791\ud558\uae30<\/a>\ub77c\ub294 \ubb38\uc11c\ub97c \uc77d\uc5b4\ubcf4\uace0 <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/faq-about-code-with-me.html\" target=\"_blank\" rel=\"noopener\">\uc790\uc8fc \ud558\ub294 \uc9c8\ubb38<\/a>\uc5d0\uc11c \ub2f5\ubcc0\uc744 \ucc3e\uc544\ubcf4\uc138\uc694.<\/p>\n<h2 id=\"new_inspection_for_updating_dependencies\"><span id=\"New_inspection_for_updating_dependencies\" class=\"ez-toc-section\"><\/span>\uc885\uc18d\uc131 \uc5c5\ub370\uc774\ud2b8\ub97c \uc704\ud55c \uc0c8\ub85c\uc6b4 \uac80\uc0ac<\/h2>\n<p>\uc774\uc81c \uc5d0\ub514\ud130\uc5d0\uc11c \ubc14\ub85c npm \ud328\ud0a4\uc9c0\ub97c \ucd5c\uc2e0 \ubc84\uc804\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <em>package.json<\/em> \ud30c\uc77c\uc744 \uc5f4\uace0 \uc5c5\ub370\uc774\ud2b8\uac00 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \ubc84\uc804\uc5d0 \uce90\ub7ff\uc744 \ub193\uc740 \ub2e4\uc74c, <em>\u2325\u23ce \/ Alt+Enter<\/em>\ub97c \ub204\ub974\uace0 <em>\ucd5c\uc2e0 \ubc84\uc804\uc73c\ub85c &#8216;\ud328\ud0a4\uc9c0 \uc774\ub984&#8217; \uc5c5\ub370\uc774\ud2b8<\/em>\ub97c \uc120\ud0dd\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/update-package-in-package-json-quick-fix.png\" alt=\"\ud328\ud0a4\uc9c0 \uc885\uc18d\uc131 \uc5c5\ub370\uc774\ud2b8\" width=\"800\"><\/p>\n<p>\uc5b4\ub5a4 \ud328\ud0a4\uc9c0\uc5d0 \uc5c5\ub370\uc774\ud2b8\uac00 \ud544\uc694\ud55c\uc9c0 \uba85\ud655\ud788 \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \uac80\uc0ac\uc5d0 \ub2e4\uc591\ud55c \uac15\uc870 \ud45c\uc2dc\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac15\uc870 \ud45c\uc2dc\ub97c \ubcc0\uacbd\ud558\ub824\uba74 <em>Preferences(\uae30\ubcf8 \uc124\uc815)\/Settings(\uc124\uc815) | Editor(\uc5d0\ub514\ud130) | Inspections(\uac80\uc0ac) | JavaScript and TypeScript(JavaScript \ubc0f TypeScript) | Imports and dependencies(\uac00\uc838\uc624\uae30 \ubc0f \uc885\uc18d\uc131) | Update package.json dependencies to latest versions(\ucd5c\uc2e0 \ubc84\uc804\uc73c\ub85c package.json \uc885\uc18d\uc131 \uc5c5\ub370\uc774\ud2b8)<\/em>\ub85c \uc774\ub3d9\ud558\uc5ec <em>Severity(\uc2ec\uac01\ub3c4)<\/em> \uc635\uc158\uc744 \uc120\ud0dd\ud558\uc138\uc694. \ub610\ud55c \ud328\ud0a4\uc9c0 \ubc84\uc804 \uc704\ub85c \ub9c8\uc6b0\uc2a4\ub97c \uac00\uc838\uac00\uba74 \ube60\ub978 \uc218\uc815\uc774 \uc81c\uacf5\ub429\ub2c8\ub2e4.<\/p>\n<h2 id=\"support_for_imports_and_exports\"><span id=\"Support_for_imports_and_exports_fields_in_packagejson\" class=\"ez-toc-section\"><\/span>package.json\uc758 &#8216;imports&#8217; \ubc0f &#8216;exports&#8217; \ud544\ub4dc \uc9c0\uc6d0<\/h2>\n<p>JavaScript\uc5d0\uc11c \uc0c1\ub300\uc801 import \ubb38\uc744 \uc0ac\uc6a9\ud558\uba74 \uc9c0\uc800\ubd84\ud574\uc9c8 \uc218 \uc788\uc73c\uba70 \uc77d\uc744 \uc218 \uc788\ub294 import \ubb38\uc774 \ud6e8\uc52c \ub354 \uc2e4\uc6a9\uc801\uc785\ub2c8\ub2e4. Node.js 14.13.0\uc5d0 \ub3c4\uc785\ub41c <code>imports<\/code> \ud544\ub4dc\ub97c \uc0ac\uc6a9\ud558\uba74 \uae30\uc874 \ud328\ud0a4\uc9c0\uc640\uc758 \ucda9\ub3cc \uc704\ud5d8 \uc5c6\uc774 \uc0c1\ub300 \uacbd\ub85c\ub97c \ud53c\ud558\uba74\uc11c \ub2e8\ucd95\ud0a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub85c\uceec \ubaa8\ub4c8\uc744 \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4. IDE\uc5d0\uc11c <code>import<\/code> \ubb38\uc5d0 \ub300\ud574 \ud0d0\uc0c9, \ud574\uacb0, \uc790\ub3d9 \uac00\uc838\uc624\uae30 \ubc0f \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5\uc758 \uc9c0\uc6d0\uc744 \uad6c\ud604\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/05\/import-and-export-field-support.png\" alt=\"Node.js imports \ud544\ub4dc \uc9c0\uc6d0\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/05\/import-and-export-field-support.gif\"><\/p>\n<h2 id=\"built_in_html_preview_and_reload_on_save\"><span id=\"Built-in_HTML_preview_and_reload_on_save\" class=\"ez-toc-section\"><\/span>\uae30\ubcf8 HTML \ubbf8\ub9ac\ubcf4\uae30 \ubc0f \uc800\uc7a5 \uc2dc \ub2e4\uc2dc \ub85c\ub4dc<\/h2>\n<p>HTML \ud398\uc774\uc9c0\ub97c \uc800\uc7a5\ud55c \ub2e4\uc74c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0c8\ub85c \uace0\uccd0 \ubcc0\uacbd \uacb0\uacfc\ub97c \ud655\uc778\ud558\ub294 \uacfc\uc815\uc740 \uc9dc\uc99d\uc2a4\ub7ec\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c IDE\uc5d0\uc11c \ubc14\ub85c \uc815\uc801 HTML \ud30c\uc77c\uc744 \ubbf8\ub9ac \ubcfc \uc218 \uc788\uc5b4 \ud3b8\ub9ac\ud574\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/01\/preview-html-ws.png\" alt=\"HTML \ubbf8\ub9ac\ubcf4\uae30 \uae30\ubcf8 \uc81c\uacf5\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/01\/preview-html-ws.gif\"><\/p>\n<p>\uae30\ubcf8 \uc81c\uacf5\ub418\ub294 \uc6f9 \uc11c\ubc84\ub97c \uc0ac\uc6a9\ud558\uc5ec \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c HTML \ud30c\uc77c\uc744 \ubbf8\ub9ac \ubcfc \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc744 \uc774\uc6a9\ud558\ub824\uba74 \uc0ac\uc6a9\ud560 \ube0c\ub77c\uc6b0\uc800\uc758 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud558\uc138\uc694.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/reload-on-save.png\" alt=\"\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c HTML \ubbf8\ub9ac\ubcf4\uae30\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/reload-on-save.gif\"><\/p>\n<p>\uae30\ubcf8\uc801\uc73c\ub85c, IDE\ub294 HTML \ud30c\uc77c\uc774\ub098 \uc5ec\uae30\uc5d0 \uc5f0\uacb0\ub41c JavaScript \ubc0f \uc2a4\ud0c0\uc77c\uc2dc\ud2b8 \ud30c\uc77c\uc744 \uc800\uc7a5\ud560 \ub54c\ub9c8\ub2e4 \ubbf8\ub9ac\ubcf4\uae30 \ub610\ub294 \ube0c\ub77c\uc6b0\uc800 \ud398\uc774\uc9c0\ub97c \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \ub85c\ub4dc\ud569\ub2c8\ub2e4. \ubcc0\uacbd\ud558\uba74\uc11c \ubcc0\uacbd\ub41c \ub0b4\uc6a9\uc744 \ud655\uc778\ud558\ub824\uba74 \uae30\ubcf8 \ub3d9\uc791\uc744 \ubc14\uafc0 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <em>Preferences(\uae30\ubcf8 \uc124\uc815) \/ Settings(\uc124\uc815) | Tools(\ub3c4\uad6c) | Web Browsers and Preview(\uc6f9 \ube0c\ub77c\uc6b0\uc800 \ubc0f \ubbf8\ub9ac\ubcf4\uae30)<\/em>\uc5d0\uc11c <em>On Save(\uc800\uc7a5 \uc2dc)<\/em> \ub300\uc2e0 <em>On Change(\ubcc0\uacbd \uc2dc)<\/em>\ub97c \uc120\ud0dd\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<h2 id=\"better_mapping_between_js_and_d_ts_files\"><span id=\"Better_mapping_between_js_and_dts_files\" class=\"ez-toc-section\"><\/span>.js\uc640 .d.ts \ud30c\uc77c \uac04\uc758 \ub9e4\ud551 \uac1c\uc120<\/h2>\n<p>\ub610 \ub2e4\ub978 \ud3b8\ub9ac\ud55c \uac1c\uc120\uc774 <code>.js<\/code> \ubc0f <code>.d.ts<\/code> \ud30c\uc77c\uc5d0 \uc774\ub8e8\uc5b4\uc84c\uc2b5\ub2c8\ub2e4. \uc774\ub4e4 \uc0ac\uc774\uc758 \ub9e4\ud551\uc744 \uac1c\uc120\ud558\uace0 \ubcf4\ub2e4 \uac04\ud3b8\ud55c \ud0d0\uc0c9\uc744 \uc704\ud574 \uc5ec\ubc31 \uc544\uc774\ucf58\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2021\/10\/webstorm-2021-3-eap-4\/#better_mapping_between_js_and_d_ts_files\">\uc774 \ube14\ub85c\uadf8 \uac8c\uc2dc\ubb3c<\/a>\uc5d0\uc11c \ubcc0\uacbd \uc0ac\ud56d\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uac70\ub098 \uc544\ub798 GIF\ub97c \ud1b5\ud574 \uc2e4\uc81c \uc5b4\ub5bb\uac8c \uc801\uc6a9\ub418\ub294\uc9c0 \ud655\uc778\ud558\uc138\uc694.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/mapping-between-js-and-dts-files.png\" alt=\".js\uc640 .d.ts \ud30c\uc77c \uac04\uc758 \ub9e4\ud551\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/mapping-between-js-and-dts-files-1.gif\"><\/p>\n<h2 id=\"rename_refactoring_for_private_fields\"><span id=\"Rename_refactoring_for_private_fields\" class=\"ez-toc-section\"><\/span>private \ud544\ub4dc\uc5d0 \ub300\ud55c \uc774\ub984 \ubcc0\uacbd \ub9ac\ud329\ud130\ub9c1<\/h2>\n<p>\uae30\uc220\uc758 \ubcc0\ud654\ub294 \ube60\ub974\uac8c \uc77c\uc5b4\ub0a0 \uc218 \uc788\uae30\uc5d0 JetBrains\ub294 \uc774\ub97c \uc9c0\uc6d0\ud558\uae30 \uc704\ud574 \ucd5c\uc120\uc744 \ub2e4\ud569\ub2c8\ub2e4. \uc790\uc138\ud55c \uad6c\ud604 \ub0b4\uc6a9\uc744 \uc138\uc0c1\uc5d0 \uacf5\uac1c\ud558\uace0 \uc2f6\uc9c0 \uc54a\uc740 \ub54c\ub3c4 \uc788\uc73c\ubbc0\ub85c <code>#<\/code>\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud544\ub4dc\ub97c private\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \uc774\ub984 \ubcc0\uacbd \ub9ac\ud329\ud130\ub9c1\uc744 \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. \ub9ac\ud329\ud130\ub9c1\uc744 \uac1c\uc120\ud558\uc5ec private \ud544\ub4dc\ub97c \uc9c0\uc6d0\ud558\uae30 \uc704\ud574 \uc0ac\uc591\uc5d0 \ub9de\ucdb0 \uad6c\ud604\uc744 \uc870\uc815\ud588\uc2b5\ub2c8\ub2e4. IDE\ub294 \ub610\ud55c \uc774 \uad6c\ubb38\uc744 \uc774\ud574\ud558\uace0 \ud074\ub798\uc2a4 \uc678\ubd80\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 private \ud074\ub798\uc2a4 \uba64\ubc84\ub97c \ub9cc\ub4e4 \ub54c \uacbd\uace0\ub97c \ubcf4\ub0c5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/rename-refactoring-private-class-members.png\" alt=\"private \ud544\ub4dc\uc5d0 \ub300\ud55c \uc774\ub984 \ubcc0\uacbd \ub9ac\ud329\ud130\ub9c1\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/rename-refactoring-private-class-members.gif\"><\/p>\n<h2 id=\"extract_angular_component_refactoring\"><span id=\"Extract_Angular_component_refactoring\" class=\"ez-toc-section\"><\/span>Angular \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c \ub9ac\ud329\ud130\ub9c1<\/h2>\n<p>Vue\uc640 React\uc5d0\uc11c \uc774\ubbf8 \ud55c\ub3d9\uc548 <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/specific-javascript-refactorings.html#ws_js_refactoring_extract_vue_component\" target=\"_blank\" rel=\"noopener\">\uad6c\uc131 \uc694\uc18c\ub97c \ucd94\ucd9c<\/a>\ud558\ub294 \uc635\uc158\uc744 \uc81c\uacf5\ud574 \uc654\uc2b5\ub2c8\ub2e4. \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c \ub9ac\ud329\ud130\ub9c1\uc744 \uc0ac\uc6a9\ud558\uba74 \ubcf5\uc0ac \ubc0f \ubd99\uc5ec\ub123\uae30 \uc5c6\uc774 \uae30\uc874 \uad6c\uc131 \uc694\uc18c\uc5d0\uc11c \uc0c8 \uad6c\uc131 \uc694\uc18c\ub97c \ucd94\ucd9c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc791\ub144\uc5d0\ub3c4 \uc774\ubbf8 <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/angular.html#ws_angular_component_extract\" target=\"_blank\" rel=\"noopener\">Angular\ub97c \uc704\ud55c \uc720\uc0ac\ud55c \uae30\ub2a5<\/a>\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4. \uc2dc\ub3c4\ud574 \ubcf4\ub824\uba74 \ucd94\ucd9c\ud558\ub824\ub294 Angular \uad6c\uc131 \uc694\uc18c\ub97c \uc120\ud0dd\ud558\uace0 \ub9c8\uc6b0\uc2a4 \uc624\ub978\ucabd \ubc84\ud2bc\uc73c\ub85c \ucee8\ud14d\uc2a4\ud2b8 \uba54\ub274\ub97c \uc5f0 \ub2e4\uc74c, <em>Refactor(\ub9ac\ud329\ud130\ub9c1) | Extract Component(\uad6c\uc131 \uc694\uc18c \ucd94\ucd9c)<\/em>\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. \ub610\ub294 <em>^T \/ Ctrl+Alt+Shift+T<\/em>\ub97c \ub204\ub974\uace0 <em>Refactor This(\ub2e4\uc74c\uc744 \ub9ac\ud329\ud130\ub9c1)<\/em> \ud31d\uc5c5\uc5d0\uc11c <em>Extract Component(\uad6c\uc131 \uc694\uc18c \ucd94\ucd9c)<\/em>\ub97c \uc120\ud0dd\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/04\/extract-angular-component.png\" alt=\"Angular \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c \ub9ac\ud329\ud130\ub9c1\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/04\/extract-angular-component.gif\"><\/p>\n<h2 id=\"type_checking_for_vue_and_react_attributes\"><span id=\"Type_checking_for_Vue_and_React_attributes\" class=\"ez-toc-section\"><\/span>Vue \ubc0f React \uc18d\uc131\uc5d0 \ub300\ud55c \ud0c0\uc785 \uac80\uc0ac<\/h2>\n<p>\ud655\uc2e4\ud788 \uc791\ub3d9\ud558\uc9c0 \uc54a\uc744 \ubd80\ubd84\uc5d0 \ub300\ud574 \ubbf8\ub9ac \uc54c \uc218 \uc788\uc73c\uba74 \ud070 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4. \ud2b9\ud788 \uc798\ubabb\ub41c \ud0c0\uc785 \ud504\ub85c\ud37c\ud2f0\ub97c \uc0ac\uc6a9\ud558\ub824\uace0 \ud560 \ub54c\ub294 \ub354\uc6b1 \uadf8\ub807\uc2b5\ub2c8\ub2e4. React\uc640 Vue\uc758 \ud504\ub85c\ud37c\ud2f0\uc5d0 \ubc14\uc778\ub529\ub41c \ud45c\ud604\uc2dd\uc5d0 \uc798\ubabb\ub41c TypeScript \ud0c0\uc785\uc774 \uc0ac\uc6a9\ub41c \uacbd\uc6b0 IDE\uac00 \uc774\ub97c \uc54c\ub824\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/vue-typescript-type-checking.png\" alt=\"Vue \ubc0f React \uc18d\uc131\uc5d0 \ub300\ud55c \ud0c0\uc785 \uac80\uc0ac\" width=\"800\"><\/p>\n<h2 id=\"auto_import_for_require_statements\"><span id=\"Auto-import_for_require_statements\" class=\"ez-toc-section\"><\/span>&#8216;require&#8217; \ubb38 \uc790\ub3d9 \uac00\uc838\uc624\uae30<\/h2>\n<p>\ub9e4\ubc88 \ucc38\uc870\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc218\ub3d9\uc73c\ub85c \uac00\uc838\uc624\uba74 \uc791\uc5c5\uc758 \ud750\ub984\uc774 \uae68\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc544\uc2dc\ub2e4\uc2dc\ud53c WebStorm\uc740 ES6 \ubaa8\ub4c8\uc5d0\uc11c \uc2ec\ubcfc\uc744 \uc644\uc131\ud560 \ub54c \ub204\ub77d\ub41c import \ubb38\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4(\ub2e4\ub978 JetBrains IDE\uc640 \ub9c8\ucc2c\uac00\uc9c0). \uc774\uc81c CommonJS \ubaa8\ub4c8\uc5d0\uc11c\ub3c4 \ucf54\ub4dc \uc644\uc131 \uc2dc <code>require<\/code> \ubb38\uc744 \uc790\ub3d9\uc73c\ub85c \uc0bd\uc785\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/auto-imports-for-common-js.png\" alt=\"\uc790\ub3d9 \uac00\uc838\uc624\uae30 \" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/auto-imports-for-common-js.gif\"><\/p>\n<h2 id=\"reworked_deno_integration\"><span id=\"Reworked_Deno_integration\" class=\"ez-toc-section\"><\/span>\uc0c8\ub85c\uc6cc\uc9c4 Deno \ud1b5\ud569<\/h2>\n<p>JavaScript\uc640 TypeScript\ub97c \uc704\ud55c \uc0c8\ub85c\uc6b4 \ub7f0\ud0c0\uc784\uc778 Deno\ub294 2020\ub144\uc5d0 \ub9b4\ub9ac\uc2a4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. JetBrains\ub294 \uc774\uc5d0 \ub300\ud55c \uc9c0\uc6d0\uc744 \uc989\uc2dc \ucd94\uac00\ud558\uc600\uace0, \uc791\ub144\uc5d0\ub294 \uc7ac\uc791\uc5c5\uc744 \uc9c4\ud589\ud588\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubcc0\uacbd \uc911 \uac00\uc7a5 \uc8fc\ubaa9\ud560 \ubd80\ubd84\uc740 \uc0ac\uc6a9\uc790 \uc9c0\uc815 Deno \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c TypeScript \uc11c\ube44\uc2a4\ub97c \ud655\uc7a5\ud558\ub294 \ub300\uc2e0 Deno LSP \ud1b5\ud569\uc744 \uc0ac\uc6a9\ud55c \uac83\uc785\ub2c8\ub2e4. Deno\ub97c \uc774\uc6a9\ud574 \uc791\uc5c5\ud55c\ub2e4\uba74 \uc5c5\ub370\uc774\ud2b8\ub41c \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud574 \ubcf4\uc138\uc694! <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2020\/06\/deno-support-in-jetbrains-ides\/\">\uc774 \ube14\ub85c\uadf8 \uac8c\uc2dc\ubb3c<\/a>\uc5d0\uc11c \uc9c0\uc6d0 \uc0ac\ud56d\uc744 \uc790\uc138\ud788 \uc54c\uc544\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/06\/auto-import-deno.png\" alt=\"Deno LSP\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6cc\uc9c4 Deno \ud1b5\ud569\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/06\/auto-import-deno.gif\"><\/p>\n<p>\uc0c8\ub85c\uc6b4 \ud615\uc2dd\uc758 \ube14\ub85c\uadf8\uac00 \uc5ec\ub7ec\ubd84\uc758 \ub9c8\uc74c\uc5d0 \ub4e4\uace0 \uc0c8\ub85c\uc6b4 \uc815\ubcf4\ub97c \uc5bb\uc73c\uc168\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4. \uc5ec\ub7ec\ubd84\uc758 \uc758\uacac\uc744 \uacf5\uc720\ud558\uace0 \ub610 \uc5b4\ub5a4 \ub0b4\uc6a9\uc744 \uc54c\uc544\ubcf4\uace0 \uc2f6\uc740\uc9c0\ub3c4 \uc54c\ub824\uc8fc\uc138\uc694! \uc5ec\uae30\uc5d0\uc11c \ub2e4\ub8e8\uc5b4 \uc8fc\uc5c8\uc73c\uba74 \ud558\ub294 \uc88b\uc544\ud558\ub294 \uae30\ub2a5\uc774 \uc788\uc73c\uba74 \uc544\ub798 \ub313\uae00\uc5d0 \uacf5\uc720\ud574 \uc8fc\uc138\uc694.<\/p>\n<p><em>WebStorm \ud300<\/em><\/p>\n<p><em>\uac8c\uc2dc\ubb3c \uc6d0\ubb38 \uc791\uc131\uc790<\/em><\/p>\n\n    <div class=\"about-author \">\n        <div class=\"about-author__box\">\n            <div class=\"row\">\n                <div class=\"about-author__box-img\">\n                    <img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=200&#038;r=g\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\"  class=\"avatar avatar-200 wp-user-avatar wp-user-avatar-200 photo avatar-default\">\n                <\/div>\n                <div class=\"about-author__box-text\">\n                                                        <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n\n<p><\/p>\n","protected":false},"author":964,"featured_media":264577,"comment_status":"closed","ping_status":"closed","template":"","categories":[601],"tags":[6999,197],"cross-post-tag":[6284,6419],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/264569"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/users\/964"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/comments?post=264569"}],"version-history":[{"count":7,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/264569\/revisions"}],"predecessor-version":[{"id":264599,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/264569\/revisions\/264599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media\/264577"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media?parent=264569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/categories?post=264569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/tags?post=264569"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/cross-post-tag?post=264569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}