Vue.js - template, script, style 알아보기 [강좌 3-2강정리]

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다.

 

설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~

 

사이트 주소 : https://www.inflearn.com/course/web-game-vue/#

 

 

뷰 인스턴스 코드를 npm으로 수행하기

• cdn으로 사용할때는 아래와 같이 Vue 인스턴스를 실행한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

const app = new Vue({
    el: '#root',
})

• npm을 이용하여 설치를 한 이후에는 다음과 같이 Vue 인스턴스를 실행한다.

import Vue from 'vue';
import NumberBaseball from './NumberBaseball.vue'; // 숫자야구 vue 컴포넌트 불러오기

new Vue(NumberBaseball).$mount('#root'); // 숫자야구 vue컴포넌트를 html의 root로 삽입

 

Npm을 이용한 Vue 설치후 프로젝트 구조 잡기

• npm을 이용하여 vue를 사용할때 3가지 파일로 나눠서 코딩한다.
• main.js는 Vue 인스턴스를 로딩하기 위해서 사용한다.
• .vue 파일들은 각각 vue에 대한 Component들이다.
• .html 파일은 컴포넌트가 삽입될 HTML 템플릿이다.
• <숫자야구 예제에서의 파일구조>

* main.js // Vue 인스턴스 수행
* NumberBaseball.html // Vue 컴포넌트가 삽입되는 최상위 HTML 템플릿
* NumberBaseball.vue // 숫자야구 컴포넌트
* package.json
* package-lock.json
* webpack.config.js

• 웹펙에서 빌드할때는 main.js와 NumberBaseball.vue를 합쳐서 app.js로 번들링하고 해당 js파일을 html에서 import하도록 설정하여 사용할 수 있다.

 

Vue 컴포넌트 파일 구조 이해하기

• .vue로 끝나는 파일은 컴포넌트를 만들기 위하여 사용되는 자바스크립트 코드이다.
• .vue파일은 크게 3가지 부분으로 나눠진다. 
  
  • template : 템플릿은 해당 Component를 구성하는 실제 컴포넌트에 대한 HTML 코드를 작성하는 부분이다.
  • script : 실제 해당 컴포넌트에 대한 data와 실제 동작을 정의하는 JS 파일이다.
  • style : template에 대한 element의 스타일을 지정할 때 사용한다.
• CDN으로 사용할때는 Vue.component 함수 하나에 위의 template, script, style이 다 있었는데 해당 부분이 각각 분리되어서 사용된다고 생각하면 된다.

 

+) 숫자야구 컴포넌트 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">
        <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 += 1) {
      // Math.random => 0 ~ 1 사이의 실수를 뽑아
      const chosen = candidates.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
      array.push(chosen);
    }

    return array;
  };


  export default {
    data() {
      return {
        answer: getNumbers(), // ex [1, 5, 3, 4]
        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();
            console.log('zz');
            return ;
          }

          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])) { // 숫자만 정답
              ball++;
            }
          }
          this.tries.push({
            try: this.value,
            result: `${strike} 스트라이크, ${ball} 볼입니다.`,
          });
          this.value = '';
          this.$refs.answer.focus();
        }
      }
    }
  }
</script>

<style>
  #computer {
    width: 142px;
    height: 200px;
    background-position: 0 0;
  }
</style>