{"id":685,"date":"2022-09-28T23:59:41","date_gmt":"2022-09-28T14:59:41","guid":{"rendered":"https:\/\/www.fsquare.co.kr\/?p=685"},"modified":"2022-10-06T10:42:39","modified_gmt":"2022-10-06T01:42:39","slug":"vue%eb%a1%9c-%ec%95%b1-%eb%a7%8c%eb%93%a4%ea%b8%b0-1","status":"publish","type":"post","link":"https:\/\/www.fsquare.co.kr\/?p=685","title":{"rendered":"Vue\uc785\ubb38\/Vue\ub85c \uc571 \ub9cc\ub4e4\uae30 (1) – \uccab\ubc88\uc9f8 \uc608\uc81c \ub9cc\ub4e4\uae30"},"content":{"rendered":"\n

Vue\ub85c \uc571\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 \uc6b0\uc120 vue\ub97c \uc124\uce58\ud574\uc57c \ud55c\ub2e4.  vue.js \uc758 \uc124\uce58\ub294 \uc55e\uc758 \uae00<\/a>\uc744 \ucc38\uc870\ud558\uae38 \ubc14\ub780\ub2e4. \ud2b9\ubcc4\ud55c \uc624\ub958 \uc5c6\uc774 \uc124\uce58\uac00 \ub05d\ub09c \ub2e4\uc74c vue-cli\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \ucd08\uae30\ud654 \ud558\uace0 vue \uc571\uc744 \uc791\uc131\ud558\uba74 \ub41c\ub2e4.  \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 vue \uac00\uc774\ub4dc \ubb38\uc11c<\/a>\ub97c \ucc38\uc870\ud558\uc5ec \ud558\ub098\uc529 \ub530\ub77c\ud558\ub2e4 \ubcf4\uba74 vue \ud504\ub808\uc784\uc6cd\uc744 \uc774\ud574\ud558\uace0 \ud504\ub85c\uadf8\ub7a8\uc744 \uc798 \uc791\uc131\ud560 \uc218 \uc788\uc744 \uac83 \uac19\uc740\ub370, \uc2e4\uc81c \ud574\ubcf4\uba74 … \uc27d\uc9c0 \uc54a\ub2e4.<\/p>\n\n\n\n

\ub300\uccb4\ub85c \uc678\uad6d\uc560\ub4e4\uc774 \uc791\uc131\ud558\ub294 \uc5b8\uc5b4 \uc124\uba85\uc11c ( language reference documents )\ub4e4\uc740 \uc774\ud574\ud558\uae30 \uc27d\uace0 \ucd08\ubcf4\uc790\ub4e4\uc774 \uc798 \ub530\ub77c\ud560 \uc218 \uc788\ub294 \ubb38\uc11c\ub4e4\uc778\ub370, vue.js \ubb38\uc11c\ub294 \uae30\ubcf8\uc801\uc778 \uae30\uc220 \uc218\uc900\uc774 javascript\uc640 html, css \ub4f1\uc744 \uc5b4\ub290 \uc815\ub3c4 \uc774\ud574\ub97c \ud574\uc57c \uaca8\uc6b0 \ub530\ub77c\uac08 \uc218 \uc788\ub294 \uc218\uc900\uc774\ub77c \ucd08\ubcf4\uc790\uac00 \ub530\ub77c\uac00\uae34 \uc27d\uc9c0 \uc54a\ub2e4. \uc77c\ub2e8 \ucc38\uace0 \ub530\ub77c\ud574 \ubcf4\ub77c\ub294\ub370 \uadf8\ub9c8\uc800\ub3c4 \uc27d\uc9c0 \uc54a\uc740 \ud3b8\uc774\ub2e4.<\/p>\n\n\n\n

\uac00\uc7a5 \uae54\ub054\ud558\uac8c \ucd08\ubcf4\uc790\uac00 \uc785\ubb38\ud560 \uc218 \uc788\ub294 \ubb38\uc11c\ub294 MDN Web Docs<\/a>\uc5d0 \uc124\uba85\ub41c Vue \uc2dc\uc791\ud558\uae30<\/a>\ub97c \ub530\ub77c\uac00 \ubcf4\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n

1. Vue\uc758 \uc774\ud574<\/h2>\n\n\n\n

\uba3c\uc800 Vue\uc758 \uc815\uccb4\ub97c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. Vue\ub294 framework\uc73c\ub85c \uc571\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud55c server\uc640 client\uc5d0\uc11c \ud544\uc694\ud55c \ub2e4\uc591\ud55c \uae30\ub2a5\ub4e4\uc774 \ub9ce\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\ub2e4. \ub610\ud55c \ud544\uc694\ud55c \ubd80\ubd84\uc774 \uc788\uc73c\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uacc4\uc18d \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4. \ub9c8\uce58 \uc790\ubc14\uc5d0\uc11c \ub2e4\uc591\ud55c \uae30\ub2a5\ub4e4\uc774 \ubb36\uc5ec\uc11c spring\uacfc \uac19\uc740 framework\ub85c \uad6c\uc131\ub418\uc5b4 \ud654\uba74\uad00\ub9ac, \uc138\uc158\uad00\ub9ac, \ub85c\uadf8\uc778\uad00\ub9ac, db\uc5f0\uacb0 \uad00\ub9ac, bean \uc0dd\uc131 \ubc0f \uad00\ub9ac \ub4f1\uc744 \uc790\ub3d9\ud654\ud558\uace0 \ud3b8\ub9ac\ud558\uac8c \ud558\ub4ef\uc774 Vue\uc5d0\uc11c\ub3c4 jquery\uc640 \uac19\uc740 HTML \uad6c\uc131\uc694\uc18c(html element\ub4e4)\uc744 \uc870\uc791\ud558\uac70\ub098 \uad00\ub9ac, \ub514\uc790\uc778\uc744 \uace0\ub824\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4 \ud1b5\ud569, \ub370\uc774\ud130 \ud578\ub4e4\ub9c1,  \ud654\uba74\uac04\uc758 \uc5f0\uacb0 \ub4f1\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ud1b5\ud574 \uc27d\uac8c \ud1b5\ud569\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

\ub9cc\uc57d \uc6f9 \ud398\uc774\uc9c0\ub97c \uac1c\ubc1c\ud560 \ub54c jquery\ucc98\ub7fc \uac04\ub2e8\ud558\uac8c \ud654\uba74 (\ud754\ud788 frontend\ub77c\uace0 \ud558\ub294 \ubd80\ubd84 )\uc870\uc791\uc5d0 \ud544\uc694\ud55c \uae30\ub2a5\ub9cc \ud3ec\ud568\uc2dc\ud0a4\uae30 \uc704\ud574\uc11c\ub294 \uad73\uc774 framework\ub97c \ubaa8\ub450 \ud3ec\ud568\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n

vue \uc2dc\uc791\ud558\uae30<\/a>\uc5d0 \uc124\uba85\ub41c \ub2e4\uc74c\uc758 \uc608\uc81c\ub97c \ubcf4\uc790.<\/p>\n\n\n\n

<script>\n export default {\n  \/\/ Properties returned from data() become reactive state\n  \/\/ and will be exposed on `this`.\n  data() {\n     return {\n      count: 0<\/span>\n     }<\/span>\n  },<\/span>\n  \/\/ Methods are functions that mutate state and trigger updates.<\/span>\n  \/\/ They can be bound as event listeners in templates.<\/span>\n  methods: {<\/span>\n       increment() {<\/span>\n          this.count++<\/span>\n       }<\/span>\n  },<\/span>\n  \/\/ Lifecycle hooks are called at different stages<\/span>\n  \/\/ of a component's lifecycle.<\/span>\n  \/\/ This function will be called when the component is mounted.<\/span>\n  mounted() {<\/span>\n      console.log(`The initial count is ${this.count}.`)  <\/span>\n  }<\/span>\n}<\/span>\n<\/script><\/span>\n\n<template>\n<\/span>  <button @click=\"increment\">Count is: {{ count }}<\/button><\/span> \n<\/template><\/span><\/pre>\n\n\n\n
\uc774\ub7f0 \uc608\uc81c\uac00 \uc788\ub2e4. \uc774 \uc608\uc81c\ub97c \uc2e4\ud589\uc2dc\ud0a4\ub294 \ubc29\ubc95\ub3c4 \uad6c\uc870\ub3c4 \uc798 \ubaa8\ub974\uc9c0\ub9cc \ubb34\uc791\uc815 \ub530\ub77c\ud558\uba74 \ubc84\ud2bc\uc744 \ub204\ub97c\ub54c \ub9c8\ub2e4 1\uc529 \uc99d\uac00\ud558\ub294 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub2e4. \uadf8\ub7fc \uc774 \ubc29\ubc95\uc740 \uc5b4\ub5a8\uae4c?<\/p>\n\n\n\n
<html>\n<head>\n<\/head>\n<body>\n<script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script>\n\nclick button <button id=\"app\" onclick=\"inc()\">{{ count }}<\/button>\n\n<script>\n  const { createApp } = Vue\n\n  let btn = createApp({\n    data() {\n      return {\n        count: 10\n      }\n    }\n  }).mount('#app')\n  \n  function inc(){\n    btn.count++;\n  }\n<\/script>\n<\/body>\n\n<\/html><\/pre>\n\n\n\n
\uc774 \uc18c\uc2a4\ub294 vue-cli\ub97c \uc124\uce58\ud558\uc9c0\ub3c4 \uc54a\uace0, node.js\uc640 npm\uc774 \uc124\uce58\ub418\uc9c0\ub3c4 \uc54a\uc740 \uc0c1\ud0dc\uc5d0\uc11c\ub3c4 \ub611\uac19\uc774 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 1\uc529 \uc99d\uac00\ud558\ub294 \ud504\ub85c\uadf8\ub7a8\uc744 vue\ub97c \uc774\uc6a9\ud574\uc11c \uc791\uc131\ud560 \uc218 \uc788\uc74c\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
vue-cli\ub97c \uc774\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uad00\ub9ac\ud558\ub294 \uac83\uacfc script\ub97c \ubd88\ub7ec\uc640\uc11c \uc0ac\uc6a9\ud558\ub294 \uac83\uc758 \ucc28\uc774\ub294 \ubb34\uc5c7\uc77c\uae4c? <\/p>\n\n\n\n
html, jsp \ub4f1\uacfc \uac19\uc740 \uc77c\ubc18 \uc6f9\ud398\uc774\uc9c0\uc5d0\uc11c \uc544\ubb34 framework\uc5c6\uc774 javascript\ub85c \uc9c1\uc811 \uc791\uc131\ud558\uc5ec  vue \ud328\ud0a4\uc9c0\ub97c \ucc38\uc870\ud558\ub294 \uacbd\uc6b0 \uc0ac\uc6a9\uc790 \uc6f9 \ud654\uba74\uc5d0\uc11c vue.js\ub97c \ucc38\uc870\ud558\uc5ec \uc624\ube0c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uac01 \ubaa8\ub4c8\uc744 \ucef4\ud30c\uc77c\ud558\ub294 \ub4f1\uc758 \uc791\uc5c5\uc744 \uc218\ub3d9\uc73c\ub85c \uc2e4\ud589\ud574\uc57c \ud55c\ub2e4.  \uc774 \uacbd\uc6b0 \ud6e8\uc52c \uc790\uc720\ub3c4\uac00 \ub192\uc744 \uc218\ub3c4 \uc788\uace0 jquery\ub098 \ub2e4\ub978 js \ub77c\uc774\ube0c\ub7ec\ub9ac \ub4f1 \ub2e4\uc591\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ud63c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \ud558\uc9c0\ub9cc \uac1c\ubc1c \ub2e8\uacc4\uc5d0\uc11c vue-cli\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \uc0ac\uc6a9\uc790 \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc5d0 \uae30\ubcf8\uc801\uc774 \ud658\uacbd \uc124\uc815\uacfc \ucd94\uac00\uc801\uc778 \ud328\ud0a4\uc9c0\uc640 \ucef4\ud3ec\ub10c\ud2b8 \ub4f1\uc744 \ubbf8\ub9ac \ud3ec\ud568\ud574\uc11c \ubf08\ub300\ub97c \uc7a1\uc544\uc8fc\ubbc0\ub85c \ud3b8\ub9ac\ud560 \uc218 \uc788\uace0, \uae30\ubcf8\uc801\uc778 \ubc18\ubcf5\uc791\uc5c5\uc744 \ud560 \ud544\uc694\uac00 \uc5c6\uc73c\uba70,  \ud234\uc744 \uc774\uc6a9\ud558\uc5ec \ud3b8\ub9ac\ud558\uac8c \uac1c\ubc1c\ud558\ub3c4\ub85d \uc9c0\uc6d0\ud558\uba70, \uc18c\uc2a4\ub97c \ucef4\ud329\ud2b8\ud558\uac8c \uc791\uc131\ud558\uac70\ub098 \uacbd\ub7c9\ud654 \ud560 \uc218 \uc788\uc73c\uba70 \ucef4\ud3ec\ub10c\ud2b8\ud654 \ud558\uc5ec \uc7ac\uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\ub3c4\ub85d \ud55c\ub2e4\ub4e0\uc9c0 \ud558\ub294 \ub9ce\uc740 \uc7a5\uc810\uc744 \ucd94\uac00\ub85c \uc5bb\uc744 \uc218 \uc788\ub2e4.  <\/p>\n\n\n\n
\uadf8\ub7ec\ubbc0\ub85c \uc774\uc81c\ubd80\ud130\ub294 javascript\ub0b4\uc5d0 vue.js\ub97c \ucc38\uc870\ud558\ub294 \ubc29\ubc95 \ub9d0\uace0 vue-cli\ub97c \uc774\uc6a9\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544 \ubcf4\uae30\ub85c \ud55c\ub2e4.<\/p>\n\n\n\n
2. \uccab \ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8<\/h2>\n\n\n\n
\uc774\ubbf8 node.js\uac00 \uc124\uce58\ub418\uc5b4 \uc788\uace0 vue-cli\ub97c \uc124\uce58\ud55c \uc0c1\ud669\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e0\ub2e4. \uc6b0\uc120 \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac(\ud3f4\ub354)\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
Window\uc758 Command \ucc3d\nC:\\> cd \\<\/strong>\nC:\\> mkdir Project<\/strong>\nC:\\> cd Project<\/strong>\nC:\\Project> mkdir vue<\/strong>\nC:\\Project> cd vue<\/strong>\nC:\\Project\\vue> <\/pre>\n\n\n\n
\uc0ac\uc2e4 window\uc758 explorer\ub97c \ub744\uc6cc \uadf8\ub0e5 \ud3f4\ub354\ub97c \uc0dd\uc131\ud574\ub3c4 \ub3d9\uc77c\ud558\ub2e4.<\/p>\n\n\n\n
Linux\uc758 \uacbd\uc6b0 Terminal (term, xterm \ub4f1)\n[user@centos ~] mkdir project<\/strong>\n[user@centos ~] cd project<\/strong>\n[user@centos project] mkdir vue<\/strong>\n[user@centos project] cd vue<\/strong>\n[user@centos vue ]<\/pre>\n\n\n\n
\uc774\uc81c vue project\ub97c \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
vue create Hello<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\ud654\uc0b4\ud45c \ud0a4\ubcf4\ub4dc\ub97c \uc774\uc6a9\ud558\uc5ec \uc62e\uaca8 \ub2e4\ub2c8\uba70 \uc120\ud0dd\ud560 \uc218 \uc788\ub2e4. \uc2dc\ud5d8\uc0bc\uc544 Manually select features\ub85c \ud574 \ubd10\ub3c4 \uc88b\uc744 \uac83\uc774\ub2e4. Manually select features\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ud3ec\ud568\ud560 \ubc88\ub4e4\uc744 \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \ud654\uba74\uc73c\ub85c \ub118\uc5b4\uac00\uace0 Default Vue3\ub85c \ud558\uba74 babel\uacfc lint\ub97c \uc774\uc6a9\ud558\ub3c4\ub85d \uc124\uc815\ub41c\ub2e4. \uc77c\ub2e8 \uccab\ubc88\uc9f8\ub85c \ub4e4\uc5b4\uac00\ubcf4\uc790. \uc5d4\ud130\ud0a4\ub97c \uce5c\ub2e4.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\ubb54\uac00 \uc5f4\uc2ec\ud788 \uc124\uce58\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\ucef4\ud30c\uc77c \ub610\ub294 \ucd08\uae30 \uc124\uc815\uc744 \ub2e4 \ud588\ub2e8\ub2e4. \ud560 \uc77c\uc740 \uc81c\uc77c \ub9c8\uc9c0\ub9c9 \ub450 \uc904\uc774\ub2e4. cd hello \ud558\uace0 npm run serve\ub97c \uc2e4\ud589\ud558\uc5ec \ud398\uc774\uc9c0\ub97c \uc6f9\uc11c\ubc84\uc5d0 \ub744\uc6b0\ub294 \uc77c\uc774\ub2e4.<\/p>\n\n\n\n
\uadf8\ub7f0\ub370, \uc0b4\uc9dd \ud638\uae30\uc2ec\uc774 \ub4e4\uc5b4 \ub3c4\ub300\uccb4 vue\uac00 \ubb34\uc2a8 \uc791\uc5c5\uc744 \ud588\ub294\uc9c0 \ud655\uc778\ud574 \ubcf4\uace0 \uc2f6\uc5c8\ub2e4.<\/p>\n\n\n\n
C:\\project\\vue> cd hello\nC:\\project\\vue\\hello> dir<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\ub0b4\uce5c\uae40\uc5d0 notepad(\uba54\ubaa8\uc7a5)\ub97c \uc774\uc6a9\ud558\uc5ec jsconfig.json \ud30c\uc77c\ub3c4 \ubcf4\uace0 src \ub514\ub809\ud1a0\ub9ac \ubc11\uc5d0 \uc788\ub294 App.vue \ud30c\uc77c\ub3c4 \ud655\uc778\uc744 \ud574 \ubcf4\uc558\ub2e4.<\/p>\n\n\n\n
jsconfig.json \ud30c\uc77c<\/em>\n\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"esnext\",\n    \"baseUrl\": \".\/\",\n    \"moduleResolution\": \"node\",\n    \"paths\": {\n      \"@\/*\": [\n        \"src\/*\"\n      ]\n    },\n    \"lib\": [\n      \"esnext\",\n      \"dom\",\n      \"dom.iterable\",\n      \"scripthost\"\n    ]\n  }\n}<\/pre>\n\n\n\n
src \ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 App.vue \ud30c\uc77c<\/em>\n\n<template>\n  <img alt=\"Vue logo\" src=\".\/assets\/logo.png\">\n  <HelloWorld msg=\"Welcome to Your Vue.js App\"\/>\n<\/template>\n\n<script>\nimport HelloWorld from '.\/components\/HelloWorld.vue'\n\nexport default {\n  name: 'App',\n  components: {\n    HelloWorld\n  }\n}\n<\/script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n<\/style>\n<\/pre>\n\n\n\n
Public \ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 index.html \ud30c\uc77c<\/em>\n\n<!DOCTYPE html>\n<html lang=\"\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\n    <title><%= htmlWebpackPlugin.options.title %><\/title>\n  <\/head>\n  <body>\n    <noscript>\n      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.<\/strong>\n    <\/noscript>\n    <div id=\"app\"><\/div>\n    <!-- built files will be auto injected -->\n  <\/body>\n<\/html>\n<\/pre>\n\n\n\n
3. \uc6f9 \uac8c\uc2dc<\/h2>\n\n\n\n
\uc774\uc81c \ud654\uba74\uc5d0 \ub744\uc6cc\uc11c \ubb50\uac00 \ub9cc\ub4e4\uc5b4\uc84c\ub294\uc9c0 \ud655\uc778\ud574 \ubcf4\uae30 \uc704\ud574 npm  run  serve\ub3c4 \uc2e4\ud589\ud574 \ubcf4\uc558\ub2e4.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\ud654\uba74\uc5d0 \uc9c0\uc2dc\ud55c\ub300\ub85c \uc6f9\ube0c\ub77c\uc6b0\uc800\ub97c \ub744\uc6cc http:\/\/localhost:8080\/ \uc744 \uc8fc\uc18c\ucc3d\uc5d0 \uc785\ub825\ud574 \ubcf4\ub2c8 \ubb54\uac00 \ub728\uae34 \ub5b4\ub2e4.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\uc0dd\uc131\ub41c \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \uac04\ub2e8\ud788 \ud655\uc778\ud558\uace0 \ub118\uc5b4\uac00\uc790\uba74 <\/p>\n\n\n\n
\ub514\ub809\ud1a0\ub9ac\ub294 node_modules, public, src \uc138\uac1c\uac00 \uae30\ubcf8\uc801\uc73c\ub85c \uc0dd\uae30\uace0 public \uc544\ub798\uc5d0\ub294 favicon\uacfc index.html\uc774 src \uc544\ub798\uc5d0 vue\uc640 \uc2e4\uc81c \ud654\uba74\uc5d0 \ud45c\ud604\ub418\ub294 \uc18c\uc2a4 \uaca9\uc758 \ud30c\uc77c\ub4e4\uc774 \ub4e4\uc5b4 \uc788\ub2e4. \uc774 \ud30c\uc77c\ub4e4\uc744 \uc218\uc815\ud558\uc5ec \uc6b0\ub9ac\uac00 \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc8fc\uace0\uc790 \ud558\ub294 \ud30c\uc77c\ub4e4\uc744 \ub9cc\ub4e4\uba74 \ub41c\ub2e4. \uc774 \ud30c\uc77c\ub4e4\uc774 build\uacfc\uc815\uc744 \uac70\uce58\uba74 html \ud30c\uc77c\uacfc css, js \ud30c\uc77c\ub4e4\ub85c \ubd84\ub9ac\ub418\uc5b4 \uc0dd\uc131\ub41c\ub2e4.<\/p>\n\n\n\n
\uc77c\ub2e8 \uc5ec\uae30\uae4c\uc9c0 \ud574\uc11c \uccab\ubc88\uc9f8 vue \ud398\uc774\uc9c0\ub97c \ub744\uc6cc \ubd24\ub2e4.  \uac04\ub2e8\ud788 \uad6c\uc870\ub97c \ubcf4\uba74 src \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 \uae30\ubcf8\uc801\uc778 App.vue \ud30c\uc77c\uacfc main.js \ud30c\uc77c\uc774 \uc788\ub294\ub370 \uc774 \ub450\uac1c\uc758 \ud30c\uc77c\uc774 \ud654\uba74\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud55c \uae30\ubcf8 \uc694\uc18c\ub4e4\uc774\ub2e4. \uc774 \ud30c\uc77c\ub4e4\uc744 \uc218\uc815\ud558\uba74 \ucef4\ud30c\uc77c\ub41c index.html \ud30c\uc77c\ub85c \uc6b0\ub9ac\uac00 \ub9cc\ub4e4\uace0\uc790 \ud558\ub294 \ud654\uba74\uc774 \uc0dd\uc131\ub418\uc9c0 \uc54a\uc744\uae4c \ud55c\ub2e4. \uc544\uc9c1 DB\ub97c \ub04c\uc5b4\uc624\uace0 \ud654\uba74\uc5d0 \uac8c\uc2dc\ud310\uacfc \ucc28\ud2b8\ub97c \ub744\uc6b0\uace0 \ud578\ub4dc\ud3f0\uc5d0\uc11c \uc0ac\uc9c4\ub4e4\uc744 \uad00\ub9ac\ud558\ub294 \uae30\ub2a5\uc744 \ub9cc\ub4e4\uae30\uc5d0\ub294 2% \ubd80\uc871\ud558\uc9c0\ub9cc \uc77c\ub2e8 vue\ub85c \ubb58 \ud560 \uc218 \uc788\ub294\uc9c0 \ub9db\ubcf4\uae30 \uc815\ub3c4 \ub05d\ub0c8\ub2e4\uace0 \ud560 \uc218 \uc788\uaca0\ub2e4. \ub05d.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vue\ub85c \uc571\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 \uc6b0\uc120 vue\ub97c \uc124\uce58\ud574\uc57c \ud55c\ub2e4.  vue.js \uc758 \uc124\uce58\ub294 \uc55e\uc758 \uae00\uc744 \ucc38\uc870\ud558\uae38 \ubc14\ub780\ub2e4. \ud2b9\ubcc4\ud55c \uc624\ub958 \uc5c6\uc774 \uc124\uce58\uac00 \ub05d\ub09c \ub2e4\uc74c vue-cli\ub85c \ud504\ub85c\uc81d\ud2b8\ub97c \ucd08\uae30\ud654 \ud558\uace0 vue \uc571\uc744 \uc791\uc131\ud558\uba74 \ub41c\ub2e4.  \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 vue \uac00\uc774\ub4dc \ubb38\uc11c\ub97c \ucc38\uc870\ud558\uc5ec \ud558\ub098\uc529 \ub530\ub77c\ud558\ub2e4 \ubcf4\uba74 vue \ud504\ub808\uc784\uc6cd\uc744 \uc774\ud574\ud558\uace0 \ud504\ub85c\uadf8\ub7a8\uc744 \uc798 \uc791\uc131\ud560 \uc218 \uc788\uc744 \uac83 \uac19\uc740\ub370, \uc2e4\uc81c \ud574\ubcf4\uba74 … \uc27d\uc9c0 \uc54a\ub2e4. \ub300\uccb4\ub85c \uc678\uad6d\uc560\ub4e4\uc774 […]<\/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":[29,25,30],"class_list":["post-685","post","type-post","status-publish","format-standard","hentry","category-vue","tag-vue"],"_links":{"self":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/685","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=685"}],"version-history":[{"count":8,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/685\/revisions"}],"predecessor-version":[{"id":790,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/685\/revisions\/790"}],"wp:attachment":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}