{"id":33976,"date":"2019-12-16T12:26:11","date_gmt":"2019-12-16T03:26:11","guid":{"rendered":"https:\/\/blog.jetbrains.com\/kr\/?p=441"},"modified":"2020-07-01T13:16:23","modified_gmt":"2020-07-01T13:16:23","slug":"webstorm-2019-3-vue-js-javas","status":"publish","type":"post","link":"https:\/\/blog.jetbrains.com\/ko\/2019\/12\/16\/webstorm-2019-3-vue-js-javas\/","title":{"rendered":"WebStorm 2019.3 : \ube68\ub77c\uc9c4 \uc2dc\uc791, \ub2e4\uc591\ud574\uc9c4 \uace0\uae09 Vue.js \uc9c0\uc6d0, \uc2a4\ub9c8\ud2b8\ud574\uc9c4 JavaScript\uc6a9 \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5 \ub4f1"},"content":{"rendered":"WebStorm 2019.3\uc774 \ucd9c\uc2dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4! \r\n\uc62c\ud574 \ub9c8\uc9c0\ub9c9 \uc8fc\uc694 \uc5c5\ub370\uc774\ud2b8\uc778 WebStorm 2019.3\uc5d0\uc11c\ub294 20% \ube68\ub77c\uc9c4 \uc2dc\uc791 \uc18d\ub3c4, Vue.js \uc9c0\uc6d0\uc758 \uc8fc\uc694 \uac1c\uc120 \uc0ac\ud56d, JavaScript\uc640 TypeScript\uc5d0 \uc9c0\uc6d0\ub418\ub294 \ub354 \uc2a4\ub9c8\ud2b8\ud574\uc9c4 \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5\uc774 \uc81c\uacf5\ub418\uba70 \uc624\ub798\ub41c \ubc84\uadf8\uac00 \ub2e4\uc218 \uc218\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\r\nWebStrom 2019.3 \ub2e4\uc6b4\ub85c\ub4dc \ud558\uae30\r\n\r\n\uc774 \ube14\ub85c\uadf8\uc5d0\uc11c\ub294 \uc0c8\ub85c\uc6b4 \uae30\ub2a5\uacfc \uc8fc\uc694 \uac1c\uc120 \uc0ac\ud56d\uc744 \uc0c8\ub85c\uc6b4 \uae30\ub2a5 \ud398\uc774\uc9c0\ubcf4\ub2e4 \ub354 \uc790\uc138\ud558\uac8c \uc124\uba85\ud569\ub2c8\ub2e4.  \uc774 \uae00\uc740 \uc774\uc804 EAP \ube14\ub85c\uadf8 \uac8c\uc2dc\ubb3c\uc758 \uc815\ubcf4\ub97c \ubc14\ud0d5\uc73c\ub85c \uc791\uc131\ub418\uc5c8\uae30 \ub54c\ubb38\uc5d0 \uc5ec\ub7ec\ubd84\uc774 JetBrains \ube14\ub85c\uadf8\ub97c \uc5bc\ub9c8\ub098 \uc790\uc8fc \ud655\uc778\ud558\ub294\uac00\uc5d0 \ub530\ub77c \uc774\ubbf8 \uc775\uc219\ud55c \ub0b4\uc6a9\uc774 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \r\n\uc0c8\ub85c\uc6b4 \uae30\ub2a5\uacfc \uac1c\uc120 \uc0ac\ud56d\uc740 \ub2e4\uc74c \ubc94\uc8fc\ub85c \ub098\ub269\ub2c8\ub2e4.\r\n\r\n\uc131\ub2a5: \uc18c\uc2a4 \ub9f5\uc73c\ub85c \ub514\ubc84\uadf8\ud560 \ub54c \ube68\ub77c\uc9c4 \uc2dc\uc791\uacfc \ud5a5\uc0c1\ub41c \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9\r\n\ud504\ub808\uc784\uc6cc\ud06c: Vue.js\uc5d0 \ub300\ud55c \uace0\uae09 \ucf54\ub4dc \uc644\uc131 \ucd94\uac00, Vue.js \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub978 \ubb38\uc11c \uc9c0\uc6d0, React \uad6c\uc131 \uc694\uc18c \uc18d\uc131\uc5d0 \ub300\ud55c \ud5a5\uc0c1\ub41c \uc9c0\uc6d0, Angular \uc9c0\uc6d0 \uac1c\uc120 \uc0ac\ud56d\r\nJavaScript \ubc0f TypeScript: \ud15c\ud50c\ub9bf \uc5b8\uc5b4 \uc0bd\uc785, \uc0c8 \uc2ec\ubcfc\uc5d0 \ub300\ud55c \uc774\ub984 \uc81c\uc548, TypeScript 3.7 \uae30\ub2a5 \uc9c0\uc6d0\r\nHTML \ubc0f \uc2a4\ud0c0\uc77c\uc2dc\ud2b8: CDN\uc0c1\uc758 CSS \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ub300\ud55c \ucf54\ub4dc \uc644\uc131, CSS\uc758 \uc778\uc6a9 \uc2a4\ud0c0\uc77c \ubcc0\uacbd \uc635\uc158, Sass\uc5d0\uc11c @use \ubc0f @forward \uaddc\uce59 \uc870\uae30 \uc9c0\uc6d0\r\nIDE \uac1c\uc120 \uc0ac\ud56d: \ub3c4\uad6c \ubc0f \uad6c\uc131 \uc2e4\ud589\uc744 \uc704\ud55c \ub2e8\uc77c \uc561\uc158, \ubc88\ub4e4\uc5d0\uc11c \uc81c\uc678\ub41c Dart \uc9c0\uc6d0, \uc804\uc5ed \ud30c\uc77c \uc640\ucc98 \uc790\ub3d9 \uc124\uc815, \uc120\ud0dd \uc601\uc5ed \ub0b4\uc5d0\uc11c\ub9cc \uac80\uc0c9\r\n\ub3c4\uad6c: \uace7 \ucd9c\uc2dc\ub420 Yarn 2 \ub9b4\ub9ac\uc2a4 \uc9c0\uc6d0, \ub514\ubc84\uac70\uc758 \ubc18\ud658\uac12, npm \uc124\uce58 \uc54c\ub9bc\uc744 \ub2e4\uc2dc \ucf1c\uae30 \uc704\ud55c \uc0c8\ub85c\uc6b4 \uc561\uc158\r\n\ubc84\uc804 \uad00\ub9ac: \uc7ac\uc124\uacc4\ub41c \ud504\ub85c\uc81d\ud2b8 \ubcf5\uc81c UI, \uc5c5\ub370\uc774\ud2b8\ub41c git \ube0c\ub79c\uce58\uc6a9 Compare with Current(\ud604\uc7ac\uc640 \ube44\uad50) \uc561\uc158, \ubaa8\ub4e0 \ube0c\ub79c\uce58\uc758 \ubcc0\uacbd \ub0b4\uc6a9\uc744 \ud478\uc2dc\ud558\ub294 \uc635\uc158, \ube68\ub77c\uc9c4 \ubcc0\uacbd \ub0b4\uc6a9 \ucee4\ubc0b, \uc0c8\ub85c\uc6b4 \ube0c\ub79c\uce58 \uccb4\ud06c\uc544\uc6c3 \uc561\uc158\r\n\r\n \r\n\uc131\ub2a5\r\n\ube68\ub77c\uc9c4 \uc2dc\uc791\r\n\uc9c0\ub09c \ub450 \ubc88\uc758 \ub9b4\ub9ac\uc2a4 \uc8fc\uae30 \ub3d9\uc548 JetBrains\ub294 IDE\uc5d0\uc11c \uc2dc\uc791 \ud654\uba74\uc774 \ud45c\uc2dc\ub418\uace0 \uc0c9\uc778 \uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\uac00 \uc5f4\ub9ac\uae30\uae4c\uc9c0 \uae30\ub2e4\ub9ac\ub294 \uc2dc\uac04\uc744 \ub2e8\ucd95\ud558\uae30 \uc704\ud574 \ub9ce\uc740 \ub178\ub825\uc744 \uae30\uc6b8\uc600\uc2b5\ub2c8\ub2e4. \uadf8 \uacb0\uacfc WebStorm 2019.3\uc5d0\uc11c\ub294 \uc774\uc804 \ubc84\uc804 \ub300\ube44 \ub354 \ube68\ub77c\uc9c4 \uc18d\ub3c4\ub85c \uc2dc\uc791 \uc791\uc5c5\uc774 \ucc98\ub9ac\ub429\ub2c8\ub2e4.\r\n\"\ube68\ub77c\uc9c4 \uc18d\ub3c4\"\uac00 \uc758\ubbf8\ud558\ub294 \ubc14\uc5d0 \ub300\ud574 \uc124\uba85\ub4dc\ub9ac\uc790\uba74, \uc800\ud76c\ub294 \ub2e4\uc591\ud55c \uc6b4\uc601 \uccb4\uc81c\uc5d0\uc11c WebStorm 2019.3\uc758 \uc2dc\uc791 \uc2dc\uac04\uc744 \uce21\uc815\ud558\uace0 \uc774 \uc218\uce58\ub97c v2019.1 \ubc0f v2019.2\uc758 \uc2dc\uc791 \uc2dc\uac04\uacfc \ube44\uad50\ud588\uc2b5\ub2c8\ub2e4. \uc758\ubbf8 \uc788\ub294 \ube44\uad50\ub97c \uc704\ud574 \ubaa8\ub4e0 \uc6b4\uc601 \uccb4\uc81c\uc5d0\uc11c create-react-app\uc73c\ub85c \uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub3d9\uc77c\ud55c \ud504\ub85c\uc81d\ud2b8\ub85c \uc0ac\uc6a9\ud558\uace0 app.js \ud30c\uc77c\uc744 \uc5d0\ub514\ud130\uc5d0\uc11c \uc5f4\uc5c8\uc2b5\ub2c8\ub2e4. \uadf8 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.\r\n\r\n\ud3c9\uade0\uc801\uc73c\ub85c \uc774\uc804 \ubc84\uc804\uc5d0 \ube44\ud574 \uc2dc\uc791 \uc2dc\uac04\uc774 20% \ub2e8\ucd95\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ubb3c\ub860 \ub124\ud2b8\uc6cc\ud06c \uad6c\uc131 \ubc0f \uc791\uc5c5 \uacf5\uac04\uc758 \ud06c\uae30, \ucef4\ud4e8\ud130\uc758 \uc5f0\uc2dd, \ubc14\uc774\ub7ec\uc2a4 \ubc31\uc2e0 \uad6c\uc131\uacfc \uac19\uc740 \uc694\uc778\uc5d0 \ub530\ub77c \uc2e4\uc81c \uacb0\uacfc\ub294 \ub2e4\ub97c \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n\uc774 \uac1c\uc120 \uc791\uc5c5\uc740 \uc5ec\uc804\ud788 \uc9c4\ud589 \uc911\uc785\ub2c8\ub2e4. WebStorm 2020.1\uc5d0\uc11c\ub294 \uc5ec\ub290 \ub54c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \ud504\ub85c\uc81d\ud2b8 \uc0c9\uc778 \uc0dd\uc131\uc758 \ucd5c\uc801\ud654\ub97c \ud3ec\ud568\ud574 \ub2e4\ub978 \uc8fc\uc694 \ubcc0\uacbd\uc774 \uc608\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\r\n\uc18c\uc2a4 \ub9f5\uc73c\ub85c \ub514\ubc84\uadf8 \uc2dc \uba54\ubaa8\ub9ac \uc0ac\uc6a9\ub7c9 \uac1c\uc120\r\n\uc18c\uc2a4 \ub9f5\uc73c\ub85c \ub514\ubc84\uadf8\ud560 \ub54c\uc758 \uacbd\ud5d8\uc744 \uac1c\uc120\ud558\uae30 \uc704\ud574, \ud574\ub2f9 \uc791\uc5c5 \uc9c4\ud589 \uc2dc \ub514\ubc84\uac70\uac00 \uc18c\ud504\ud2b8 \ucc38\uc870\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \uc801\uc6a9\ud588\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uba54\ubaa8\ub9ac\uac00 \ud55c\uacc4\uc5d0 \ub3c4\ub2ec\ud558\uba74 \uc18c\ud504\ud2b8 \ucc38\uc870\uac00 \uc27d\uac8c \ud574\uc81c\ub429\ub2c8\ub2e4.\r\nIDE \uc0c1\ud0dc \ud45c\uc2dc\uc904\uc5d0\uc11c \uba54\ubaa8\ub9ac \ud45c\uc2dc\uae30(Preferences(\uae30\ubcf8 \uc124\uc815)\/Settings(\uc124\uc815) | Appearance & Behavior(\uafb8\ubbf8\uae30 \ubc0f \ub3d9\uc791) | Appearance(\uafb8\ubbf8\uae30) \u2013 Show memory indicator(\uba54\ubaa8\ub9ac \ud45c\uc2dc\uae30 \ud45c\uc2dc))\uac00 \ud655\uc778\ub418\uba74 \ud45c\uc2dc\uae30\ub97c \ud074\ub9ad\ud558\uc5ec \uc18c\ud504\ud2b8 \ucc38\uc870 \uba54\ubaa8\ub9ac\ub97c \ud574\uc81c\ud558\uc138\uc694.\r\n\r\n\r\n\ud504\ub808\uc784\uc6cc\ud06c\r\n\ud06c\uac8c \ud5a5\uc0c1\ub41c Vue.js \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5\r\n\uc774\ubc88 \ub9b4\ub9ac\uc2a4 \uc8fc\uae30\uc758 \uc8fc\uc694 \ubaa9\ud45c \uc911 \ud558\ub098\ub294 Vue.js \uc9c0\uc6d0\uc744 \ud55c \ucc28\uc6d0 \ub192\uc740 \uc218\uc900\uc73c\ub85c \ub04c\uc5b4\uc62c\ub824 \uc0ac\uc6a9\uc790\uac00 \uc801\uc740 \ub178\ub825\uc73c\ub85c \ud6cc\ub96d\ud55c Vue.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \uac83\uc774\uc5c8\uc2b5\ub2c8\ub2e4. \uc800\ud76c\ub294 \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5\ubd80\ud130 \uc2dc\uc791\ud558\uc5ec \uc774 \ubaa9\ud45c\uc5d0 \ub2e4\uc591\ud55c \uac01\ub3c4\ub85c \uc811\uadfc\ud588\uc2b5\ub2c8\ub2e4.\r\n\uba3c\uc800 \ubaa8\ub4e0 Vue.js \uad6c\uc131 \uc694\uc18c\ub97c \ub2e8\uc77c .vue \ud30c\uc77c\uc5d0\uc11c \uc815\uc758\ud558\ub294 \ub370 \uc775\uc219\ud558\uc9c0 \uc54a\uc740 \uc0ac\uc6a9\uc790\ub97c \uc704\ud55c \ub0b4\uc6a9\uc785\ub2c8\ub2e4. \uc774\uc81c \ubcc4\uac1c \ud30c\uc77c\uc5d0 \uc788\ub294 \uc11c\ub85c \ub2e4\ub978 \uad6c\uc131 \uc694\uc18c \ubd80\ubd84 \uac04 \uc5f0\uacb0\uc744 WebStorm\uc774 \uc774\ud574\ud558\uace0 \uc18d\uc131, \ub370\uc774\ud130, \uba54\uc18c\ub4dc\uc5d0 \uc815\ud655\ud55c \ucf54\ub4dc \uc644\uc131 \uc81c\uc548\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.\r\n\r\n\ub458\uc9f8, \uc774\uc81c WebStorm\uc740 \uc2ac\ub86f \uc774\ub984\uc5d0 \ub300\ud55c \ucf54\ub4dc \uc644\uc131\uc744 \uc81c\uc548\ud569\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc740 Vuetify, Quasar, BootstrapVue \ub4f1\uc758 \ud504\ub85c\uc81d\ud2b8 \uad6c\uc131 \uc694\uc18c \ubc0f \uad6c\uc131 \uc694\uc18c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \uc815\uc758\ub41c \uc2ac\ub86f \uc774\ub984\uc778 \uacbd\uc6b0 \uc791\ub3d9\ud569\ub2c8\ub2e4.\r\n\r\n\uc14b\uc9f8, Vue \uad6c\uc131 \uc694\uc18c\uc758 \uc2a4\ud06c\ub9bd\ud2b8 \uc139\uc158\uc5d0\uc11c \uc77c\ubd80 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec \ub2e4\ub978 \uad6c\uc131 \uc694\uc18c\uc5d0 \ubd99\uc5ec\ub123\ub294 \uacbd\uc6b0 WebStorm\uc740 \uc77c\ubc18 JavaScript \ud30c\uc77c\uc5d0\uc11c \uc218\ud589\ud558\ub294 \uac83\uacfc \ub3d9\uc77c\ud55c \ubc29\uc2dd\uc73c\ub85c \ud544\uc694\ud55c import \ubb38\uc744 \ubd99\uc5ec\ub123\uc2b5\ub2c8\ub2e4.\r\n\r\n\ub9c8\uc9c0\ub9c9\uc73c\ub85c Vuetify\uac00 \uc788\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ud2b9\ud788 \ub450\ub4dc\ub7ec\uc84c\ub358 Vue \ud15c\ud50c\ub9bf \ucf54\ub4dc \uc644\uc131\uc758 \uc131\ub2a5 \ubb38\uc81c\ub97c \ubc1c\uacac\ud558\uc5ec \uc218\uc815\ud588\uc2b5\ub2c8\ub2e4. \uc774\uc81c \ud0dc\uadf8\uc640 \ud574\ub2f9 \uc18d\uc131\uc774 \uc9c0\uc5f0 \uc5c6\uc774 \ucf54\ub4dc \uc644\uc131 \ud31d\uc5c5\uc5d0 \ud45c\uc2dc\ub429\ub2c8\ub2e4.\r\nVue.js \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub978 \ubb38\uc11c \uc9c0\uc6d0\r\nWebStorm 2019.3\uc5d0\uc11c\ub294 Vue.js \ubc0f \uc77c\ubd80 \uc778\uae30 \uc788\ub294 \uad6c\uc131 \uc694\uc18c \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \uc815\uc758\ub41c \uad6c\uc131 \uc694\uc18c\uc640 \uc9c0\uc2dc\ubb38\uc5d0 \ub300\ud55c \ubb38\uc11c\ub97c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubb38\uc11c\ub97c \ubcf4\ub824\uba74 \ucf54\ub4dc \ub0b4 \uad6c\uc131 \uc694\uc18c \ub610\ub294 \uc9c0\uc2dc\ubb38\uc758 \uc774\ub984 \uc704\uc5d0\uc11c F1\uc744 \ub204\ub974\uba74 \ub429\ub2c8\ub2e4. \r\n\r\n\ucf54\ub4dc \uc644\uc131 \ud31d\uc5c5\uc774 \uc5f4\ub824 \uc788\ub294 \uc0c1\ud0dc\uc5d0\uc11c F1\uc744 \ub20c\ub7ec\ub3c4 \ub429\ub2c8\ub2e4. \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uc788\ub294 \uc790\uc138\ud55c \ubb38\uc11c\uc640 \uc608\uc2dc\ub85c \uc774\ub3d9\ud558\ub824\uba74 Shift-F1\uc744 \ub204\ub974\uac70\ub098 \ud31d\uc5c5 \ud558\ub2e8\uc758 \ub9c1\ud06c\ub97c \ud074\ub9ad\ud558\uc138\uc694.\r\npropTypes \uc5c6\ub294 React \uad6c\uc131 \uc694\uc18c\uc758 \uc18d\uc131\uc5d0 \ub300\ud55c \ud5a5\uc0c1\ub41c \uc9c0\uc6d0\r\npropTypes\uac00 \uc5c6\ub294 \uad6c\uc131 \uc694\uc18c\uc758 \uacbd\uc6b0, WebStorm\uc740 \ud574\ub2f9 \uad6c\uc131 \uc694\uc18c\uc758 \uc0ac\uc6a9 \uc704\uce58\uc5d0 \uc18d\uc131\uc774 \uc804\ub2ec\ub41c \uac83\uc744 \ud655\uc778\ud55c \ud6c4 \uad6c\uc131 \uc694\uc18c \uc815\uc758\uc5d0\uc11c props.something\uc5d0 \ub300\ud574 \ud574\uacb0\ub418\uc9c0 \uc54a\uc740 \uc18d\uc131\uc744 \ub354 \uc774\uc0c1 \ubcf4\uace0\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\r\n\uc608\ub97c \ub4e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uc774\uc804\uc5d0\ub294 propTypes\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\uba74 Greeting \uc815\uc758\uc758 'props.firstName'\uc774 \ud56d\uc0c1 \ud574\uacb0\ub418\uc9c0 \uc54a\uc740 \ubcc0\uc218\ub85c \ud45c\uc2dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\r\n\r\nWebStorm 2019.3\uc5d0\uc11c\ub294 Greeting\uc774 \uc0ac\uc6a9\ub418\uace0 \uac70\uae30\uc5d0 firstName \uc18d\uc131\uc774 \ud3ec\ud568\ub418\uc5b4\ub3c4 \ud574\uacb0\ub418\uc9c0 \uc54a\uc740 \uac83\uc73c\ub85c \ud45c\uc2dc\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\r\n\r\n\uc18d\uc131\uc744 \ucd94\uac00\ud55c \uacbd\uc6b0 'props' \ub610\ub294 'this.props' \ub2e4\uc74c\uc5d0 \uc624\ub294 \ucf54\ub4dc \uc644\uc131 \uc81c\uc548\uc5d0\uc11c \uc774 \uc774\ub984\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4.\r\n\r\nAngular \uc9c0\uc6d0 \uac1c\uc120 \uc0ac\ud56d\r\nWebStorm 2019.3\uc5d0\uc11c\ub294 SVG\ub97c Angular \ud15c\ud50c\ub9bf\uc73c\ub85c\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc774\ub294 \uc774\uc81c IDE\uac00 SVG \ud0dc\uadf8 \ubc0f .svg \ud30c\uc77c\uc5d0\uc11c \uc9c0\uc2dc\ubb38 \ubc0f \ubc14\uc778\ub529\uc744 \uc774\ud574\ud55c\ub2e4\ub294 \ub73b\uc785\ub2c8\ub2e4. \ub610\ud55c Angular 9\uc758 Schematics\ub3c4 \uc9c0\uc6d0\ub429\ub2c8\ub2e4.\r\n\r\n\r\nJavaScript \ubc0f TypeScript\r\n\ud15c\ud50c\ub9bf \uc5b8\uc5b4 \uc0bd\uc785\r\nJavaScript \ud30c\uc77c\uc758 HTML \ubb38\uc790\uc5f4\uacfc \uac19\uc774 \ud30c\uc77c\uc758 \uae30\ubcf8 \uc5b8\uc5b4\uc640 \uc0c1\uc774\ud55c \uc5b8\uc5b4\ub85c \uc791\uc131\ub41c \ucf54\ub4dc \uc870\uac01\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc790\uc8fc \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc WebStorm\uc740 \uc774\ub7ec\ud55c \ucf54\ub4dc \uc870\uac01\uc5d0 \ucf54\ub4dc \uc644\uc131\uc744 \ucda9\ubd84\ud788 \uc81c\uacf5\ud560 \uc218 \uc788\uc744 \uc815\ub3c4\ub85c \uc720\uc6a9\ud569\ub2c8\ub2e4. \ub610\ud55c \uc774\uc81c Pug(\uc608\uc804 Jade), Handlebars, EJS \ub4f1\uc744 \ud30c\uc77c\uc5d0 \uc0bd\uc785\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.\r\n\uc774 \uba54\ucee4\ub2c8\uc998\uc5d0 \ub300\ud55c \uae30\uc220 \uc6a9\uc5b4\ub294 language injections\uc785\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\ub824\uba74 Alt-Enter\ub97c \ub204\ub974\uace0 Inject Language or Reference(\uc5b8\uc5b4 \ub610\ub294 \ucc38\uc870 \uc0bd\uc785)\uc744 \uc120\ud0dd\ud55c \ub2e4\uc74c, \ubaa9\ub85d\uc5d0\uc11c \uc5b8\uc5b4\ub97c \uace0\ub974\uc138\uc694.\r\n\r\n\uc0c8 \uc2ec\ubcfc\uc758 \uc774\ub984 \uc81c\uc548\r\nJavaScript \ub610\ub294 TypeScript \ud30c\uc77c\uc5d0\uc11c \uc0c8 \ubcc0\uc218 \ubc0f \ub9e4\uac1c\ubcc0\uc218 \uc774\ub984\uc744 \ucd94\uac00\ud558\uba74 \ud504\ub85c\uc81d\ud2b8, \ud45c\uc900 \ub77c\uc774\ube0c\ub7ec\ub9ac, \uc0ac\uc6a9 \uc911\uc778 \uc885\uc18d \uc694\uc18c\uc5d0 \uc815\uc758\ub41c \ud074\ub798\uc2a4, \uc778\ud130\ud398\uc774\uc2a4, \uc720\ud615 \ubcc4\uce6d\uc758 \uc774\ub984\uc744 \uae30\ubc18\uc73c\ub85c \uc774\ub984\uc744 \uc81c\uc548\ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n\r\n\uc0c8\ub85c\uc6b4 \ubcc0\uc218, \ud568\uc218, \ud074\ub798\uc2a4, \uc778\ud130\ud398\uc774\uc2a4\uc758 \uacbd\uc6b0 \ub3d9\uc77c\ud55c \ubc94\uc704\uc5d0\uc11c \uc774\ubbf8 \uc0ac\uc6a9\ub418\uc9c0\ub9cc \uc544\uc9c1 \uc815\uc758\ub418\uc9c0 \uc54a\uace0 \ud574\uacb0\ub418\uc9c0 \uc54a\uc740 \uac83\uc73c\ub85c \ud45c\uc2dc\ub41c \uc774\ub984\uc758 \uc81c\uc548\ub3c4 \uc81c\uacf5\ub429\ub2c8\ub2e4.\r\n\uc608\ub97c \ub4e4\uc5b4 \uc0c8 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uae30\ub85c \uacb0\uc815\ud55c \uacbd\uc6b0, \ud638\ucd9c\ud55c \ud6c4 'function'\uc744 \uc785\ub825\ud558\uc5ec \ub9cc\ub4e4\uba74 \uc774\ub984 \uc81c\uc548\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ubb3c\ub860 \uc0ac\uc6a9 \uc704\uce58\uc5d0\uc11c Alt-Enter\ub97c \ub204\ub974\uace0 Create Function(\ud568\uc218 \uc0dd\uc131)\uc774\ub77c\ub294 \ube60\ub978 \uc218\uc815\uc744 \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.\r\n\r\nTypeScript 3.7 \uc9c0\uc6d0\r\nWebStorm 2019.3\uc5d0\ub294 TypeScript 3.7\uc758 \uc8fc\uc694 \uae30\ub2a5\uc778 optional chaining, nullish coalescing, assertion signatures","protected":false},"excerpt":{"rendered":"WebStorm 2019.3\uc774 \ucd9c\uc2dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4! \uc62c\ud574 \ub9c8\uc9c0\ub9c9 \uc8fc\uc694 \uc5c5\ub370\uc774\ud2b8\uc778 WebStorm 2019.3\uc5d0\uc11c\ub294 20% \ube68\ub77c\uc9c4 \uc2dc\uc791 \uc18d\ub3c4, Vue.js \uc9c0\uc6d0\uc758 \uc8fc\uc694 \uac1c\uc120 \uc0ac\ud56d, JavaScript\uc640 TypeScript\uc5d0 \uc9c0\uc6d0\ub418\ub294 \ub354 \uc2a4\ub9c8\ud2b8\ud574\uc9c4 \ucf54\ub4dc \uc644\uc131 \uae30\ub2a5\uc774 \uc81c\uacf5\ub418\uba70 \uc624\ub798\ub41c \ubc84\uadf8\uac00 \ub2e4\uc218 \uc218\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.WebStrom 2019.3 \ub2e4\uc6b4\ub85c\ub4dc \ud558\uae30\uc774","protected":false},"author":{"name":"Jessie Cho","link":"https:\/\/blog.jetbrains.com\/ko\/author\/jessie-chojetbrains-com"},"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[907,1114],"tags":[183,5431],"cross-post-tag":[],"acf":[],"featured_image":null,"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/posts\/33976"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/users\/964"},{"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=33976"}],"version-history":[{"count":1,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/posts\/33976\/revisions"}],"predecessor-version":[{"id":52629,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/posts\/33976\/revisions\/52629"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/media?parent=33976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/categories?post=33976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/tags?post=33976"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ko\/wp-json\/wp\/v2\/cross-post-tag?post=33976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}