{"id":705,"date":"2022-09-29T13:28:09","date_gmt":"2022-09-29T04:28:09","guid":{"rendered":"https:\/\/www.fsquare.co.kr\/?p=705"},"modified":"2022-10-06T10:44:06","modified_gmt":"2022-10-06T01:44:06","slug":"vue%eb%a1%9c-%ec%95%b1-%eb%a7%8c%eb%93%a4%ea%b8%b0-2-vscode-%ec%84%a4%ec%a0%95-%eb%b0%8f-%ed%94%84%eb%a1%9c%ea%b7%b8%eb%9e%a8-%ec%88%98%ec%a0%95","status":"publish","type":"post","link":"https:\/\/www.fsquare.co.kr\/?p=705","title":{"rendered":"Vue\uc785\ubb38\/Vue\ub85c \uc571 \ub9cc\ub4e4\uae30 (2) – VSCode \uc124\uc815 \ubc0f \ud504\ub85c\uadf8\ub7a8 \uc218\uc815"},"content":{"rendered":"

Vue.js \uc124\uce58\uc2dc \ud568\uaed8 \uc124\uce58\ud55c Visual Studio Code(\uc774\ud558 VSCode)\ub97c \uc774\uc6a9\ud55c \uac1c\ubc1c \ud658\uacbd\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\ub97c \uc5f4\uc5b4\ubcf4\uace0 \ub514\ubc84\uae45\uc744 \ud574 \ubcf4\ub3c4\ub85d \ud558\uc790. \uc544\uc9c1 \ubc30\ud3ec\ud658\uacbd\uc774\ub098 git, backend, DB \ub4f1\uc740 \uc2e0\uacbd \uc4f8 \ud2c8\uc774 \uc5c6\uc73c\ub2c8 \uac04\ub2e8\ud55c \uc1fc\ud551\ubab0 \uc0c1\ud488 \uc18c\uac1c \ud654\uba74\uc758 \ubf08\ub300(Frame)\ub97c \ud558\ub098 \ub9cc\ub4e4\uc5b4\ubcf4\uc790. \uc2e4\uc81c\ub85c\ub294 \uba54\ub274\uae4c\uc9c0 \ub728\uba74 \uc88b\uaca0\uc9c0\ub9cc \uac04\ub2e8\ud788 \uc790\ub9ac(Frame)\ub9cc \uc7a1\uace0 \ub118\uc5b4\uac00\ub3c4\ub85d \ud558\uaca0\ub2e4.<\/p>\n

1. VS Code \ud658\uacbd \uc124\uc815<\/h2>\n

\uc6b0\uc120 vue.js\ub97c \uc124\uce58\ud558\uace0 \uc0dd\uc131\ud55c \uccab\ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc778 HelloWorld \ud504\ub85c\uc81d\ud2b8\ub97c VSCode\uc5d0 \ubd88\ub7ec\uc11c \uc5b4\ub5bb\uac8c \ub514\ubc84\uadf8 \ud558\ub294\uc9c0 \ud655\uc778\uc744 \ud558\uace0, Vue\uc5d0\uc11c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \ud504\ub85c\uc81d\ud2b8\ub294 \ub3c4\ub300\uccb4 \uc5b4\ub5bb\uac8c \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0 \ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n

VSCode\ub97c \uc2e4\ud589\uc2dc\ud0a8\ub2e4.<\/p>\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\uae30\ubcf8\uc801\uc778 VSCode\uc758 \ucd08\uae30\ud654\uba74\uc778\ub370 Korean Language Pack \uacfc Live Server\ub97c \uc124\uce58\ud588\ub2e4. \uc124\uce58\ub294 \ud654\uba74 \uc81c\uc77c \uc88c\uce21\uc5d0 \uc870\uac01\ub09c \ub124 \uac1c\uc758 \uc0ac\uac01\ud615\uc744 \ub204\ub974\uba74 \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc870\ud68c\ud560 \uc218 \uc788\uace0 \ud074\ub9ad \uba87 \ubc88\uc73c\ub85c \uac04\ub2e8\ud788 \uc124\uce58\ud560 \uc218 \uc788\ub2e4. Live Server\ub294 \uad73\uc774 \ud544\uc694\uc5c6\uc9c0\ub9cc VSCode\uc5d0\uc11c \ub514\ubc84\uadf8\ub97c \ucee8\ud2b8\ub864 \ud574 \uc900\ub2e4\uace0 \ud574\uc11c \uae54\uc544\ubcf4\uc558\ub2e4. \uc2e4\uc81c\ub85c\ub294 Chrome\uc5d0\uc11c \uc9c1\uc811 \ud574\ub3c4 \ub418\uc9c0\ub9cc \ud1b5\ud569\ud558\uc5ec \ub514\ubc84\uadf8 \ud558\ub294 \uac83\uc774 \ub354 \ud3b8\ub9ac\ud560 \uc218 \uc788\uc744\uac70\ub77c\ub294 \uc0dd\uac01\uc5d0 \ud55c\ubc88 \ud574 \ubcf4\uae30\ub85c \ud588\ub2e4.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\ud30c\uc77c\uc758 \ud3f4\ub354 \uc5f4\uae30\ub97c \uc120\ud0dd\ud558\uc5ec \uc9c0\ub09c\ubc88 \ub9cc\ub4e0 \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354(C:\\project\\vue\\hello)\ub97c \uc120\ud0dd\ud558\uba74 \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc758 \ud3f4\ub354 \uad6c\uc870\uac00 \uc790\ub3d9\uc73c\ub85c \ub72c\ub2e4. \ub728\uc9c0 \uc54a\uc744\ub54c\ub294 \uc81c\uc77c \uc88c\uce21 \uc544\uc774\ucf58\ub4e4 \uc911 \uac00\uc7a5 \uc704 (\ud0d0\uc0c9\uae30) \uc544\uc774\ucf58\uc744 \uc120\ud0dd\ud55c\ub2e4. \ud504\ub85c\uc81d\ud2b8 \ub0b4\uc758 src \ud3f4\ub354\ub97c \uc5f4\uc5b4\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\uc544\ud558. \uc774\ub807\uac8c \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\ub97c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \uad6c\ub098 \ud558\uace0 \uc77c\ub2e8 \ub118\uc5b4\uac00\uae30\ub85c \ud55c\ub2e4. components \ubc11\uc5d0 \uc788\ub294 HelloWorld.vue \ud30c\uc77c\uc5d0 \uc2e4\uc81c \ud654\uba74\uc5d0 \ub744\uc6cc\uc8fc\ub294 \ub0b4\uc6a9\uc774 \ub4e4\uc5b4\uac00 \uc788\uace0, App.vue\ub294 \uc774 \ub0b4\uc6a9\uc744 \ucd08\uae30\ud654\ud558\uc5ec \ud654\uba74\uc5d0 \ubd99\uc5ec \uc8fc\ub294 \ubd80\ubd84, main.js\ub294 index.html\uc774 \ud574\uc57c \ud558\ub294 vue \ud504\ub808\uc784\uc6cd\uc744 \uc77d\uc5b4\uc624\ub294 \ubd80\ubd84\uacfc \uc774\ub97c \ud654\uba74 <div> element\uc5d0 mount \ud574\uc8fc\ub294 (\ubd99\uc5ec\uc8fc\ub294) \uc5ed\ud560\uc744 \ud55c\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

2. \ud504\ub85c\uadf8\ub7a8 \uc2e4\ud589<\/h2>\n\n\n\n

\ud130\ubbf8\ub110\uc744 \uc2e4\ud589\ud558\uace0 \uac1c\ubc1c\uc6a9 \uc6f9\uc11c\ubc84\ub97c PC \uc0c1\uc5d0\uc11c \uc2e4\ud589\ud55c\ub2e4. \uc9c0\ub09c \uc2dc\uac04\uc5d0 \ud574 \ubcf4\uc558\ub358 npm run serve \uba85\ub839\uc774\ub2e4.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\ud130\ubbf8\ub110\uc5d0\uc11c npm run serve \uba85\ub839\uc744 \uc9c1\uc811 \ud0c0\uc774\ud551 \uccd0\uc11c \uc2e4\ud589 \uc2dc\ud0a8\ub2e4.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\ud654\uba74\uc5d0\uc11c \uba54\ub274\uc5d0 \uc788\ub294 \uc2e4\ud589(R)\uc758 \ub514\ubc84\uae45 \uc2dc\uc791(\ub610\ub294 \ud654\uba74\uc5d0\uc11c \ubc14\ub85c F5 \ud0a4\ub97c \ub204\ub978\ub2e4)\uc744 \uc2e4\ud589\ud558\uba74 \uc6f9\ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc774 \ub728\uba74\uc11c localhost:8080\uc5d0 \uc811\uc18d\ud558\uc5ec HelloWorld \ud654\uba74\uc744 \ubcf4\uc5ec\uc900\ub2e4. \ub9cc\uc57d \uc774\uc0c1\ud55c \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\uba74 ( \ud655\uc7a5\uc790\ub97c \uc778\uc2dd\ud558\uc9c0 \ubabb\ud55c\ub2e4\ub294 \uc885\ub958\uc758 \uc5d0\ub7ec\uba54\uc2dc\uc9c0\uac00 \ub728\ub294 \uacbd\uc6b0) \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc788\ub294 .vscode \ud3f4\ub354\uc5d0 \uc788\ub294 launch.json \ud30c\uc77c\uc744 \uc218\uc815\ud574 \uc900\ub2e4. \ub9cc\uc57d \uc5c6\uc73c\uba74 \uc0dd\uc131\ud574 \uc8fc\uc5b4\ub3c4 \uc88b\ub2e4.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

launch.json \ud30c\uc77c\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \uc800\uc7a5\uc774 \ub418\uba74 F5\ud0a4\ub97c \ub204\ub974\uba74 \ubc14\ub85c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 \ub728\uba74\uc11c \ub514\ubc84\uae45\uc774 \uc2dc\uc791\ub41c\ub2e4.<\/p>\n\n\n\n

\uc774\uc81c \uc900\ube44\uac00 \ub2e4 \ub05d\ub0ac\uc73c\ub2c8 \ub514\ubc84\uae45\uc744 \ub744\uc6cc \ub454 \ucc44 \ubcf8\uaca9\uc801\uc73c\ub85c \ud504\ub85c\uadf8\ub7a8\uc744 \uace0\uccd0\ubcf4\uc790.<\/p>\n\n\n\n

3. \ucef4\ud3ec\ub10c\ud2b8 \ucd94\uac00<\/h2>\n\n\n\n

SimpleView <\/a>\uc0ac\uc774\ud2b8\ub97c \ucc38\uc870\ud558\uc5ec \ud654\uba74\uc744 \uc138 \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uad6c\ubd84\ud574\uc11c \uc791\uc131\ud558\uaca0\ub2e4. \uc5ec\uae30\uc11c \ub9d0\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud558\ub098\uc758 \uc815\ubcf4 \ub2e8\uc704\ub85c \ud654\uba74\uc5d0\uc11c \ub300\uccb4\ub85c \ud55c\uac1c\uc758 \uad6c\uc5ed\uc744 \ucc28\uc9c0\ud558\ub294 \ub369\uc5b4\ub9ac\ub97c \ub9d0\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uc0c1\ub2e8\uc758 \uace0\uc815\ub41c \uba54\ub274\ub098, \uc88c\uce21 \uc138\ub85c \uba54\ub274, \uc6b0\uce21\uc5d0 \uace0\uc815\ub418\ub294 \ub9c1\ud06c, \uac8c\uc2dc\ud310, image\ub97c grid\uc5d0 \ud1b5\ud569\ud55c \uac83 \ub4f1\ub4f1. \ud654\uba74\uc5d0\uc11c \ud558\ub098\uc758 \uac19\uc740 \uc5ed\ud560\uc744 \ud558\ub294 \ub369\uc5b4\ub9ac\ub4e4\uc774 \ubaa8\ub450 \ucef4\ud3ec\ub10c\ud2b8\uc774\ub2e4.<\/p>\n\n\n\n

\ud654\uba74\uc744 \ucd5c\uc0c1\ub2e8 header\uc640 \uc88c\uce21 menu, \uc6b0\uce21 content\uc758 \uc138\uac1c\uc758 \ub808\uc774\uc544\uc6c3\uc73c\ub85c \ub098\ub204\uc5b4 \ubcf4\uaca0\ub2e4.<\/p>\n\n\n\n

\uc6b0\uc120 VSCode \ub0b4\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\uc758 src\\components\uc5d0 \uc138\uac1c\uc758 \ud30c\uc77c\uc744 \uc0dd\uc131\ud55c\ub2e4. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\uac01\uac01 Header.vue, Menu.vue, Content.vue\ub85c \uac01\uac01 \ub9cc\ub4e4\uc5b4\uc900\ub2e4.<\/p>\n\n\n\n

\uac01 \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc740 \uac70\uc758 \ube44\uc2b7\ud558\uc9c0\ub9cc \uc57d\uac04\uc529 \ub2e4\ub974\uac8c \ud560 \uc608\uc815\uc774\ub2e4.<\/p>\n\n\n\n

[Header.vue \ud30c\uc77c]\n\n<template>\n    <div class=\"header\">\n        <div>Header <\/div>\n        <div>\uc548\ub155\ud558\uc138\uc694. \ub2e4 \ud314\uc544 \uc1fc\ud551\ubab0\uc785\ub2c8\ub2e4<\/div>\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    name: \"headerDiv\"\n};\n<\/script>\n\n<style scoped>\n.header {\n  position: sticky;\n  height: 150px;\n  border-bottom: 1px solid #ebebeb;\n  background-color:yellow;\n}\n<\/style><\/pre>\n\n\n\n
[Menu.vue \ud30c\uc77c]\n\n<template>\n    <div class=\"menu\"> \n        <div>\n            Menu \n        <\/div>\n        <div>\n            \uc138\ub85c\ub85c \uba54\ub274\ub97c \ub123\uaca0\uc2b5\ub2c8\ub2e4\n        <\/div>\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    name: \"menuDiv\"\n};\n<\/script>\n\n<style scoped>\n.menu {\n    flex: 1;\n    background-color:lightgreen;\n}\n<\/style><\/pre>\n\n\n\n
[Content.vue \ud30c\uc77c]\n\n<template>\n    <div class=\"grid\"> \n        Content\u3134 \n            <div>\n                <img src=\"https:\/\/cdn.pixabay.com\/photo\/2022\/08\/23\/09\/03\/house-7405403_960_720.jpg\">\n            <\/div>\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    name: \"nameDiv\"\n};\n<\/script>\n\n<style scoped>\n.grid {\n  flex: 2;\n}\n<\/style><\/pre>\n\n\n\n
\ud558\ub098\uc529 \uc124\uba85\uc744 \ud558\uc790\uba74 \uc138 \uac1c\uc758 \ud30c\uc77c\uc774 \ubaa8\ub450 \ub3d9\uc77c\ud55c \uad6c\uc870\ub97c \uac00\uc9c4\ub2e4.<\/p>\n\n\n\n
<template>\n     \ud45c\ud604\ud560 \ub0b4\uc6a9 \ub530\uc704\uac00 html \ud0dc\uadf8\ub85c \ub4e4\uc5b4\uac10\n<\/template>\n\n<script>\n    export default {\n        name: \"\uace0\uc720\uc758_\uc774\ub984\"\n    }\n<\/script>\n\n<style scoped>\n   \uc774 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\ub9cc \uc801\uc6a9\ub418\ub294 \ub514\uc790\uc778 style\n<\/style><\/pre>\n\n\n\n
\uc774 \ub54c \uc774\ub984\uc744 \uc9c0\uc815\ud574 \uc8fc\uc9c0 \uc54a\uc73c\uba74 lint\uac00 \ucef4\ud30c\uc77c \uc5d0\ub7ec\ub97c \uc3df\uc544\ub0b8\ub2e4. \uadf8\ub9ac\uace0 \uc774\ub984\ub3c4 \ud558\ub098\uc758 \ub2e8\uc5b4 \uc608\ub97c\ub4e4\uc5b4 “School” \ub4f1\uacfc \uac19\uc774 \ud558\uc9c0\ub9d0\uace0 \ub450\uac1c \uc774\uc0c1\uc758 \ub2e8\uc5b4\uc758 \uacb0\ud569\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud55c\ub2e4. \ud604\uc7ac \ub610\ub294 \ubbf8\ub798\uc758 html element \uba85\uce6d\uacfc \ud63c\ub3d9\ub418\ub294 \uac83\uc744 \ub9c9\uae30 \uc704\ud568\uc774\ub77c\uace0 \ud558\ub2c8 \ubd88\ud3b8\ud574\ub3c4 \ub530\ub77c\uc918\uc57c \ud55c\ub2e4. \uc774\ub984 \uc0ac\uc774\ub97c “_”\ub098  \ub450 \uac1c \uc774\uc0c1\uc758 \ub2e8\uc5b4\ub97c \uc11e\uc5b4\uc11c \ub300\uc18c\ubb38\uc790\ub85c \uad6c\ubd84\ud574\uc11c \uc801\uc808\ud788 \uc368 \uc8fc\uc790.<\/p>\n\n\n\n
\uc774\uc81c \uac01\uac01\uc758 \ud30c\uc77c\uc744 \ubaa8\ub450 \uc800\uc7a5\ud574 \uc900\ub2e4. \uadf8\ub798\ub3c4 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ub72c \uacb0\uacfc\ubb3c\uc5d0\ub294 \uc544\ubb34 \ubcc0\ud654\uac00 \uc5c6\ub2e4. \uc65c\ub0d0\ud558\uba74 \uc774 \uac01\uac01\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud654\uba74\uc5d0 \ubfcc\ub824\uc8fc\ub294 \uac83\uc740 App.vue\uac00 \ud558\ub294 \uc77c\uc774\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n
\uc774\uc81c App.vue \ud30c\uc77c\uc744 \uace0\uccd0\ubcf4\uaca0\ub2e4.<\/p>\n\n\n\n
[App.vue \ud30c\uc77c]\n\n<template>\n  <div>\n    <headerDiv\/>\n      <div class=\"wrap\">\n        <menuDiv\/>\n        <contentDiv\/>\n      <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport headerDiv from \".\/components\/Header\";\nimport menuDiv from \".\/components\/Menu\";\nimport contentDiv from \"@\/components\/Content\";\n\nexport default {\n  name: \"app\",\n  components: { \/\/ \uac00\uc838\uc628 component \ub4e4\uc744 \ub4f1\ub85d\ud569\ub2c8\ub2e4.\n    headerDiv,\n    menuDiv,\n    contentDiv\n  }\n};\n<\/script>\n\n<style>\n.wrap {\n  display: flex;\n}\n<\/style>\n<\/pre>\n\n\n\n
<script> \uc601\uc5ed\uc5d0 \uc788\ub294 import\ub294 \uac01 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc9c0\uc815\ud55c \uc774\ub984\uc744 \ubd88\ub7ec\uc624\ub294 \ubd80\ubd84\uc774\ub2e4. \uc774\ub54c contentDiv\ub294 \uad73\uc774 \ud30c\uc77c \uba85 \uc55e\uc5d0 “@”\ub97c \uc4f0\uace0 \uc788\ub294\ub370 \uc774\ub294 \uc808\ub300\uacbd\ub85c\ub85c \ubd88\ub7ec\uc624\ub77c\ub294 \uac83\uc774\ub2e4. ( src \ub514\ub809\ud1a0\ub9ac\ub97c \uae30\uc900\uc73c\ub85c \uc808\ub300\uacbd\ub85c )<\/p>\n\n\n\n
\uadf8\ub9ac\uace0  <style>\uc740 \uc804\uccb4 \ud398\uc774\uc9c0\uc5d0 \uc801\uc6a9\ub418\ub294 style\uc774\uba70 \uc138 \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubc30\uce58\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ud55c\ub2e4. \uc774\uc81c \uc800\uc7a5\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ub514\ubc84\uadf8 \ud398\uc774\uc9c0\uac00 \uca18~ \ud558\uace0 \ubc14\ub014 \uac83\uc774\ub2e4. \ub9cc\uc57d vue\uc758 \uc6f9\uc11c\ubc84\uac00 \ub5a0 \uc788\uc9c0 \uc54a\uc73c\uba74 \ud130\ubbf8\ub110\uc744 \uc5f4\uc5b4 npm run serve\ub97c \uc2e4\ud589\uc2dc\ucf1c \uc8fc\uace0 \ub514\ubc84\uadf8 \ucc3d\uc744 \uc5f4\uc5b4\ubcf4\uac70\ub098 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub85c http:\/\/localhost:8080\/ \uc73c\ub85c \uc811\uc18d\ud574 \ubcf8\ub2e4.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\uc774\uc81c \uac10\uc744 \uc7a1\uc558\uc744 \uac83\uc774\ub2e4. \ubb50\uac00 \ucef4\ud3ec\ub10c\ud2b8\uc774\uace0 \uc5b4\ub5bb\uac8c \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc9c0\uace0 \uc5b4\ub514\ub97c \uace0\uccd0\uc57c \ud560 \uc9c0\ub97c. components \ud3f4\ub354\uc5d0 \ub9cc\ub4e0 \uac01\uac01\uc758 .vue \ud30c\uc77c\ub4e4\uc774 \ud654\uba74\uc758 \ud55c \uc601\uc5ed\uc744 \ucc45\uc784\uc9c0\uac70\ub098 \ube44\uc9c0\ub2c8\uc2a4\ub85c\uc9c1\uc744 \uc2e4\ud589\ud560 \ud30c\uc77c\ub4e4\uc774\ub2e4. \uadf8\ub9ac\uace0 App.vue\ub294 \uac01\uac01\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ubd88\ub7ec\uc640\uc11c \ud654\uba74\uc5d0 \ubfcc\ub9ac\ub294 \uc5ed\ud560\uc744 \ud55c\ub2e4. \ubb3c\ub860 javascript\uc640 html\ub85c \uc6f9 \ud398\uc774\uc9c0\ub97c \uc791\uc131\ud560 \ub54c\ub3c4 java\ub4e0 php\ub4e0 python\uc774\ub4e0 include \ub4f1\uc744 \ud1b5\ud574\uc11c \uacf5\ud1b5 \uba54\ub274\uc640 Header, Footer \ub4f1\uc744 \ubd88\ub7ec\uc640\uc11c \uc0ac\uc6a9\ud55c\ub2e4. \ud558\uc9c0\ub9cc vue\ub294 \uac1c\ub150\uc801\uc73c\ub85c \uac01\uac01\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubd84\ub9ac\ud558\uc5ec \uac1c\ubc1c\ud558\uace0 \uad00\ub9ac\ud558\uace0 \ud544\uc694\ud55c \uacf3\uc5d0 \uac00\uc838\ub2e4 \uc4f0\ub294 \uac1c\ub150\uc774\ub2e4. \uadf8\ub798\uc11c \ub2e4\ub978 \ud15c\ud50c\ub9bf\uc774\ub098 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc27d\uac8c \uac00\uc838\ub2e4 \uc4f8 \uc218 \uc788\ub2e4\uace0 \uacc4\uc18d \uac15\uc870\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
\ub9cc\uc57d \uc544\uc9c1 \uac10\uc774 \uc548\uc7a1\ud788\uba74 SimpleVue<\/a> \uc0ac\uc774\ud2b8\ub97c \ubc29\ubb38\ud558\uc5ec \uc608\uc81c\ub97c \ucc28\uadfc \ucc28\uadfc \ub530\ub77c \ud558\uba74\uc11c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc774\ud574\ub97c \ub354 \ub192\uc5ec\ubcf4\uace0 vue \ud504\ub85c\uadf8\ub7a8 \uad6c\uc870\uc5d0 \uc775\uc219\ud574 \uc838 \ubcf4\uc790.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Vue.js \uc124\uce58\uc2dc \ud568\uaed8 \uc124\uce58\ud55c Visual Studio Code(\uc774\ud558 VSCode)\ub97c \uc774\uc6a9\ud55c \uac1c\ubc1c \ud658\uacbd\uc5d0\uc11c \ud504\ub85c\uc81d\ud2b8\ub97c \uc5f4\uc5b4\ubcf4\uace0 \ub514\ubc84\uae45\uc744 \ud574 \ubcf4\ub3c4\ub85d \ud558\uc790. \uc544\uc9c1 \ubc30\ud3ec\ud658\uacbd\uc774\ub098 git, backend, DB \ub4f1\uc740 \uc2e0\uacbd \uc4f8 \ud2c8\uc774 \uc5c6\uc73c\ub2c8 \uac04\ub2e8\ud55c \uc1fc\ud551\ubab0 \uc0c1\ud488 \uc18c\uac1c \ud654\uba74\uc758 \ubf08\ub300(Frame)\ub97c \ud558\ub098 \ub9cc\ub4e4\uc5b4\ubcf4\uc790. \uc2e4\uc81c\ub85c\ub294 \uba54\ub274\uae4c\uc9c0 \ub728\uba74 \uc88b\uaca0\uc9c0\ub9cc \uac04\ub2e8\ud788 \uc790\ub9ac(Frame)\ub9cc \uc7a1\uace0 \ub118\uc5b4\uac00\ub3c4\ub85d \ud558\uaca0\ub2e4. 1. VS Code \ud658\uacbd \uc124\uc815 \uc6b0\uc120 vue.js\ub97c \uc124\uce58\ud558\uace0 \uc0dd\uc131\ud55c \uccab\ubc88\uc9f8 \ud504\ub85c\uc81d\ud2b8\uc778 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-705","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/705","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=705"}],"version-history":[{"count":8,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/705\/revisions\/793"}],"wp:attachment":[{"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fsquare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}