Vue 샘플 페이지 살펴보기

src/components/HelloWorld.vue

HelloWorld.vue 구성

src/components/HelloWorld.vue 파일을 선택하여 띄워봅시다.

이전 포스팅에서 설명한 것처럼 각각의 뷰(. vue 파일)는 template, script, style로 구성됩니다. 지금부터 인터넷을 열어 http://localhost:8080/ 페이지와 함께 비교하면서 보도록 하겠습니다. 컴퓨터를 다시 켰거나 개발 서버가 종료된 경우 다음 명령어로 서버를 띄워주십시오. 이전 포스팅에서 yarn을 설치하였기 때문에 npm과 yarn 둘 중 하나를 선택하여 서버를 실행합니다(저는 앞으로 yarn을 사용합니다).

npm run serve
or --- yarn serve

1. template

템플릿은 HTML언어 형식으로 기입해야 하며, 가장 큰 특징은 시작 태그와 마침 태그를 반드시 써야 한다는 것입니다. 둘 중 하나가 누락된 경우 컴파일링 시 오류가 발생합니다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    
    ...
    
  </div>
</template>

템플릿 영역에서 가장 먼저 시작된 <div>는 가장 아래쪽에 </div>로 종료됩니다. <div>는 페이지 상에 어떤 특별한 역할을 하는 것은 아니므로 그다음을 살펴보겠습니다.

그 아래 <h1>과 <p>, <h3> 등이 보이는데 이는 모두 텍스트를 표시하는 태그입니다. 물론 HTML에서는 다음과 같이 별도의 태그를 사용하지 않고 곧바로 텍스트를 입력하더라도 출력이 가능합니다. VS Code에서 아래처럼 다른 모든 코드를 지우고 ctrl + s 버튼을 누르면 페이지에 변경되는 내용을 확인해봅시다(테스트 후 ctrl + z버튼을 눌러 실행한 내용을 되돌릴 수 있습니다.

<template>
  For a guide and recipes on how to configure / customize this project,
</template>

텍스트에 태그를 사용하는 이유는 각각의 택스트를 요소 화하고, 하나의 스타일로 관리하기 위한 목적입니다. 스타일링에 대해서는 이후 style에서 좀 더 자세하게 살펴보겠습니다.

<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>

코드 11번째 줄에서는 조금 특이한 타입을 볼 수 있습니다. 시작 태그와 종료 태그 사이에 텍스트가 들어가는 것 까지는 괜찮은데 시작 태그 안쪽에도 내용이 있습니다. 시작 태그 안쪽에 들어가는 것은 property 혹은 attribute라고 하며, 해당 태그에 붙어 여러 가지 역할과 기능을 수행합니다. 이것들이 무슨 역할을 하는지 현재는 헷갈릴 수 있지만, 나중에 Vuetify를 사용하면서 점차 익숙해질 테니 너무 걱정하지 마십시오. 

마지막으로 살펴볼 특이 사항은 쌍 괄호{{ }} 내부에 텍스트가 들어간 케이스입니다. 

<h1>{{ msg }}</h1>

코드에 있는 텍스트와 실제 페이지에 나타난 텍스트를 비교하여 살펴보면 어떤 코드가 페이지의 어디 부분을 의미하는지 찾을 수 있었습니다. 눈치가 빠르신 분들은 {{ msg }}가 "Welcome to Your Vue.js App"텍스트를 의미한다는 것을 발견하셨을 테지만 해당 텍스트는 HelloWorld.vue의 어디에서도 찾을 수가 없습니다. 

이는 여러분들이 직접 프로젝트를 살펴보면서 발견하실 수 있도록 숙제로 남겨두겠습니다. 힌트는 현재 페이지는 HelloWorld.vue를 표시하고 있는 것이 아니라는 점입니다.

 

2. script

스크립트는 JavaScript 기반으로 작성합니다. 특히 개발에 처음 입문하신 분들은 레드라인을 많이 보게 될 수밖에 없는 영역입니다.

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

샘플 페이지는 UI가 특별한 기능을 포함하고 있지는 않기 때문에 script에 내용이 많지 않습니다(vue 또한 템플릿 기반의 개발을 지향합니다). 다만 눈에 띄는 것이 있다면 앞에서 {{ msg }}의 텍스트를 어디서 받아오는지 고민했었는데 여기도 msg라는 단어가 있다는 점입니다. 

 

3. style

스타일은 CSS언어를 형식으로 작성합니다. 가장 큰 특징은 다른 어떤 컴퓨터 언어보다도 인간 언어로 이해하기 쉽다는 점입니다.

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

h3, ul, li, a는 아까 템플릿을 살펴볼 때 보았던 것들입니다. 따라서 뒤에 대괄호 안에 들어간 내용은 해당 태그의 스타일을 지정하고 있다는 것을 쉽게 유추할 수 있습니다. 괄호 안에 들어가는 내용 또한 margin, padding, color와 같이 우리에게 익숙한 단어이며, 콜론 뒤에 해당 값을 입력해주는 방식임을 알 수 있습니다. 

 

여기까지 Vue 기본 샘플 페이지를 통하여 템플릿, 스크립트, 스타일에 대해서 살펴보았습니다. 점차 익숙해지고 있지 않나요? 다음 포스팅에서는 본격적으로 프로젝트에 들어가기에 앞서 프로젝트 세팅을 해보도록 하겠습니다.