{"id":667,"date":"2022-09-28T14:57:01","date_gmt":"2022-09-28T05:57:01","guid":{"rendered":"https:\/\/www.fsquare.co.kr\/?p=667"},"modified":"2022-09-28T14:57:08","modified_gmt":"2022-09-28T05:57:08","slug":"vue-js-%ec%84%a4%ec%b9%98","status":"publish","type":"post","link":"https:\/\/www.fsquare.co.kr\/?p=667","title":{"rendered":"Vue.js \uc124\uce58"},"content":{"rendered":"<div id=\"pl-gb667-69f2a3da948d6\"  class=\"panel-layout\" ><div id=\"pg-gb667-69f2a3da948d6-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-gb667-69f2a3da948d6-0-0\"  class=\"panel-grid-cell\" ><\/div><\/div><\/div>\n\n\n<p>React\uc640 Vue \uc911\uc5d0\uc11c \ub9ce\uc740 \uace0\ubbfc\uc744 \ud558\ub2e4\uac00 Vue\ub85c \ucd5c\uc885 \ub099\uc810\uc744 \ud588\ub2e4. Vue\ub97c \uc120\ud0dd\ud55c \uc774\uc720\ub294 React\uac00 \ud6e8\uc52c \uba4b\uc9c4 \ucf54\ub529\uacfc \ub192\uc740 \uc790\uc720\ub3c4, \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc571\uc744 \ub9cc\ub4e4\uae30\uc5d0 \ub354 \uc88b\ub2e4\uace0 \ud558\ub098 \ud300 \uc791\uc5c5\uc744 \ud560\ub54c\ub294 \uc88b\uc740 \ud300\uc6cd\uc774\ub098 \ube44\uc2b7\ud55c \uc218\uc900\uc758 \ud504\ub85c\uadf8\ub798\uba38\ub4e4\uc774 \ucf54\ub529 \uac00\uc774\ub4dc\ub77c\uc778\uc744  \uc815\ud574 \ub193\uace0 \uc791\uc5c5\ud558\uc9c0 \uc54a\uc558\uc744 \ub54c \ucf54\ub4dc\ub97c \uc77d\ub294\uac8c \ub108\ubb34 \uc9dc\uc99d\ub098\ub294 \uacbd\ud5d8\uc744 \ud574 \ubcf8\uc9c0\ub77c \uc870\uae08 \ub35c \uc138\ub828\ub3fc \ubcf4\uc774\uace0, \uc790\uc720\ub3c4\uac00 \ub0ae\uc544 \ubcf4\uc774\uba70 \uc81c\uc57d\uc0ac\ud56d\uc774 \uc788\uc5b4 \ubcf4\uc774\ub294 Vue\ub97c \uc120\ud0dd\ud558\uace0 \uae30\ub2a5\uc801 \ucc28\uc774\ub294 \uadf9\ubcf5\ud560 \uc218 \uc788\uc744 \uac83 \uac19\uc544 Vue\ub85c \ucd5c\uc885 \ub099\uc810\ud588\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1.  Visual Studio Code(VS Code) \uc124\uce58<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p> \ud604\uc7ac\uc758 \uc0ac\uc774\ud2b8 \uc8fc\uc18c\ub294 <a href=\"https:\/\/code.visualstudio.com\/download\" title=\"https:\/\/code.visualstudio.com\/download\">https:\/\/code.visualstudio.com\/download<\/a> \uc774\uba70 Window 11, User installer 64bit\ub97c \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc544\uc11c \uc124\uce58\ud558\uc600\ub2e4.  2022\ub144 9\uc6d4 \ub9d0 \ud604\uc7ac \ubc84\uc804\uc740 1.71 . \uc124\uce58\ub294 \uc708\ub3c4\uc6b0 \ud504\ub85c\uadf8\ub7a8\uc758 \ud2b9\uc9d5\ub2f5\uac8c \uc5b4\ub835\uc9c0 \uc54a\uac8c \uc124\uce58\ub97c \uc644\ub8cc\ud558\uc600\ub2e4. VS Code\ub294 vue\uc640 \uc0c1\uad00\uc5c6\ub294 \uadf8\ub0e5 \uac1c\ubc1c \ud234\uc774\ubbc0\ub85c \ud544\uc218 \ud15c\uc774 \uc544\ub2c8\uc9c0\ub9cc \ud1b5\ud569\ub41c \uae30\ub2a5\uacfc \uc775\uc219\ud55c UI\/UX\uc758 \uc7a5\uc810 \ub355\ubd84\uc5d0 \uc120\ud0dd\ud558\uc600\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2. Node.js \uc124\uce58<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p> nodejs.org site\uc5d0 \uac00\uc11c Node.js\ub97c <a href=\"https:\/\/nodejs.org\/ko\/\">\ub2e4\uc6b4\ub85c\ub4dc<\/a> \ubc1b\uc544 \uc124\uce58\ud558\uc600\ub2e4. \uad73\uc774 \ud55c\uae00\ub85c \ub41c \ud654\uba74 \uc124\uba85\uc774 \ud544\uc694\uc5c6\uc73c\uba74 https:\/\/nodejs.org\/en\/\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc544\ub3c4 \ub418\uba70 \ub2e4\uc591\ud55c \ub2e4\uc6b4\ub85c\ub4dc \ubc84\uc804\uc744 \ubcf4\uace0 \uc2f6\uc73c\uba74 <a href=\"https:\/\/nodejs.org\/ko\/download\/\">download \uba54\ub274<\/a>\ub97c \uc120\ud0dd\ud558\uba74 \ub41c\ub2e4. \ud604\uc7ac windows (x64) \ucd5c\uc2e0 \ubc84\uc804\uc740 18.9.1\uc774\uba70 node-v18.9.1-x64.msi\ub97c \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc558\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"636\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image.png\" alt=\"\" class=\"wp-image-669\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image.png 931w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-300x205.png 300w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-768x525.png 768w\" sizes=\"auto, (max-width: 931px) 100vw, 931px\" \/><\/a><\/figure>\n\n\n\n<p>\ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc740 \ud504\ub85c\uadf8\ub7a8\uc744 \ubc14\ub85c \uc2e4\ud589\ud558\uc5ec nodejs\ub97c \uc124\uce58.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"387\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-1.png\" alt=\"\" class=\"wp-image-671\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-1.png 495w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-1-300x235.png 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/figure>\n\n\n\n<p>\uc911\uac04\uc5d0 Native Module\uc744 \ucef4\ud30c\uc77c \ud558\uae30 \uc704\ud55c \ud234\uc744 \uc790\ub3d9\uc73c\ub85c \uc124\uce58\ud558\uaca0\ub0d0\uace0 \ubb3c\uc5b4\ubcf4\ub294\ub370 \uacfc\uac10\ud558\uac8c \uc2a4\ud0b5. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"387\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-2.png\" alt=\"\" class=\"wp-image-672\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-2.png 495w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-2-300x235.png 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/figure>\n\n\n\n<p>\uc774\uc81c \uc124\uce58\uac00 \uc2dc\uc791\ub41c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"387\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-3.png\" alt=\"\" class=\"wp-image-673\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-3.png 495w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-3-300x235.png 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/figure>\n\n\n\n<p>\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74 \uc798 \uc124\uce58 \ub418\uc5c8\ub294\uc9c0 cmd \ucc3d(command \ucc3d, \uba85\ub839 \ud504\ub86c\ud504\ud2b8 \ucc3d)\uc744 \uc5f4\uc5b4 \ubc84\uc804\uc744 \ud655\uc778\ud574 \ubcf8\ub2e4. Window \ud558\ub2e8\uc758 \uc791\uc5c5 \ud45c\uc2dc\uc904\uc758 \ub3cb\ubcf4\uae30\ub97c \uc120\ud0dd\ud558\uace0 cmd\ub97c \uc785\ub825\ud558\uace0 \uc5d4\ud130\ud0a4 \uc2e4\ud589.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"410\" height=\"260\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-5.png\" alt=\"\" class=\"wp-image-675\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-5.png 410w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-5-300x190.png 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3. vue.js \uc124\uce58<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>vue.js\ub294 \uba85\ub839 \ucc3d\uc5d0\uc11c npm\uc744 \uc2e4\ud589\ud558\uc5ec \uc124\uce58\ud560 \uc218 \uc788\ub2e4. \uc815\ud655\ud558\uac8c\ub294 vue\uc758 core\uc5d0 \ud574\ub2f9\ud558\ub294 Vue-CLI\ub97c \uc124\uce58\ud55c\ub2e4. npm\uc740 nodejs\ub97c \uc124\uce58\ud568\uc73c\ub85c\uc368 \uc790\ub3d9\uc73c\ub85c \uc124\uce58\ub418\ub294 \ud328\ud0a4\uc9c0 \uad00\ub9ac \ub3c4\uad6c(node package manager)\uc774\uba70 nodejs\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 javascript\ub85c \ub41c \ub2e4\uc591\ud55c \ud234\ub4e4\uc744 \uc124\uce58, \uad00\ub9ac\ud560 \uc218 \uc788\uac8c \ud574 \uc900\ub2e4. <\/p>\n\n\n\n<p>Vue-CLI\ub294Command Line Interface\uc758 \uc904\uc784\ub9d0\ub85c\uc368 \ud504\ub85c\uc81d\ud2b8\ub97c \ud560 \ub54c \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 Vue \ud658\uacbd\uc758 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870, \ud658\uacbd \uc815\ubcf4 \ud30c\uc77c \uc0dd\uc131 \ub4f1 \uae30\ubcf8\uc801\uc778 \uce78\ub9c9\uc774 \uacf5\uc0ac\ub97c \ud574\uc11c \ud504\ub85c\uc81d\ud2b8 \ud30c\uc77c\uc744 \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4. \uc989, \ud328\ud0a4\uc9c0 \uc124\uce58 \ud504\ub85c\uadf8\ub7a8\uc778 npm\uc73c\ub85c vue.js\ub97c \uc124\uce58\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"512\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-6-edited.png\" alt=\"\" class=\"wp-image-679\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-6-edited.png 682w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-6-edited-300x225.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/a><\/figure>\n\n\n\n<p>  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"512\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-7-edited.png\" alt=\"\" class=\"wp-image-678\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-7-edited.png 682w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-7-edited-300x225.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/a><\/figure>\n\n\n\n<p>npm\uc774 5\uac1c\uc758 deprecated \ub41c \ubc84\uc804\uc5d0 \ub300\ud55c warnning\uacfc \ub9c8\uc9c0\ub9c9\uc5d0 \uc790\uae30 \uc790\uc2e0\uc744 \uc5c5\ub370\uc774\ud2b8 \ud574 \ub2ec\ub77c\uace0 \uba54\uc2dc\uc9c0\ub97c \ub0b4\uace0 \ub05d\ub0ac\ub2e4. <\/p>\n\n\n\n<p>\uc77c\ub2e8 warning\uc740 warning\uc774\ubbc0\ub85c \uc720\ub150\ub9cc \ud558\uace0 skip\ud558\uace0 vue\uac00 \uc124\uce58\ub418\uc5c8\ub294\uc9c0 \ud655\uc778 \ud574 \ubcf8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"979\" height=\"512\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-8.png\" alt=\"\" class=\"wp-image-680\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-8.png 979w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-8-300x157.png 300w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-8-768x402.png 768w\" sizes=\"auto, (max-width: 979px) 100vw, 979px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Vue.js\ub97c \uc704\ud55c \uc6f9\ube0c\ub77c\uc6b0\uc800 Chrome\uc758 \ud655\uc7a5\ud504\ub85c\uadf8\ub7a8 devtools  \uc124\uce58(\uc120\ud0dd\uc0ac\ud56d)<\/strong> <\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc6f9\ud398\uc774\uc9c0 \ub514\ubc84\uae45\uc2dc \ubcf4\ud1b5 F12\ub97c \ub20c\ub7ec \uac1c\ubc1c\uc790\ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\ub294\ub370 vue.js\uc640 \uad00\ub828\ub41c \ud655\uc7a5 tool\uc744 \ud568\uaed8 \uc124\uce58\ud55c\ub2e4. \uc774 \uae30\ub2a5\uc740 \ud544\uc218 \uc694\uc18c\ub294 \uc544\ub2c8\uc9c0\ub9cc \ub514\ubc84\uae45\uc5d0 \uc870\uae08 \ub354 \uc720\uc6a9\ud560 \uc218 \uc788\uc73c\ub2c8 \uc124\uce58\ud55c\ub2e4. \uc0ad\uc81c\ub294 chrome \ud655\uc7a5 \ud329 \uad00\ub9ac \ud654\uba74 \ub0b4\uc5d0\uc11c \uc5b8\uc81c\ub4e0 \uc0ad\uc81c\uac00 \uac00\ub2a5\ud558\ub2e4.  \uc8fc\uc18c\ub294 https:\/\/chrome.google.com\/webstore \uc5d0\uc11c vue.js\ub97c \uac80\uc0c9\ud558\uac70\ub098  <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/vuejs-devtools\/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko\">\uc5ec\uae30<\/a> \ub97c \ucc38\uc870\ud574\uc11c \uc9c1\uc811 \uc124\uce58\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"962\" height=\"799\" src=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-9.png\" alt=\"\" class=\"wp-image-681\" srcset=\"https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-9.png 962w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-9-300x249.png 300w, https:\/\/www.fsquare.co.kr\/wp-content\/uploads\/2022\/09\/image-9-768x638.png 768w\" sizes=\"auto, (max-width: 962px) 100vw, 962px\" \/><\/a><\/figure>\n\n\n\n<p>\uc2e4\uc81c \uc6f9\uc571\uc774\ub098 \uc571\uc744 \uac1c\ubc1c \ud558\uae30 \uc704\ud574\uc11c\ub294 \ubc84\uc804 \ubb38\uc81c\uc640 \uae30\ub2a5\uc801\uc778 \ubb38\uc81c\ub85c \uc778\ud574 \ucd94\uac00\uc801\uc778 \uc124\uce58 \ub610\ub294 \uc0ad\uc81c\uac00 \ud544\uc694\ud560 \uc218 \uc788\uaca0\uc73c\ub098 \uae30\ubcf8\uc801\uc778 \uac1c\ubc1c \ud658\uacbd \uc124\uc815\uc740 \uc5b4\ub824\uc6c0 \uc5c6\uc774 clear.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>node.js\uc640 npm\uc744 \uc774\uc6a9\ud55c vue.js \uc124\uce58<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[27,26,25],"class_list":["post-667","post","type-post","status-publish","format-standard","hentry","category-vue","tag-nodejs","tag-npm","tag-vue"],"_links":{"self":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=667"}],"version-history":[{"count":5,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/667\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/667\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}