inflearn에 해당되는 글 3건

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

웹/Vue.js 2024. 1. 30. 22:28

인프런 프론트엔드 강의 3일차.

웹 게임을 만들며 배우는 Vue 1

 

Vue로 간단한 웹게임 만들어보기.

1일차는 섹션 0. 강좌소개 수강 (24.01.23 완료)

2일차는 섹션 1. 끝말잇기 수강 (24.01.24 완료)

3일차는 섹션 2. 숫자야구 수강 (24.01.29 완료)

 

1. vue 프로젝트 생성 순서 및 명령어

# vue 프로젝트 생성 순서

#package.json이 생성된다
npm init

#vue 설치
npm install vue

#개발할 때만 webpack 실행하도록 -D 옵션 지정, devDependencies에 추가된다.
npm install webpack webpack-cli -D


#vue컴포넌트를 js로 변환하는 webpack 로더
npm install vue-loader -D

# vue 컴파일러
npm install vue-template-compiler -D

webpack.config.js 파일 생성

 

2. package.json

{
  "name": "number-baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.4.15"
  },
  "devDependencies": {
    "vue-loader": "^17.4.2",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4"
  }
}

 

3. webpack.config.js

// vue-loader를 사용하기 위한 준비
const { VueLoaderPlugin } = require("vue-loader");
// node가 만들어준 스크립트 활용
const path = require("path");

// node의 module 제작
// 웹팩이 모듈로 만든 객체를 사용
// 스크립트를 하나로 합칠 파일이 필요
// 가장 대표가 되는 파일이 entry임
// entry의 app은 하나로 합쳐질 파일
module.exports = {
  mode: "development",
  // 개발할때는 eval
  // 배포할 때는 hidden-source-map
  devtool: "eval",
  resolve: {
    // 확장자 처리
    // 여기 넣어주면 main.js에 import 시에 확장자를 제거할 수 있다
    extensions: [".js", ".vue"],
  },
  entry: {
    // 현재 폴더 안에 들어있는 main.js 찾아서 dir 합침
    app: path.join(__dirname, "main.js"),
  },
  // entry부터 처리하다가 이상한 걸 만나면 module의 rules부터 처리
  module: {
    // 파일명에 .vue가 들어가면 vue-loader가 처리를 한다.
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  // output 나오기 전에 plugin으로 가공
  plugins: [
    // vue-loader를 사용하기 위한 준비
    new VueLoaderPlugin(),
  ],
  // 최종 결과물
  output: {
    //filename: 'app.js'
    //[name]이라고 하면 알아서 app.js를 명함
    filename: "[name].js",
    //폴더경로
    path: path.join(__dirname, "dist"),
    // 정리하자면 dist라는 폴더가 생성될 것이고, app.js로 최종 결과물이 생성될 것
  },
};

 

4. NumberBaseball.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>숫자야구</title>
  </head>

  <body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

 

 

5. NumberBaseball.vue

<template>
  <div>
    <h1>{{ result }}</h1>
    <form @submit.prevent="onSubmitForm">
      <input ref="answer" minlength="4" maxlength="4" v-model="value" />
      <button>입력</button>
    </form>
    <div>시도: {{ tries.length }}</div>
    <ul>
      <li v-for="t in tries" :key="t.try">
        <div>{{ t.try }}</div>
        <div>{{ t.result }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
const getNumbers = () => {
  const candidates = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  const array = [];
  for (let i = 0; i < 4; i++) {
    const chosen = candidates.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
    array.push(chosen);
  }
  return array;
};
export default {
  data() {
    return {
      answer: getNumbers(),
      tries: [],
      value: "",
      result: "",
    };
  },
  methods: {
    onSubmitForm() {
      if (this.value === this.answer.join("")) {
        this.tries.push({
          try: this.value,
          result: "홈런",
        });
        this.result = "홈런";
        alert("게임을 다시 실행합니다.");
        this.value = "";
        this.answer = getNumbers();
        this.tries = [];
        this.$refs.answer.focus();
      } else {
        if (this.tries.length >= 9) {
          this.result = `10번 넘게 틀려서 실패! 답은 ${this.answer.join(
            ","
          )}였습니다!`;
          alert("게임을 다시 시작합니다.");
          this.value = "";
          this.answer = getNumbers();
          this.tries = [];
          this.$refs.answer.focus();
        } else {
          let strike = 0;
          let ball = 0;
          const answerArray = this.value.split("").map((v) => parseInt(v));
          for (let i = 0; i < 4; i++) {
            if (answerArray[i] === this.answer[i]) {
              strike++;
            } else if (this.answer.includes(answerArray[i])) {
              ball++;
            }
          }
          this.tries.push({
            try: this.value,
            result: `${strike} 스트라이크, ${ball} 볼입니다.`,
          });
          this.value = "";
          this.$refs.answer.focus();
        }
      }
    },
  },
};
</script>
<style></style>

 

6. main.js

//Vue2 버전
//import Vue from "vue";

//Vue3버전
import { createApp } from "vue";
import NumberBaseball from "./NumberBaseball";

//vue2버전
//new Vue(NumberBaseball).$mount('#root');

//vue3버전
createApp(NumberBaseball).mount("#root");

 

CDN 으로 Vue를 실행하는 대신 Vue 프로젝트로 직접 구현해보는 섹션!

'웹 > Vue.js' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
[인프런] 웹 게임을 만들며 배우는 Vue 1  (132) 2024.01.23
Vue2 vs Vue3 차이점  (118) 2024.01.14
[CodingApple] Vue 로 만드는 웹앱 3  (104) 2024.01.12
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
,

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

웹/Vue.js 2024. 1. 24. 23:48

인프런 프론트엔드 강의 2일차.

웹 게임을 만들며 배우는 Vue 1

 

Vue로 간단한 웹게임 만들어보기.

1일차는 섹션 0. 강좌소개 수강 (24.01.23 완료)

2일차는 섹션 1. 끝말잇기 수강

 

1. 끝말잇기 (강좌소개에서 했던 간단한 끝말잇기를 Component를 사용해서 구현)

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>끝말잇기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!-- props를 사용해 component 생성 때 파라미터를 넘겨서 설정이 가능하다 -->
      <word-relay start-Word="초밥"></word-relay>
      <word-relay start-Word="순두부찌개"></word-relay>
      <word-relay start-Word="돈까스"></word-relay>
    </div>
  </body>
  <script>
    Vue.component("word-relay", {
      template: `
        <div>
          <div>{{ word }}</div>
          <form v-on:submit="onSubmitForm">
            <input type="text" v-model="value" ref="answer" />
            <button type="submit
 ">입력!</button>
          </form>
          <div>{{ result }}</div>
        </div>
      `,
      props: ["startWord"],
      data() {
        return { word: this.startWord, result: "", value: "" };
      },
      methods: {
        onSubmitForm(e) {
          e.preventDefault();
          if (this.word[this.word.length - 1] === this.value[0]) {
            this.result = "딩동댕";
            this.word = this.value;
            this.value = "";
            this.$refs.answer.focus();
          } else {
            this.result = "땡";
            this.value = "";
            this.$refs.answer.focus();
          }
        },
      },
    });
  </script>
  <script>
    const app = new Vue({
      el: "#root",
    });
  </script>
</html>

 

 

'웹 > Vue.js' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 3  (122) 2024.01.30
[인프런] 웹 게임을 만들며 배우는 Vue 1  (132) 2024.01.23
Vue2 vs Vue3 차이점  (118) 2024.01.14
[CodingApple] Vue 로 만드는 웹앱 3  (104) 2024.01.12
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
,

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

웹/Vue.js 2024. 1. 23. 22:02

인프런 프론트엔드 강의 1일차.

웹 게임을 만들며 배우는 Vue 1

 

Vue로 간단한 웹게임 만들어보기.

1일차는 섹션 0 강의 수강

 

1. 좋아요 버튼

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <title>좋아요</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-if="liked">좋아요 눌렀음</div>
      <button v-else v-on:click="onClickButton">Like</button>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        liked: false,
      },
      methods: {
        onClickButton() {
          this.liked = !this.liked;
        },
      },
    });
  </script>
