├── README.md
├── frontend
    ├── babel.config.js
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── assets
    │   │   ├── logo.png
    │   │   └── logo.svg
    │   ├── plugins
    │   │   └── vuetify.js
    │   ├── App.vue
    │   ├── store
    │   │   └── index.js
    │   ├── components
    │   │   └── lecture
    │   │   │   ├── componentTest
    │   │   │       ├── LocalComponent.vue
    │   │   │       └── GlobalComponent.vue
    │   │   │   ├── axiosTest
    │   │   │       └── AxiosTestForm.vue
    │   │   │   └── emitTest
    │   │   │       ├── TableComponent.vue
    │   │   │       ├── TrComponent.vue
    │   │   │       └── TdComponent.vue
    │   ├── .eslintrc.js
    │   ├── main.js
    │   ├── views
    │   │   ├── lecture
    │   │   │   ├── clickEvent
    │   │   │   │   └── ClickEventTest.vue
    │   │   │   ├── bind
    │   │   │   │   └── BindTest.vue
    │   │   │   ├── axiosTest
    │   │   │   │   └── axiosTestPage.vue
    │   │   │   ├── componentTest
    │   │   │   │   └── ComponentTest.vue
    │   │   │   └── emitTest
    │   │   │   │   └── EmitTestBoardGame.vue
    │   │   └── HomeView.vue
    │   └── router
    │   │   └── index.js
    ├── vue.config.js
    ├── .gitignore
    ├── jsconfig.json
    ├── README.md
    └── package.json
├── .gitignore
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # Vue-Basics
2 | Vue Basics
3 | 


--------------------------------------------------------------------------------
/frontend/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EDDI-RobotAcademy/Vue-Basics/HEAD/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EDDI-RobotAcademy/Vue-Basics/HEAD/frontend/src/assets/logo.png


--------------------------------------------------------------------------------
/frontend/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib/framework';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/frontend/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   lintOnSave: false,
4 |   transpileDependencies: [
5 |     'vuetify'
6 |   ]
7 | })
8 | 


--------------------------------------------------------------------------------
/frontend/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-main>
 4 |       <router-view/>
 5 |     </v-main>
 6 |   </v-app>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | export default {
12 |   name: 'App',
13 | 
14 |   data: () => ({
15 |     //
16 |   }),
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/frontend/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   getters: {
10 |   },
11 |   mutations: {
12 |   },
13 |   actions: {
14 |   },
15 |   modules: {
16 |   }
17 | })
18 | 


--------------------------------------------------------------------------------
/frontend/src/components/lecture/componentTest/LocalComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{ initialValue }}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | export default {
10 |     name: "LocalComponent",
11 |     props: {
12 |         initialValue: Number
13 |     }
14 | }
15 | 
16 | </script>
17 | 
18 | <style>
19 | 
20 | </style>


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/frontend/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled class file
 2 | *.class
 3 | 
 4 | # Log file
 5 | *.log
 6 | 
 7 | # BlueJ files
 8 | *.ctxt
 9 | 
10 | # Mobile Tools for Java (J2ME)
11 | .mtj.tmp/
12 | 
13 | # Package Files #
14 | *.jar
15 | *.war
16 | *.nar
17 | *.ear
18 | *.zip
19 | *.tar.gz
20 | *.rar
21 | 
22 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
23 | hs_err_pid*
24 | 


--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
 1 | # frontend
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/frontend/src/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	env: {
 3 | 		browser: true,
 4 | 		es2021: true
 5 | 	},
 6 | 	extends: [
 7 | 		'plugin:vue/essential',
 8 | 		'standard'
 9 | 	],
10 | 	parserOptions: {
11 | 		ecmaVersion: 12,
12 | 		sourceType: 'module'
13 | 	},
14 | 	plugins: [
15 | 		'vue'
16 | 	],
17 | 	rules: {
18 | 		'vue/multi-word-component-names': ['error', {
19 | 			ignores: ['Home']
20 | 		}],
21 |         'eslint-disable-next-line': "off",
22 |         'eslint-disable': "off"
23 | 	}
24 | }


