럿고의 개발 노트

[인프런] 웹 게임을 만들며 배우는 Vue - 3. 숫자야구 본문

Vue.js Note/[인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)

[인프런] 웹 게임을 만들며 배우는 Vue - 3. 숫자야구

KimSeYun 2019. 11. 11. 17:56

[인프런] 웹 게임을 만들며 배우는 Vue

3. 숫자야구

3.1. 웹팩 사용하기

3.2. 프로젝트 구조와 웹팩 빌드

3.3. 웹팩 로더 사용하기

3.4. v-for로 반복문 사용하기

3.5. 숫자야구 완성하기

- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!. 노드와 웹팩을 사용하여 설정파일들이 존재합니다. 아래 깃허브를 참고해주세요.

[NmberBaseball.html]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>숫자야구</title>
    
</head>
<body>
    <!-- 스크립트 관리하기가 힘들어 질때 webpack를 설치
        웹팩을 사용하기 위해서는 node.js를 설치해야 하는데 왠만하면 LTS로 설치할 것
        npm은 남의 만들어둔 자바코드를 쓸수 있는 것 => 남의 JS코드를 모아모아 만드는 것이 추세
        npm-init : 
        package.json : 남의 소스코드를 정리해놓은 곳(버전이나 소스코드를 확인 가능)
        npm i vue : 프로젝트에 vue 설치(이제 따로 CDN을 이용할 필요가 없다.)
        npm i webpack webpack-cli 설치
        * -D : 개발용으로만 쓰겠다는 옵션
        webpack.config.js : 웹팩 설정하는 파일(따로 만들어 줘야 함.)
        node_modules : 내가 사용하는 모듈들이 설치되어 있는 곳
        vue와 vue-template-compiler버전이 똑같아야 한다!, 버전별로 다운 받고 싶다면 num i vue@버전 으로 하면 됨.(노드는 무조건 버전이 3자리, @안쓰면 최신버전이 설치)
        웹팩을 부르기 위해 num run (package.json에서 scripts에 정의한 이름)으로 웹팩을 실행해야 작성한 자바스크립트들이 합쳐지고, 업데이트됨.
    -->
    <div id ="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>
cs

[NumberBaseball.vue]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- vue 파일 -->
<!-- HTML로 생각할 수도 있지만 결국 자바스크립트 -->
 
<template>
    <div>
        <h1>{{result}}</h1>
        <form @submit.prevent="onSubmitForm"> <!-- e.preventdefault가 자동 적용 -->
            <input ref="answer" maxlength="4" v-model="value"/>
            <button>입력</button>
        </form>
        <div>시도 : {{tries.length}}</div> <!-- 배열 길이 -->
        <ul>
            <li v-for="t in tries"> <!--배열의 값들을 표현하기 위해 v-for(반복문) 사용 -->
                <div>{{t.try}}</div>
                <div>{{t.result}}</div>
                </li>
        </ul>
    </div>
</template>
 