</html>

 

2. 구구단

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <title>구구단</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{first}} 곱하기 {{second}} 는?</div>
      <form v-on:submit="onSubmitForm">
        <input type="number" ref="answer" v-model="value" />
        <button type="submit">입력</button>
      </form>
      <div id="result">{{result}}</div>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: "",
        result: "",
      },
      methods: {
        onSubmitForm(e) {
          e.preventDefault(); //새로고침 이벤트 중지
          if (this.first * this.second === parseInt(this.value)) {
            this.result = "정답";
            this.first = Math.ceil(Math.random() * 9);
            this.second = Math.ceil(Math.random() * 9);
            this.value = "";
            this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
          } else {
            this.result = "땡";
            this.value = "";
            this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
          }
        },
      },
    });
  </script>
</html>

 

3. 끝말잇기

<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      viewport="viewport"
      content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>끝말잇기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div>{{word}}</div>
      <form v-on:submit="onSubmitForm">
        <input type="text" v-model="value" ref="answer" />
        <button type="submit">입력!</button>
      </form>
      <div>{{result}}</div>
    </div>
  </body>
  <script>
    const app = new Vue({
      el: "#root",
      data: {
        word: "초밥",
        result: "",
        value: "",
      },
      methods: {
        onSubmitForm(e) {
          e.preventDefault();
          if (this.word[this.word.length - 1] === this.value[0]) {
            this.result = "딩동댕";
            this.word = this.value;
            this.value = "";
            this.$refs.answer.focus();
          } else {
            this.result = "땡";
            this.value = "";
            this.$refs.answer.focus();
          }
        },
      },
    });
  </script>
</html>

 

 

'웹 > Vue.js' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 3  (122) 2024.01.30
[인프런] 웹 게임을 만들며 배우는 Vue 2  (97) 2024.01.24
Vue2 vs Vue3 차이점  (118) 2024.01.14
[CodingApple] Vue 로 만드는 웹앱 3  (104) 2024.01.12
[CodingApple] Vue 로 만드는 웹앱 2  (98) 2024.01.11
,
1

티스토리툴바