9장 예제 변경

Author: stepanow

ch09/calc-component-test/.gitignore ch07/test-vue-app/.gitignore

@@ -0,0 +1,29 @@
+# test-vue-app
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

ch07/test-vue-app/README.md

@@ -0,0 +1,17 @@
+{
+  "name": "test-vue-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.45"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.3",
+    "vite": "^4.0.3"
+  }
+}

ch09/calc-component-test/index.html ch07/test-vue-app/index.html

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h2>관심있는 K-POP 가수?</h2><hr />
+    <ul>
+      <CheckboxItem v-for="idol in idols" :key="idol.id" 
+          :id="idol.id" :name="idol.name" :checked="idol.checked" />
+    </ul>
+  </div>
+</template>
+
+<script>
+  import CheckboxItem from './components/CheckboxItem.vue'
+  export default {
+    name: "App",
+    components: { CheckboxItem },
+    data() {
+      return {
+        idols : [
+          { id:1, name:"BTS", checked:true},
+          { id:2, name:"Black Pink" },
+          { id:3, name:"EXO" },
+          { id:4, name:"ITZY" },
+        ]
+      }
+    }
+  }
+</script>

ch07/test-vue-app/package.json

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h2>관심있는 K-POP 가수?</h2><hr />
+    <ul>
+      <CheckboxItem v-for="idol in idols" :key="idol.id" :idol="idol" />
+    </ul>
+  </div>
+</template>
+
+<script>
+  import CheckboxItem from './components/CheckboxItem2.vue'
+  export default {
+    name: "App2",
+    components: { CheckboxItem },
+    data() {
+      return {
+        idols : [
+          { id:1, name:"BTS", checked:true},
+          { id:2, name:"Black Pink", checked:false },
+          { id:3, name:"EXO", checked:false },
+          { id:4, name:"ITZY", checked:false },
+        ]
+      }
+    }
+  }
+</script>

ch09/calc-component-test/public/favicon.ico ch07/test-vue-app/public/favicon.ico

@@ -0,0 +1,27 @@
+<template>
+    <li>
+        <input type="checkbox" :checked="checked" /> {{id}} - {{name}}
+    </li>
+</template>
+
+<script>
+    export default {
+        name: "CheckboxItem",
+        props: {
+            id: [Number, String],
+            //name: String,
+            name: {
+                validator(v) {
+                    return typeof(v) !== "string" ?
+                        false :
+                        v.trim().length >= 4 ? true : false
+                }
+            },
+            checked: {
+                type: Boolean,
+                required: false,
+                default: false
+            }
+        },
+    }
+</script>

ch07/test-vue-app/src/App.vue

@@ -0,0 +1,15 @@
+<template>
+    <li>
+        <input type="checkbox" :checked="idol.checked" /> {{idol.name}}
+    </li>
+</template>
+
+<script>
+export default {
+    name : "CheckboxItem2",
+    props : ["idol"],
+    // created() {
+    //     this.idol.checked = true;
+    // }
+}
+</script>

ch07/test-vue-app/src/App2.vue

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+//import App from './App2.vue'
+//import App from './App3.vue'
+
+import './assets/main.css'
+
+createApp(App).mount('#app')

ch09/calc-component-test/src/assets/base.css ch07/test-vue-app/src/assets/base.css

@@ -10,6 +10,6 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .child { background-color: yellow; border:solid 1px black; margin:1.5em; padding: 1.0em;  }
 </style>

ch09/calc-component-test/src/assets/logo.svg ch07/test-vue-app/src/assets/logo.svg

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <InputName v-model:name="searchName" />
+    <InputName :value="name" @input="$emit('update:name', $event.target.value)" />
     <h3> 검색어 : {{searchName}}</h3> 
   </div>
 </template>

ch09/calc-component-test/src/assets/main.css ch07/test-vue-app/src/assets/main.css

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ch07/test-vue-app/src/components/CheckboxItem.vue

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>