<script>
const getNumbers = () => { // 랜덤으로 4개 숫자를 뽑는 것
    const candidates = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const array = [];
    for (let i = 0; i < 4; i += 1){
        const chosen = candidates.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
        //splice() : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열 내용 변경
        //floor() : 주어진 숫자와 같거나 작은 정수 중에서 가장 큰수를 반환
        array.push(chosen);
    }
    return array;
}
export default { // 이게 import로 가져오는 곳
    data(){
        return{
        answer: getNumbers(), // 랜덤값 생성
        tries:[],
        value:'',
        result: '',
        }
    },
    methods: {
        onSubmitForm(e){
            if(this.value === this.answer.join('')){ // 홈런인 경우(성공)
                this.tries.push({ // 객체를 저장
                    try: this.value,
                    result: '홈런',
                }); // 입력할때마다 tries에다가 값 추가하기
                this.result = '홈런',
                alert('게임을 다시 실행합니다.');
                this.value = '';
                this.tries = [];
                this.$refs.answer.focus();
            }else{ // 정답 틀렸을때
                if(this.tries.length >= 9){ // 10번 이상 틀렸을때
                    this.result = `10번 넘게 틀려서 실패! 답은 ${this.answer.join(',')}였습니다.`
                    alert('게임을 다시 시작합니다.');
                    // 초기화
                    this.value = '';
                    this.answer = getNumbers(); 
                    this.tries = [];
                    this.$refs.answer.focus();
                }
                let strike = 0;
                let ball = 0;
                const answerArray = this.value.split('').map(v => parseInt(v)); // 화살표 함수 표현으로 함수를 선언할때 사용하는 새로운 함수 정의 방식
                for (let i = 0; i < 4; i += 1){
                    if(answerArray[i] === this.answer[i]){ // 숫자 자리수 모두 전달
                        strike++;
                    }else if(this.answer.includes(answerArray[i])) { // 숫자만 정답, includes() : 배열이 특정 요소를 포함하고 있는지 판별
                        ball++;
                    }
                }
                this.tries.push({
                    try: this.value,
                    result: `${strike} 스크라이크, ${ball} 볼입니다.`
                });
            }
            this.value = '';
            this.$refs.answer.focus();
        }
    },
};
</script>
 
<style>
 
</style>
cs

[package.json]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "number-baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bulid": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}
 
cs

[main.js]

1
2
3
4
5
import Vue from 'Vue'; // Vue를 불러오는 것
 
import NumberBaseball from './NumberBaseball'; // NumberBaseball.vue를 가져오는 것
 
new Vue(NumberBaseball).$mount('#root'); // Vue 인스턴스, 인스턴스안에 사용할 컴포넌트를 넣어줘야 함.
cs

[webpack.config.js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path'); // 경로 불러오는 것
 
module.exports = { // 노드에 모듈을 만듬, 이안에 웹팩 모든 설정을 넣으면 됨.
    mode:'development', // 배포할건지 개발한건지
    devtool: 'eval', // 개발할때는 eval, 배포할때는 hid,den-source-map
    resolve: {
        extensions: ['.js', '.vue'], // 이걸 하면 import할때 확장자를 넣어줄 필요가 없다.
    },
    entry: { // 스크립트를 모인것 중에서 대표적인 스크립트
        app : path.join(__dirname, 'main.js'), // app은 하나로 합친 스크립트 이름
    },
    module: { // 웹팩의 핵심 // entry로 처리하다가 이상한거 나오면 loader를 실행
        rules: [{ // 합칠때 어떻게 합칠지를 설정해주는 것
            test: /\.vue$/, // .vue로 끝나는 파일은 vue-loader를 사용하겠다, 정규표현식
            loader: 'vue-loader', // npm i vue-loader
        }],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    output: {
        filename: '[name].js', // 출력할 파일 이름(최종결과)
        path: path.join(__dirname, 'dist'), // 폴더 경로
    },
};
 
// entry, module, plugins, output이 주 설정 나머지는 부가적인 설정
cs
d

깃허브 소스 : https://github.com/ksy90101/Vue.js/tree/master/vue-Webgame-inflearn/Chapter03


출처

https://www.inflearn.com/course/web-game-vue/dashboard

저작자표시 비영리

'Vue.js Note > [인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 6. 로또 추점기  (0) 2019.11.14
[인프런] 웹 게임을 만들며 배우는 Vue 5. 가위바위보  (0) 2019.11.14
[인프런] 웹 게임을 만들며 배우는 Vue 4. 반응속도체크  (0) 2019.11.12
[인프런] 웹 게임을 만들며 배우는 Vue - 2. 구구단  (0) 2019.11.08
[인프런] 웹 게임을 만들며 배우는 Vue - 1. 끝말잇기  (0) 2019.11.07
'Vue.js Note/[인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)' Related Articles more
Comments