{"id":295623,"date":"2022-11-08T07:27:39","date_gmt":"2022-11-08T06:27:39","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=webstorm&#038;p=295623"},"modified":"2022-11-08T07:45:05","modified_gmt":"2022-11-08T06:45:05","slug":"fomo-digest-3","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/ko\/webstorm\/2022\/11\/fomo-digest-3\/","title":{"rendered":"FOMO Digest #3: JetBrains IDE\uc5d0\uc11c React\ub97c \uac1c\ubc1c\ud558\uae30 \uc704\ud55c \uac00\uc7a5 \uc720\uc6a9\ud55c 7\uac00\uc9c0 \uae30\ub2a5"},"content":{"rendered":"<p>WebStorm \ubc0f \uae30\ud0c0 JetBrains IDE\uc5d0\uc11c \uac00\uc7a5 \uc720\uc6a9\ud55c \uc0dd\uc0b0\uc131 \ud5a5\uc0c1 \ub3c4\uad6c\ub97c \ud55c\ub370 \ubaa8\uc544\ubcf4\ub294 <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/tag\/fomo-digest\/\">FOMO \uc694\uc57d \uc2dc\ub9ac\uc988<\/a>\uc758 \uc138 \ubc88\uc9f8 \ud3b8\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4. \uc624\ub298\uc740 <strong>React \uc791\uc5c5\uc744 \uc704\ud55c \uba87 \uac00\uc9c0 \uba4b\uc9c4 \uae30\ub2a5<\/strong>\uc744 \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ubaa8\ub4e0 \uae30\ub2a5\uc740 JetBrains IDE\uc5d0\uc11c \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"reactify_html_on_copy_and_paste\"><span id=\"Reactify_HTML_on_copy_and_paste\" class=\"ez-toc-section\"><\/span>\ubcf5\uc0ac \ubc0f \ubd99\uc5ec\ub123\uae30 \uc2dc HTML &#8216;React\ud654&#8217;<\/h2>\n<p>\ub9ce\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc0ac\ub791\ubc1b\ub294 \uc791\uc9c0\ub9cc \ub9e4\uc6b0 \uc720\uc6a9\ud55c \uae30\ub2a5\ubd80\ud130 \uc2dc\uc791\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\"><a href=\"https:\/\/twitter.com\/hashtag\/WebStormTip?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">#WebStormTip<\/a> \u2013 Pasting HTML into a React project will convert `class` into `className` &#x1f92f;<\/p>\n<p>\u2014 alistair (@alistaiiiir) <a href=\"https:\/\/twitter.com\/alistaiiiir\/status\/1361301878580142080?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 15, 2021<\/a><\/p>\n<\/blockquote>\n<p>\ubc14\ub85c \uadf8\ub807\uc2b5\ub2c8\ub2e4! HTML \ucf54\ub4dc\ub97c React \uad6c\uc131 \uc694\uc18c\uc5d0 \ubd99\uc5ec\ub123\uc744 \ub54c\ub9c8\ub2e4 \uc801\uc808\ud55c React \uaddc\uce59\uc744 \ub530\ub974\ub3c4\ub85d IDE\uac00 \uc790\ub3d9\uc73c\ub85c \uc774\ub97c \ubcc0\ud658\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/class-change.png\" alt=\"WebStorm\uc740 React \uaddc\uce59\uc5d0 \ub530\ub77c class\ub97c className\uc73c\ub85c \uc790\ub3d9 \ubcc0\uacbd\ud569\ub2c8\ub2e4.\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/class-change.gif\"><\/p>\n<p>\uc774 \uc608\uc5d0\uc11c <code>class<\/code>\ub294 <code>className<\/code>\uc73c\ub85c \ubcc0\ud658\ub418\uc5c8\uc2b5\ub2c8\ub2e4. IDE\ub294 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub3c4 \ubcc0\ud658\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 <code>onclick<\/code>\uc744 <code>onClick<\/code>\uc73c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/react.html#react_transfer_html_attributes_to_jsx\" target=\"_blank\" rel=\"noopener\">\uad00\ub828 \ubb38\uc11c<\/a>\uc758 <em>JSX\ub85c HTML \uc18d\uc131 \uc804\ub2ec<\/em> \uc139\uc158\uc744 \ucc38\uc870\ud558\uc138\uc694.<\/p>\n<h2 id=\"extract_react_components\"><span id=\"Extract_React_components\" class=\"ez-toc-section\"><\/span>React \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c<\/h2>\n<p>React\uc758 Zen\uacfc \uad6c\uc131 \uc694\uc18c \uae30\ubc18 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 promise\uc5d0 \ub3c4\ub2ec\ud558\uae30\uac00 \uc5b4\ub824\uc6b0\uc2e0\uac00\uc694? \uc544\uc2dc\ub2e4\uc2dc\ud53c \uad6c\uc131 \uc694\uc18c \uae30\ubc18 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\ub824\uba74 JSX\ub97c \uc774\ub3d9\ud558\uace0, \ud544\uc694\ud55c \ud504\ub85c\ud37c\ud2f0(\ud0c0\uc785 \ud3ec\ud568)\ub97c \uc2dd\ubcc4\ud558\uace0, \uc0c8 \uad6c\uc131 \uc694\uc18c\uc5d0 \ub300\ud55c \ud638\ucd9c\uc5d0 \ubc30\uce58\ud558\ub294 \ub4f1 \ub9ce\uc740 \uc9c0\ub09c\ud55c \uc791\uc5c5\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \ubaa8\ub450 IDE\uc5d0 \ub9e1\uae30\uc138\uc694! \uba3c\uc800 \ud558\uc704 \uad6c\uc131 \uc694\uc18c\ub85c \ubcc0\ud658\ud560 JSX\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uadf8\ub7f0 \ub2e4\uc74c <em>Refactor This(\ub2e4\uc74c\uc744 \ub9ac\ud329\ud130\ub9c1)<\/em> \ud31d\uc5c5(<em>^T \/ Ctrl+Alt+Shift+T<\/em>)\uc744 \uc0ac\uc6a9\ud558\uace0 <em>Extract Component(\uad6c\uc131 \uc694\uc18c \ucd94\ucd9c)\u2026<\/em>\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4. \uc774\uc81c \uc774\ub984\uc744 \uc9c0\uc815\ud558\uace0 \ud074\ub798\uc2a4 \ub610\ub294 \ud568\uc218\ub85c \ub9cc\ub4e4\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Extract-component.png\" alt=\"Refactor This \uc561\uc158\uc73c\ub85c React \uad6c\uc131 \uc694\uc18c \ucd94\ucd9c\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Extract-component.gif\"><\/p>\n<p>\ub2e8\uc77c \ucc45\uc784 \uc6d0\uce59\uc744 \uc900\uc218\ud558\uace0 \ud30c\uc77c\ub2f9 \ud558\ub098\uc758 \uad6c\uc131 \uc694\uc18c\ub97c \uc720\uc9c0\ud558\uace0 \uc2f6\ub098\uc694? <em>Move(\uc774\ub3d9)<\/em> \ub9ac\ud329\ud130\ub9c1\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0c8 \uad6c\uc131 \uc694\uc18c\uc640 \ud544\uc694\ud55c \ubaa8\ub4e0 \uac00\uc838\uc624\uae30, \ub370\uc774\ud130 \ubc0f \uc785\ub825\uc744 \ubcc4\ub3c4\uc758 \uc0c8 \ud30c\uc77c\ub85c \ucd94\ucd9c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><strong>\ubcf4\ub108\uc2a4 \ud301:<\/strong> React \ud074\ub798\uc2a4 \uad6c\uc131 \uc694\uc18c\ub97c \uae30\ub2a5 \uad6c\uc131 \uc694\uc18c\ub85c \ubcc0\ud658\ud588\ub2e4\uac00 \ub2e4\uc2dc \ub418\ub3cc\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uad6c\uc131 \uc694\uc18c \uc815\uc758\uc5d0\uc11c <em>\u2325Enter \/ <\/em><em>Alt+Enter<\/em>\ub97c \ub204\ub974\uace0 \ud544\uc694\ud55c \uc561\uc158\uc744 \uc120\ud0dd\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. \ub610\ud55c \ub9c8\uc74c\uc774 \ubc14\ub00c\uba74 &#8216;\uc2e4\ud589 \ucde8\uc18c'(<em>\u2318Z \/ Ctrl+Z<\/em>) \ud55c \ubc88\uc73c\ub85c \ubaa8\ub4e0 \uac83\uc744 \uc6d0\ub798\ub300\ub85c \ub418\ub3cc\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"use_react_code_snippets\"><span id=\"Use_React_code_snippets\" class=\"ez-toc-section\"><\/span>React \ucf54\ub4dc \uc2a4\ub2c8\ud3ab \uc0ac\uc6a9<\/h2>\n<p>JetBrains IDE\uc5d0\ub294 \uc2dc\uac04 \uc808\uc57d\uc5d0 \ub3c4\uc6c0\uc774 \ub418\ub294 \uc218\ub9ce\uc740 <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/react.html#react_code_snippets\" target=\"_blank\" rel=\"noopener\">React \ucf54\ub4dc \uc2a4\ub2c8\ud3ab<\/a>\uc774 \uc788\uc2b5\ub2c8\ub2e4. React \ud504\ub85c\uc81d\ud2b8\uc6a9\uc758 \ub2e4\uc591\ud55c \uad6c\ubb38\uacfc \ucf54\ub4dc \ube14\ub85d\uc73c\ub85c \ud655\uc7a5\ub418\ub294 50\uac1c \uc774\uc0c1\uc758 \uc57d\uc5b4\ub97c \uc0ac\uc6a9\ud558\uba74 \ucc98\uc74c\ubd80\ud130 \uc791\uc131\ud574\uc57c \ud560 \uac83\uc774 \uac70\uc758 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc2a4\ub2c8\ud3ab\uc744 \uc0ac\uc6a9\ud558\ub824\uba74 \uc5d0\ub514\ud130\uc5d0\uc11c \uc57d\uc5b4\ub97c \uc785\ub825\ud558\uace0 \u21e5 \/<em>Tab<\/em>\uc744 \ub20c\ub7ec \ud655\uc7a5\ud569\ub2c8\ub2e4. <em>Insert Live Template(\ub77c\uc774\ube0c \ud15c\ud50c\ub9bf \uc0bd\uc785)<\/em>\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ub2c8\ud3ab\uc744 \ucd94\uac00\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. <em>\u2318J<\/em> \/ <em>Ctrl+J<\/em>\ub97c \ub204\ub974\uace0 \ubaa9\ub85d\uc5d0\uc11c \uc0bd\uc785\ud558\ub824\ub294 \uc2a4\ub2c8\ud3ab\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Code-Snippet.png\" alt=\"\ub77c\uc774\ube0c \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc2a4\ud14c\uc774\ud2b8\ub9ac\uc2a4 React \ud568\uc218 \ub9cc\ub4e4\uae30\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Code-Snippet.gif\"><\/p>\n<p><em>Preferences(\ud658\uacbd \uc124\uc815)<\/em><em>\/Settings(\uc124\uc815) | Editor(\uc5d0\ub514\ud130) | Live Templates(\ub77c\uc774\ube0c \ud15c\ud50c\ub9bf)<\/em>\uc5d0\uc11c React\uc5d0 \uc0ac\uc6a9 \uac00\ub2a5\ud55c \ud15c\ud50c\ub9bf\uc758 \uc804\uccb4 \ubaa9\ub85d\uc744 \ucc3e\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><strong>\ubcf4\ub108\uc2a4 \ud301<\/strong>: <em>Preferences(\ud658\uacbd \uc124\uc815)<\/em><em>\/Settings(\uc124\uc815) | Editor(\uc5d0\ub514\ud130) | File and Code Templates(\ud30c\uc77c \ubc0f \ucf54\ub4dc \ud15c\ud50c\ub9bf)<\/em>\uc73c\ub85c \uc774\ub3d9\ud558\uace0 <em>Code(\ucf54\ub4dc)<\/em> \ud0ed\uc744 \uc120\ud0dd\ud558\uba74, IDE\uac00 \uc0c8 \uad6c\uc131 \uc694\uc18c\uc5d0 \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc \ud15c\ud50c\ub9bf\uc744 \uc218\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"navigate_react_projects\"><span id=\"Navigate_React_projects\" class=\"ez-toc-section\"><\/span>React \ud504\ub85c\uc81d\ud2b8 \ud0d0\uc0c9<\/h2>\n<p>WebStorm \ubc0f \uae30\ud0c0 JetBrains IDE\ub294 \uc5d0\ub514\ud130 \uc5ec\ubc31\uc5d0\uc11c \ud0dc\uadf8 \ud2b8\ub9ac\uc5d0 \ub300\ud55c \uc774\ub3d9 \uacbd\ub85c\uc640 \ub2e4\ucc44\ub85c\uc6b4 \uac15\uc870 \ud45c\uc2dc\ub97c \uc0ac\uc6a9\ud558\uc5ec JSX \ud0dc\uadf8\uc640 \uac19\uc740 \uc2ec\ubcfc\uc744 \ud0d0\uc0c9\ud558\ub294 \ub370 \ub3c4\uc6c0\uc744 \uc90d\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/navigate-byline.png\" alt=\"byLine \uc778\uc2a4\ud134\uc2a4\uac00 \uac15\uc870 \ud45c\uc2dc\ub41c \uac83\uc73c\ub85c \ud45c\uc2dc\" width=\"800\"><\/p>\n<p>\ub610\ud55c \uc911\uad04\ud638 <code>{}<\/code> \uc548\uc758 \uba54\uc11c\ub4dc \uc120\uc5b8\uc774\ub098 JavaScript \ud45c\ud604\uc2dd\uc73c\ub85c \uc27d\uac8c \uc774\ub3d9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uba54\uc11c\ub4dc\ub098 \ud45c\ud604\uc2dd\uc744 \uc120\ud0dd\ud558\uace0 <em>\u2318B \/ Ctrl+B<\/em>\ub97c \ub204\ub974\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Navigate-to-expression.png\" alt=\"Ctrl+B\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucf54\ub4dc\uc758 byLine \uc120\uc5b8\uc73c\ub85c \uc774\ub3d9\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Navigate-to-expression.gif\"><\/p>\n<p><strong>\ubcf4\ub108\uc2a4 \ud301<\/strong>: \uad6c\uc131 \uc694\uc18c\uc758 \uc815\uc758\ub97c \ubcf4\uae30 \uc704\ud55c <em>\u2325Space<\/em> \/ <em>Ctrl+Shift+I<\/em> \ubc0f \uad6c\uc131 \uc694\uc18c\uc758 \ube60\ub978 \ubb38\uc11c\ub97c \ubcf4\uae30 \uc704\ud55c <em>F1 \/ Ctrl+Q<\/em>\uc640 \uac19\uc774 React\uc5d0\uc11c \ud0d0\uc0c9\uc744 \uc704\ud55c \uba87 \uac00\uc9c0 \uc190\uc26c\uc6b4 \ub2e8\ucd95\ud0a4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2 id=\"find_problems_in_your_code\"><span id=\"Find_problems_in_your_code\" class=\"ez-toc-section\"><\/span>\ucf54\ub4dc\uc5d0\uc11c \ubb38\uc81c \ucc3e\uae30<\/h2>\n<p>\uc804\uccb4 React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \uc791\ub3d9\ud558\ub294 JavaScript \ubc0f HTML\uc6a9 \uac80\uc0ac \uae30\ub2a5\uc774 \uad11\ubc94\uc704\ud558\uac8c \ub9c8\ub828\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc608\ub97c \ub4e4\uc5b4, IDE\ub294 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\ub294 \ubcc0\uc218 \ubc0f \ud568\uc218, \ub2eb\ub294 \ud0dc\uadf8\uc758 \ub204\ub77d, \uad6c\ubb38 \ub204\ub77d \ub4f1\uc5d0 \ub300\ud574 \uacbd\uace0\ud569\ub2c8\ub2e4. \ub610\ud55c \uc815\ub9ac\ud558\ub294 \uc791\uc5c5\uc5d0\ub3c4 \ub3c4\uc6c0\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 <em>R<\/em><em>eformat Code(\ucf54\ub4dc \uc11c\uc2dd \ub2e4\uc2dc \uc9c0\uc815)<\/em>(<em>\u2325\u2318L \/ Ctrl+Alt+L<\/em>)\ub97c \uc2e4\ud589\ud560 \ub54c \ub204\ub77d\ub41c \uc138\ubbf8\ucf5c\ub860\uc744 \ucd94\uac00\ud558\uace0, <em>Optimize Imports(import \ubb38 \ucd5c\uc801\ud654)<\/em>(<em>^\u2325O \/ Ctrl+Alt+O<\/em>)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 import \ubb38\uc744 \uc815\ub9ac\ud558\ub3c4\ub85d IDE\ub97c \uad6c\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Clean-up-code.png\" alt=\"React \ucf54\ub4dc\uc758 \ubb38\uc81c \ubc0f \uc624\ub958\ub97c \ud45c\uc2dc\ud55c \ub2e4\uc74c Reformat Code \uc561\uc158\uacfc Optimize Imports \uc561\uc158\uc73c\ub85c \uc218\uc815\" width=\"800\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/Clean-up-code.gif\"><\/p>\n<p><strong>\ubcf4\ub108\uc2a4 \ud301<\/strong>: <em>Preferences(\ud658\uacbd \uc124\uc815)\/Settings(\uc124\uc815) | Editor(\uc5d0\ub514\ud130) | Inspections(\uac80\uc0ac)<\/em>\uc5d0\uc11c \uac80\uc0ac\ub97c \uc0ac\uc6a9\uc790 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6d0\ud558\uc9c0 \uc54a\ub294 \ud56d\ubaa9\uc744 \ube44\ud65c\uc131\ud654\ud558\uac70\ub098 \uc2ec\uac01\ub3c4 \uc218\uc900\uc744 \uacbd\uace0\uc5d0\uc11c \uc624\ub958\ub85c \ub610\ub294 \uadf8 \ubc18\ub300\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n<h2 id=\"turn_on_the_eslint_integration\"><span id=\"Turn_on_the_ESLint_integration\" class=\"ez-toc-section\"><\/span>ESLint \ud1b5\ud569 \uc124\uc815<\/h2>\n<p>WebStorm \ubc0f \uae30\ud0c0 JetBrains IDE\ub294 ESLint\uc640 \ud1b5\ud569\ub418\ubbc0\ub85c \uc785\ub825\ud560 \ub54c \uc5d0\ub514\ud130\uc5d0\uc11c \ubcf4\uace0\ub418\ub294 \uacbd\uace0\uc640 \uc624\ub958\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. React \uad6c\uc131 \uc694\uc18c\uc5d0 \ub300\ud574 \ud45c\uc2dc \uc774\ub984\uc774 \uc124\uc815\ub418\uc9c0 \uc54a\uc558\uac70\ub098 \uc704\ud5d8\ud55c \ud504\ub85c\ud37c\ud2f0\uac00 \uc0ac\uc6a9\ub418\uba74 \uacbd\uace0\ub97c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c ESLint\uc5d0\uc11c \ubc1c\uacac\ub41c \ubb38\uc81c\ub294 <em>Problems(\ubb38\uc81c)<\/em> \ubdf0\uc5d0\uc11c \uc804\uc5ed\uc73c\ub85c \ubcf4\uace0\ub429\ub2c8\ub2e4.<\/p>\n<p>ESLint\ub97c \ud65c\uc131\ud654\ud558\ub824\uba74 <em>Preferences(\ud658\uacbd \uc124\uc815)\/Settings(\uc124\uc815) | Languages &amp; Frameworks(\uc5b8\uc5b4 \ubc0f \ud504\ub808\uc784\uc6cc\ud06c) | JavaScript | Code Quality Tools(\ucf54\ub4dc \ud488\uc9c8 \ub3c4\uad6c) | ESLint<\/em>\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2022\/10\/ESLint-in-settings.png\" alt=\"\uc124\uc815\uc5d0\uc11c ESLint \uc124\uc815 \ud45c\uc2dc\" width=\"800\"><\/p>\n<p><strong>\ubcf4\ub108\uc2a4 \ud301<\/strong>: <em>\u2318S \/ Ctrl+S<\/em>\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc800\uc7a5\ud560 \ub54c\ub9c8\ub2e4 ESLint\ub97c \uc2e4\ud589\ud558\uac70\ub098 \uc2e4\ud589\/\ub514\ubc84\uadf8 \uad6c\uc131\uc744 \uc2dc\uc791\ud558\uac70\ub098, IDE\ub97c \ub2eb\uac70\ub098, \ubc84\uc804 \uad00\ub9ac \uc791\uc5c5\uc744 \uc218\ud589\ud560 \ub54c \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud65c\uc131\ud654\ud558\ub824\uba74 <em>Preferences(\ud658\uacbd \uc124\uc815)\/Setting(\uc124\uc815)<\/em>\uc758 ESLint \uc139\uc158\uc5d0\uc11c \uc635\uc158\uc744 \uc120\ud0dd\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<h2 id=\"start_debugging_from_tool_windows\"><span id=\"Start_debugging_from_tool_windows\" class=\"ez-toc-section\"><\/span>\ub3c4\uad6c \ucc3d\uc5d0\uc11c \ub514\ubc84\uadf8 \uc2dc\uc791<\/h2>\n<p>\uace0\uae09 \ud301: \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc2e4\ud589\ub418\ub294 \uc5b4\ub290 \uc704\uce58\uc5d0\uc11c\ub4e0 \uc138\uc158 \ub514\ubc84\uadf8\ub97c \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 localhost\uc5d0\uc11c \uc2e4\ud589 \uc911\uc778 \uacbd\uc6b0 \uae30\ubcf8 \uc81c\uacf5 \ud130\ubbf8\ub110\uc774\ub098 <em>Run(\uc2e4\ud589)<\/em> \ub3c4\uad6c \ucc3d\uc5d0\uc11c \ub514\ubc84\uac70\ub97c \uc2dc\uc791\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><em>Run(\uc2e4\ud589)<\/em> \ubc0f <em>Terminal(\ud130\ubbf8\ub110)<\/em> \ub3c4\uad6c \ucc3d\uc5d0\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc2e4\ud589 \uc911\uc778 URL\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4(\uae30\ubcf8\uc801\uc73c\ub85c <em>http:\/\/localhost:3000\/<\/em>). <em>\u2318\u21e7 \/ Ctrl+Shift<\/em>\ub97c \ub204\ub978 \uc0c1\ud0dc\uc5d0\uc11c \ub3c4\uad6c \ucc3d\uc5d0\uc11c URL \ub9c1\ud06c\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4. IDE\uac00 \ub514\ubc84\uadf8 \uc138\uc158\uc744 \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/WebStorm\/Debug in tool window.png\" alt=\"\ub3c4\uad6c \ucc3d\uc5d0\uc11c URL \ub9c1\ud06c\ub97c \ud074\ub9ad\ud558\uc5ec \ub514\ubc84\uadf8 \uc138\uc158 \uc2dc\uc791\" width=\"800\" data-gif-src=\"https:\/\/resources.jetbrains.com\/storage\/products\/blog\/wp-content\/uploads\/WebStorm\/Debug in tool window.gif\"><\/p>\n<p>FOMO \ub2e4\uc774\uc81c\uc2a4\ud2b8\uc758 \uc774\ubc88 \uae00\uc744 \uc990\uac81\uac8c \uc77d\uace0, \uc0c8\ub85c\uc6b4 \ud301\uc744 \uc54c\uac8c \ub418\uc168\uae38 \ubc14\ub78d\ub2c8\ub2e4. \ubc30\uc6cc\ubcf4\uace0 \uc2f6\uc740 \ub2e4\ub978 \uae30\ub2a5\uc774\ub098 \ub2e4\uc774\uc81c\uc2a4\ud2b8 \uc5f0\uc7ac\ubb3c\uc5d0 \uc18c\uac1c\ub418\uc5c8\uc73c\uba74 \ud558\ub294 \uae30\ub2a5\uc774 \uc788\ub2e4\uba74 \uc544\ub798 \ub313\uae00\ub780\uc5d0\uc11c \uacf5\uc720\ud574 \uc8fc\uc138\uc694.<\/p>\n<p><em>WebStorm \ud300 \ub4dc\ub9bc<\/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","protected":false},"author":964,"featured_media":295652,"comment_status":"closed","ping_status":"closed","template":"","categories":[601],"tags":[6999,91,1290],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/295623"}],"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=295623"}],"version-history":[{"count":7,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/295623\/revisions"}],"predecessor-version":[{"id":295663,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/webstorm\/295623\/revisions\/295663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media\/295652"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media?parent=295623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/categories?post=295623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/tags?post=295623"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/cross-post-tag?post=295623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}