--------------------------------------------------------------------------------
/frontend/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vuetify from './plugins/vuetify'
 6 | 
 7 | import GlobalComponent from "@/components/lecture/componentTest/GlobalComponent.vue"
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | // global-component 커스텀 태그 등록
12 | Vue.component(GlobalComponent.name, GlobalComponent)
13 | 
14 | new Vue({
15 |   router,
16 |   store,
17 |   vuetify,
18 |   render: h => h(App)
19 | }).$mount('#app')
20 | 


--------------------------------------------------------------------------------
/frontend/src/views/lecture/clickEvent/ClickEventTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-container>
 3 |         <div>
 4 |             <p>{{ count }} 번 클릭했습니다!</p>
 5 |             <button @click="increment">카운트하기</button>
 6 |         </div>
 7 |     </v-container>
 8 | </template>
 9 | 
10 | <script>
11 | 
12 | export default {
13 |   name: 'ClickEventTest',
14 |   data () {
15 |     return {
16 |         count: 0
17 |     }
18 |   },
19 |   methods: {
20 |     increment () {
21 |       this.count += 1
22 |     }
23 |   }
24 | }
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/frontend/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/frontend/src/views/lecture/bind/BindTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-container>
 3 |         <div>
 4 |             <p>Hello {{ message }}</p>
 5 |             <p>{{ msg }}</p>
 6 |             <p>{{ list[number] }}</p>
 7 |         </div>
 8 |     </v-container>
 9 | </template>
10 | 
11 | <script>
12 | 
13 | export default {
14 |   name: 'BindTest',
15 |   data () {
16 |     return {
17 |         message: "test",
18 |         msg: "이렇게 html과 javascript를 변수화하여 연결 할 수 있습니다.",
19 |         list: ['apple', 'banana', 'grape', 'watermelon'],
20 |         number: 1,
21 |     }
22 |   }
23 | }
24 | 
25 | </script>


--------------------------------------------------------------------------------
/frontend/src/components/lecture/componentTest/GlobalComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <button @click="addCounter">{{ counterValue }}</button>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |     // global-component
 9 |     name: "GlobalComponent",
10 |     // initial-test
11 |     props: ['initialTest', 'incrementValue'],
12 |     data () {
13 |         return {
14 |             counterValue: this.initialTest,
15 |             incValue: this.incrementValue
16 |         }
17 |     },
18 |     methods: {
19 |         addCounter () {
20 |             this.counterValue += this.incValue
21 |         }
22 |     }
23 | }
24 | 
25 | </script>
26 | 
27 | <style>
28 | 
29 | </style>


--------------------------------------------------------------------------------
/frontend/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <div id="home">
 4 |       <nav>
 5 |         <router-link to="/">Home</router-link> |
 6 |         <router-link to="/bind-test">BindTest</router-link> |
 7 |         <router-link to="/click-test">클릭 테스트</router-link> |
 8 |         <router-link to="/component-test">컴포넌트 테스트</router-link> |
 9 |         <router-link to="/emit-test-board-game">emit 테스트(보드 게임)</router-link> |
10 |         <router-link to="/axios-test-page">Vue에서 Spring으로 데이터 전송하기</router-link> |
11 |       </nav>
12 |       <router-view/>
13 |     </div>
14 |   </v-container>
15 | </template>
16 | 
17 | <script>
18 | 
19 | export default {
20 |   name: 'HomeView',
21 | 
22 |   components: {
23 |   },
24 | }
25 | 
26 | </script>
27 | 


--------------------------------------------------------------------------------
/frontend/src/views/lecture/axiosTest/axiosTestPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <h2>Vue에서 Spring으로 데이터 전송하기</h2>
 4 |     <axios-test-form @submit="onSubmit"/>
 5 |   </v-container>
 6 | </template>
 7 | 
 8 | <script>
 9 | 
10 | // npm install axios --save-dev
11 | import axios from 'axios'
12 | import AxiosTestForm from '@/components/lecture/axiosTest/AxiosTestForm.vue'
13 | 
14 | export default {
15 |   name: "AxiosTestPage",
16 |   components: { AxiosTestForm },
17 |   methods: {
18 |     onSubmit (payload) {
19 |         const { memberName, major } = payload
20 |         axios.post('http://localhost:7777/vue/first/receive-test', 
21 |             { memberName, major }
22 |         )
23 |         .then(() => {
24 |             alert('데이터 전송 완료!')
25 |         })
26 |         .catch(() => {
27 |             alert('문제 발생!')
28 |         })
29 | 
30 |     }
31 |   }
32 | }
33 | 
34 | </script>
35 | 
36 | <style>
37 | 
38 | </style>


--------------------------------------------------------------------------------
/frontend/src/components/lecture/axiosTest/AxiosTestForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="onSubmit">
 3 |     <table>
 4 |       <tr>
 5 |         <td>이름</td>
 6 |         <td>
 7 |           <input type="text" v-model="memberName"/>
 8 |         </td>
 9 |       </tr>
10 | 
11 |       <tr>
12 |         <td>전공</td>
13 |         <td>
14 |           <input type="text" v-model="major"/>
15 |         </td>
16 |       </tr>
17 |     </table>
18 | 
19 |     <div>
20 |       <button type="submit">전송</button>
21 |     </div>
22 |   </form>
23 | </template>
24 | 
25 | <script>
26 | 
27 | export default {
28 |     name: "AxiosTestForm",
29 |     data () {
30 |         return {
31 |             memberName: '이름을 작성하세요',
32 |             major: '전공을 기입하세요',
33 |         }
34 |     },
35 |     methods: {
36 |         onSubmit () {
37 |             const { memberName, major } = this
38 |             this.$emit('submit', { memberName, major })
39 |         }
40 |     }
41 | }
42 | 
43 | </script>
44 | 
45 | <style>
46 | 
47 | </style>


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
12 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
13 |   </head>
14 |   <body>
15 |     <noscript>
16 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 EDDI-RobotAcademy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/frontend/src/views/lecture/componentTest/ComponentTest.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <!--
 4 |         public void global-component (Long initial-test) {
 5 |             blablabla ~~~~
 6 |         }
 7 | 
 8 |         global-component(counter);
 9 |     -->
10 |     <global-component :initial-test="counter" :increment-value="incValue1"/><br/>
11 |     <global-component :initial-test="start" :increment-value="incValue2"/><br/>
12 |     <global-component v-bind:initial-test="counter" :increment-value="incValue3"/><br/><br/>
13 | 
14 |     <local-component :initial-value="num"/>
15 |     <local-component :initial-value="num2"/><br/>
16 |     <button @click="plus">클릭해봐!</button>
17 |   </v-container>
18 | </template>
19 | 
20 | <script>
21 | import LocalComponent from '@/components/lecture/componentTest/LocalComponent.vue'
22 | 
23 | export default {
24 |     name: "ComponentTest",
25 |     components: {
26 |         'local-component': LocalComponent
27 |     },
28 |     data () {
29 |         return {
30 |             counter: 0,
31 |             start: 100,
32 |             incValue1: 1,
33 |             incValue2: 2,
34 |             incValue3: 3,
35 |             num: 33,
36 |             num2: 77,
37 |         }
38 |     },
39 |     methods: {
40 |         plus () {
41 |             this.num++
42 |             this.num2 += 3
43 |         }
44 |     }
45 | }
46 | 
47 | </script>
48 | 
49 | <style>
50 | 
51 | </style>


--------------------------------------------------------------------------------
/frontend/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import HomeView from '../views/HomeView.vue'
 4 | 
 5 | import BindTest from "@/views/lecture/bind/BindTest.vue"
 6 | import ClickEventTest from "@/views/lecture/clickEvent/ClickEventTest.vue"
 7 | import ComponentTest from "@/views/lecture/componentTest/ComponentTest.vue"
 8 | 
 9 | import EmitTestBoardGame from "@/views/lecture/emitTest/EmitTestBoardGame.vue"
10 | 
11 | import AxiosTestPage from "@/views/lecture/axiosTest/AxiosTestPage.vue"
12 | 
13 | Vue.use(VueRouter)
14 | 
15 | const routes = [
16 |   {
17 |     path: '/',
18 |     name: 'home',
19 |     component: HomeView
20 |   },
21 |   {
22 |     path: '/bind-test',
23 |     name: 'BindTest',
24 |     component: BindTest
25 |   },
26 |   {
27 |     path: '/click-test',
28 |     name: 'ClickEventTest',
29 |     component: ClickEventTest
30 |   },
31 |   {
32 |     path: '/component-test',
33 |     name: 'ComponentTest',
34 |     component: ComponentTest
35 |   },
36 |   {
37 |     path: '/emit-test-board-game',
38 |     name: 'EmitTestBoardGame',
39 |     component: EmitTestBoardGame
40 |   },
41 |   {
42 |     path: '/axios-test-page',
43 |     name: 'AxiosTestPage',
44 |     component: AxiosTestPage
45 |   },
46 |   
47 | ]
48 | 
49 | const router = new VueRouter({
50 |   mode: 'history',
51 |   base: process.env.BASE_URL,
52 |   routes
53 | })
54 | 
55 | export default router
56 | 


--------------------------------------------------------------------------------
/frontend/src/components/lecture/emitTest/TableComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <table>
 3 |         <tr-component
 4 |             v-for="(rowData, index) in tableData" :key="index"
 5 |             :row-data="rowData"
 6 |             :row-index="index"
 7 |             :table-data="tableData"
 8 |             :current-turn-shape="currentTurnShape"
 9 |             @updateTurnShape="updateTurnShape"
10 |             @updateWinner="updateWinner"
11 |             @updateTableData="updateTableData"/>
12 |     </table>
13 | </template>
14 | 
15 | <script>
16 | 
17 | import TrComponent from './TrComponent.vue';
18 | 
19 | export default {
20 |     name: "TableComponent",
21 |     data () {
22 |         return {
23 | 
24 |         }
25 |     },
26 |     components: {
27 |         TrComponent
28 |     },
29 |     props: {
30 |         tableData: Array,
31 |         currentTurnShape: String,
32 |     },
33 |     methods: {
34 |         updateTurnShape (passingValue) {
35 |             console.log('TableComponent received TrComponent info: ' + passingValue)
36 |             this.turnShape = passingValue
37 |             this.$emit('updateTurnShape', this.turnShape)
38 |         },
39 |         updateWinner (receivedWinner) {
40 |             console.log("Table Component: winner received")
41 |             this.$emit('updateWinner', receivedWinner)
42 |         },
43 |         updateTableData () {
44 |             this.$emit('updateTableData')
45 |         }
46 |     }
47 | }
48 | 
49 | </script>


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "vue": "^2.6.14",
13 |     "vue-router": "^3.5.1",
14 |     "vuetify": "^2.6.0",
15 |     "vuex": "^3.6.2"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.12.16",
19 |     "@babel/eslint-parser": "^7.12.16",
20 |     "@vue/cli-plugin-babel": "~5.0.0",
21 |     "@vue/cli-plugin-eslint": "~5.0.0",
22 |     "@vue/cli-plugin-router": "~5.0.0",
23 |     "@vue/cli-plugin-vuex": "~5.0.0",
24 |     "@vue/cli-service": "~5.0.0",
25 |     "axios": "^1.3.4",
26 |     "eslint": "^7.32.0",
27 |     "eslint-plugin-vue": "^8.0.3",
28 |     "sass": "~1.32.0",
29 |     "sass-loader": "^10.0.0",
30 |     "vue-cli-plugin-vuetify": "~2.5.8",
31 |     "vue-template-compiler": "^2.6.14",
32 |     "vuetify-loader": "^1.7.0"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "parserOptions": {
44 |       "parser": "@babel/eslint-parser"
45 |     },
46 |     "rules": {
47 |       "no-unused-vars": "off"
48 |     }
49 |   },
50 |   "browserslist": [
51 |     "> 1%",
52 |     "last 2 versions",
53 |     "not dead"
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------
/frontend/src/components/lecture/emitTest/TrComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <tr>
 3 |         <td-component
 4 |             v-for="(cellData, index) in rowData" :key="index"
 5 |             :cell-data="cellData"
 6 |             :cell-index="index"
 7 |             :row-index="rowIndex"
 8 |             :table-data="tableData"
 9 |             :current-turn-shape="currentTurnShape"
10 |             @updateTurnShape="updateTurnShape"
11 |             @updateWinner="updateWinner"
12 |             @updateTableData="updateTableData"/>
13 |             <!-- @updateTurnShape은 v-on:updateTurnShape와 동의어
14 |                  updateTurnShape이라는 이벤트가 발생하면
15 |                  updateTurnShape 매서드를 동작시키라는 의미
16 |                  만약 @updateTurnShape="testFunction" 이라면
17 |                  updateTurnShape 이벤트 발생시 testFunction 매서드 동작 -->
18 |     </tr>
19 | </template>
20 | 
21 | <script>
22 | 
23 | import TdComponent from './TdComponent.vue';
24 | 
25 | export default {
26 |     name: "TrComponent",
27 |     components: {
28 |         TdComponent
29 |     },
30 |     props: {
31 |         rowData: Array,
32 |         rowIndex: Number,
33 |         tableData: Array,
34 |         currentTurnShape: String,
35 |     },
36 |     methods: {
37 |         updateTurnShape (receivedTurnShape) {
38 |             console.log('TrComponent received TdComponent info: ' + receivedTurnShape)
39 |             this.turnShape = receivedTurnShape
40 |             this.$emit('updateTurnShape', this.turnShape)
41 |         },
42 |         updateWinner (receivedWinner) {
43 |             console.log("Tr Component: winner received")
44 |             this.$emit('updateWinner', receivedWinner)
45 |         },
46 |         updateTableData () {
47 |             this.$emit('updateTableData')
48 |         }
49 |     }
50 | }
51 | 
52 | </script>


--------------------------------------------------------------------------------
/frontend/src/views/lecture/emitTest/EmitTestBoardGame.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <div>{{ currentTurnShape }} 님의 턴입니다.</div>
 4 |     <table-component 
 5 |         :table-data="tableData"
 6 |         :current-turn-shape="currentTurnShape"
 7 |         @updateTurnShape="updateTurnShape"
 8 |         @updateWinner="updateWinner"
 9 |         @updateTableData="updateTableData"/>
10 |     <div v-if="winner">{{ winner }} 님의 승리!</div>
11 |   </v-container>
12 | </template>
13 | 
14 | <script>
15 | 
16 | import TableComponent from '@/components/lecture/emitTest/TableComponent.vue'
17 | 
18 | // 오목 게임
19 | // 바둑판, 승자 판정 그 다음 아직 모르겠음.
20 | // 누구 차례인지 어떻게 알지 ?
21 | // 'O', 'X' 표시로 순서를 구분하자!
22 | 
23 | export default {
24 |     name: "EmitTestBoardGame",
25 |     components: {
26 |         TableComponent
27 |     },
28 |     data () {
29 |         return {
30 |             currentTurnShape: 'O',
31 |             // tableData[5][5]
32 |             tableData: [
33 |                 ['', '', '', '', ''],
34 |                 ['', '', '', '', ''],
35 |                 ['', '', '', '', ''],
36 |                 ['', '', '', '', ''],
37 |                 ['', '', '', '', ''],
38 |             ],
39 |             winner: '',
40 |         }
41 |     },
42 |     methods: {
43 |         updateTurnShape (passingValue) {
44 |             console.log('SimpleBoardGameView received TableComponent info: ' + passingValue)
45 |             this.currentTurnShape = passingValue
46 |         },
47 |         updateWinner (receivedWinner) {
48 |             console.log("Main Board Game: winner received")
49 |             this.winner = receivedWinner
50 |         },
51 |         updateTableData () {
52 |             this.tableData = [
53 |                 ['', '', '', '', ''],
54 |                 ['', '', '', '', ''],
55 |                 ['', '', '', '', ''],
56 |                 ['', '', '', '', ''],
57 |                 ['', '', '', '', ''],
58 |             ]
59 |         }
60 |     }
61 | }
62 | 
63 | </script>
64 | 
65 | <style>
66 | 
67 | </style>


--------------------------------------------------------------------------------
/frontend/src/components/lecture/emitTest/TdComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <td @click="whichOneSelected" style="width: 30px; height: 30px">
  3 |     {{ cellData }}
  4 |   </td>
  5 | </template>
  6 | 
  7 | <script>
  8 | 
  9 | export default {
 10 |     name: "TdComponent",
 11 |     data () {
 12 |         return {
 13 |             game: {
 14 |                 propsTurnShape: this.currentTurnShape,
 15 |                 propsWinner: '',
 16 |             }
 17 |         }
 18 |     },
 19 |     props: {
 20 |         cellData: String,
 21 |         cellIndex: Number,
 22 |         rowIndex: Number,
 23 |         tableData: Array,
 24 |         currentTurnShape: String,
 25 |     },
 26 |     methods: {
 27 |         whichOneSelected () {
 28 |             console.log('오목판을 클릭했습니다!')
 29 | 
 30 |             let isDuplicated = this.setDataToSelectedArray()
 31 |             let win = this.winnerCheck()
 32 | 
 33 |             if (win) {
 34 |                 this.game.propsWinner = this.currentTurnShape
 35 | 
 36 |                 this.$emit('updateWinner', this.game.propsWinner)
 37 |                 this.$emit('updateTableData')
 38 |             } else {
 39 |                 let allCellFull = true
 40 | 
 41 |                 // tableData[x][y]
 42 |                 // tableData[x] === row
 43 |                 // tableData[fixed_x][y] === cell
 44 |                 this.tableData.forEach(row => {
 45 |                     row.forEach(cell => {
 46 |                         if (!cell) {
 47 |                             allCellFull = false
 48 |                         }
 49 |                     })
 50 |                 })
 51 | 
 52 |                 if (allCellFull) { this.$emit('updateTableData') }
 53 |             }
 54 | 
 55 |             if (!isDuplicated) { this.changeTurn() }
 56 |         },
 57 |         changeTurn () {
 58 |             this.game.propsTurnShape = this.currentTurnShape === 'O' ? 'X' : 'O'
 59 |             // this.$emit('이벤트명', 값(옵션))
 60 |             this.$emit('updateTurnShape', this.game.propsTurnShape)
 61 |         },
 62 |         setDataToSelectedArray () {
 63 |             // this.tableData[this.rowIndex]: 사용자가 클릭한 행 정보
 64 |             // this.cellIndex: 사용자가 클릭한 '행'내 열 정보
 65 |             // this.currentTurnShape: 현재 턴('x', 'o')
 66 |             // this.$set(행, 열, 값) -> 특정[행][열] = 값
 67 |             if (this.tableData[this.rowIndex][this.cellIndex] !== '') { return true }
 68 | 
 69 |             this.$set(this.tableData[this.rowIndex], this.cellIndex, this.currentTurnShape)
 70 |             return false
 71 |         },
 72 |         winnerCheck () {
 73 |             if (
 74 |                 this.tableData[this.rowIndex][0] === this.currentTurnShape &&
 75 |                 this.tableData[this.rowIndex][1] === this.currentTurnShape &&
 76 |                 this.tableData[this.rowIndex][2] === this.currentTurnShape &&
 77 |                 this.tableData[this.rowIndex][3] === this.currentTurnShape &&
 78 |                 this.tableData[this.rowIndex][4] === this.currentTurnShape
 79 |             ) {
 80 |                 return true
 81 |             } else if (
 82 |                 this.tableData[0][this.cellIndex] === this.currentTurnShape &&
 83 |                 this.tableData[1][this.cellIndex] === this.currentTurnShape &&
 84 |                 this.tableData[2][this.cellIndex] === this.currentTurnShape &&
 85 |                 this.tableData[3][this.cellIndex] === this.currentTurnShape &&
 86 |                 this.tableData[4][this.cellIndex] === this.currentTurnShape
 87 |             ) {
 88 |                 return true
 89 |             } else if (
 90 |                 this.tableData[0][0] === this.currentTurnShape &&
 91 |                 this.tableData[1][1] === this.currentTurnShape &&
 92 |                 this.tableData[2][2] === this.currentTurnShape &&
 93 |                 this.tableData[3][3] === this.currentTurnShape &&
 94 |                 this.tableData[4][4] === this.currentTurnShape
 95 |             ) {
 96 |                 return true
 97 |             } else if (
 98 |                 this.tableData[0][4] === this.currentTurnShape &&
 99 |                 this.tableData[1][3] === this.currentTurnShape &&
100 |                 this.tableData[2][2] === this.currentTurnShape &&
101 |                 this.tableData[3][1] === this.currentTurnShape &&
102 |                 this.tableData[4][0] === this.currentTurnShape
103 |             ) {
104 |                 return true
105 |             }
106 | 
107 |             return false
108 |         }
109 |     }
110 | }
111 | 
112 | </script>
113 | 
114 | <style>
115 | 
116 | </style>


--------------------------------------------------------------------------------