프론트엔드는 이제 Vue가 대세.

뷰 기초 마스터하기

를 소개합니다.

공식 사이트에서는 뷰를 “The Progressive JavaScript Framework”라고 소개합니다. 점진적인 자바스크립트 프레임워크라는 뜻이죠.

뷰의 개발자인 에반 유는 2017년의 뷰 컨퍼런스에서 뷰에 대해서 이렇게 설명하기도 했습니다.

“뷰의 코어 라이브러리는 화면의 데이터 표현에 관한 기능들을 중점적으로 지원하며 프레임워크로서의 기능을 부여하는 라우터와 상태 관리, 테스팅 등은 컴포넌트와 같이 쉽게 결합할 수 있는 형태로 제공됩니다. 이를 통해 뷰는 라이브러리로서의 역할이 아닌 프레임워크로서의 역할을 수행할 수 있습니다.”

는 화면의 UI를 빠르고 쉬운 방식으로 개발할 수 있어 많은 사용자를 확보하고 있는 자바스크립트 프레임워크입니다. 뷰와 비슷한 기능을 제공하는 프레임워크로는 리액트와 앵귤러 등이 있습니다.

뷰는 자바스크립트 기반의 프레임워크인 만큼 자바스크립트에 대한 이해가 필요하지만 다른 프레임워크에 비해 상대적으로 쉽게 배울 수 있습니다. 하지만 프론트엔드를 개발해본 적이 없는 초보 개발자라면 HTML과 CSS, 자바스크립트의 기초를 먼저 학습하셔야 뷰 프레임워크를 제대로 배울 수 있습니다.

HTML
HTML은 온라인상에 만들어지는 모든 웹 문서의 기본이 되며 노드와 링크 단위의 하이퍼텍스트 문서를 작성하하는 언어입니다.
CSS
CSS는 웹 문서의 전반적인 스타일을 미리 저장해두는 스타일시트로 문서 전체의 일관성을 유지하고 HTML 문서의 디자인 작업 시간을 단축해주는 언어입니다.
자바스크립트
자바스크립트는 객체지향 스크립트 언어로 웹 페이지의 동작을 담당하며 대부분의 브라우저에 자체적으로 내장된 해석 기능을 이용합니다. 클라이언트 기반의 크로스 플랫폼 스크립트 언어인 자바스크립트는 Node.js와 같은 런타임 환경의 서버 사이드 네트워크 프로그래밍에도 사용되고 있습니다.

뷰의 특징

뷰는 다음과 같은 특징이 있습니다.

첫째, 배우기가 쉽습니다. HTML과 CSS 그리고 자바스크립트를 알고 있는 노련한 웹 개발자라면 단 하루만에 기본적인 사용법을 익힐 수 있습니다.

둘째, 뷰 제작팀의 성능 비교에 따르면 리액트와 앵귤러에 비해 성능이 빠르고 우수합니다.

다음 페이지에서 뷰 제작팀이 테스트한 비교 내용을 확인할 수 있습니다.
https://kr.vuejs.org/v2/guide/comparison.html

셋째, 뷰는 앵귤러의 데이터 바인딩과 리액트의 가상 돔 렌더링 방식을 사용합니다. 즉 대표적인 두 프레임워크의 장점을 모두 포함합니다.

MVVM패턴과 뷰 모델

소프트웨어 아키텍쳐 패턴 중 MVVM패턴은 프론트엔드 화면의 UI 동작과 관련된 로직과 백엔드 화면의 데이터 처리 로직을 분리하여 코드를 더 깔끔하게 구성하는 것을 목표로 하는 소프트웨어 디자인 패턴 전략입니다.

MVVM 패턴은 사용자에게 보여지는 화면인 모델의 중간 영역인 뷰 모델그리고 서버에서 가져온 데이터를 저장하는 모델(일반적으로 자바스크립트 객체를 의미)로 구성됩니다.

MVVM 패턴으로 개발을 하면 화면의 요소들을 제어하는 코드와 데이터를 제어하는 로직을 분리할 수 있어 코드를 더 직관적으로 이해할 수 있고 유지 보수가 편해진다는 장점이 있기 때문에 점점 더 보편화되는 추세입니다.

MVVM 패턴에서 VM을 맡고 있는(?) 뷰 모델은 돔 DOM의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 돔 리스너(DOM Listener)와 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화시키는 데이터 바인딩등 으로 구성됩니다.

돔은 HTML 문서에 들어가는 요소인 태그, 클래스, 속성 등의 정보를 담고 있는 데이터 트리를 말합니다.

양방향 데이터 바인딩과 단방향 데이터 흐름

우리가 학습 할 뷰는 MVVM 패턴의 뷰 모델에 해당하는 화면을 구현하는 역할을 담당합니다. 이 때 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는데 이를 양방향 데이터 바인딩이라고 합니다.

양방향 데이터 바인딩은 원래 앵귤러 프레임워크가 가지고 있던 장점인데, 뷰는 앵귤러의 양방향 데이터 바인딩뿐만 아니라 리액트의 단방향 데이터 흐름의 장점도 가지고 있는 프레임워크입니다.

각 데이터 방식의 특징은 다음과 같습니다.

양방향 데이터 바인딩
화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 있어 한 쪽이 변경되면 다른 한쪽도 자동으로 변경되는 방식
단방향 데이터 흐름
컴포넌트 간에 이뤄지는 단방향 통신을 말하며, 프레임워크에서는 컴포넌트 간에 데이터를 전달하는 경우 항상 상위 컴포넌트에서 하위 컴포넌트로 전달하도록 구조화된 방식

가상 돔방식

뷰는 리액트의 가상 돔 방식을 적용하여 특정 요소를 추가하거나 삭제하는 경우 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다.

가상 돔 방식은 브라우저의 성능 부하를 줄일 수 있고 일반적인 렌더링 방식보다 빠르게 화면을 그릴 수 있는 방식입니다.

컴포넌트기반

뷰는 컴포넌트 기반의 프레임워크로서 블록을 하나하나 쌓아 원하는 모양을 만들듯이 뷰도 각각의 컴포넌트를 조합하여 전체 화면을 구성할 수 있습니다.

예를 들어 일반적인 웹 사이트의 경우 헤더와 콘텐츠, 푸터 등의 영역으로 분리할 수 있는데 이 각각의 영역을 컴포넌트 방식으로 개발을 하면 코드를 재사용할 수 있고 화면의 구조를 직관적으로 파악할 수 있습니다.

뷰 개발환경 만들기

뷰로 개발을 위해서는 어떤 도구들이 필요할까요? 바로 다음과 같은 도구들이 필요합니다.

  • 크롬, 파이어폭스와 같은 인터넷 브라우저
  • 서브라임텍스트, VS Code와 같은 텍스트 에디터
  • 노드

인터넷 브라우저

브라우저의 경우 개발자 도구가 지원되는 브라우저를 사용하는 것이 좋습니다. 크롬의 경우 확장 플러그인으로 제공되는 뷰 개발자 도구를 설치할 수 있어 보다 효율적이고 편리한 뷰 개발 환경을 구성할 수 있습니다.

텍스트 에디터

텍스트 에디터의 경우에는 아톰, 노트패드++, 서브라임 텍스트, Visual Studio Code등을 주로 사용하며, 이클립스, 인텔리J와 같은 IDE프로그램도 많이 사용됩니다.

참고로 본 클래스에서는 무료지만 다양하고 편리한 기능이 제공되는 텍스트 에디터 Visual Studio Code를 사용합니다.

노드

노드는 노드와 NPM 포스트를 참고해주세요.

싱글 컴포넌트 체계와 Vue CLI

싱글 파일 컴포넌트 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식을 말합니다. 일종의 모듈화 방식이라고 생각하셔도 됩니다.

무슨 말이냐구요? 아직 Vue를 학습하기 전이라 조금 어려운 개념이 될 수 도 있지만 싱글 컴포넌트 체계라는 것이 이런 것이구나 라는 정도만 알아두세요. 나머지는 강좌를 따라가다보면 자연스럽게 알게 될거예요.

.vue 파일은 다음과 같은 기본 구조를 가집니다.

<template>
    <!-- HTML 태그 내용 -->
    <div>
        <button>{{ message }}</button>
    </div>
</template>

<script>
    // 자바스크립트 내용
    export default {
        data: {
            message: 'click this button'
        }
    }
</script>

<style>
    /* CSS 스타일 내용 */
    button {
        font-size: 1rem;
    }
</style>

<template>은 화면에 표시할 요소들을 정의하는 영역이고 <script>는 뷰 컴포넌트의 내용을 정의하는 영역입니다. <style>은 아시겠죠?

Vue CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태로 변환해주는 웹팩이나 브라우저리파이와 같은 도구가 필요합니다.

하지만 이런 모듈 번들러들은 다소 복잡하고 배우기도 어렵기 때문에 뷰를 개발한 코어 팀에서는 뷰 프로젝트를 편하게 구성할 수 있도록 CLI도구를 제공합니다.

웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능 향상을 시켜주는 자바스크립트 모듈 번듈러이며, 브라우저리파이도 웹팩과 유사하지만 웹 자원 압축이나 빌드 자동화와 같은 기능이 제외된 가벼운 모듈 번들러라고 할 수 있습니다.

모듈 번들러는 서로 의존 관계가 있는 모듈을 하나의 파일로 묶어주는 도구로 노드가 필요합니다.

Vue CLI 설치하기

Vue CLI의 공식 문서에 따르면 Vue CLI는 npm과 yarn을 모두 지원합니다.

yarn은 페이스북에서 개발하여 배포하는 패키지 관리자로 npm과 같은 기능을 제공합니다. yarn은 npm을 통해 다음의 명령어로 설치할 수 있습니다.

npm install -g yarn

이제 Vue CLI를 설치하기 위해 터미널 창을 열고 다음과 같이 입력하세요.

npm install -g @vue/cli

또는 yarn을 사용해서 설치하는 경우에는 다음과 같은 명령어를 입력합니다.

yarn global add @vue/cli

설치가 완료되면 다음의 명령어로 설치된 버전을 확인할 수 있습니다.

vue --version
@vue/cli 4.5.3

Vue CLI로 프로젝트 생성하기

Vue CLI를 설치하면 vue create {project_name}와 같은 명령어로 프로젝트를 생성할 수 있습니다.

vue create my-vue-project

프로젝트 생성 명령어를 입력하면 defaultmanually select features모드를 선택할 수 있습니다.

디폴트 모드와 매뉴얼 모드 선택 화면

defaultbabeleslint를 포함하는 기본 템플릿으로 프로젝트를 생성합니다. 만약 더 많은 설정을 추가하여 프로젝트를 생성하고 싶다면 Manually select features를 선택합니다.

Manually select featuresbabeleslint외에도 타입스크립트, 프로그레시브 웹 앱 지원, 라우터, vuex, css 전처리기, 린터, 유닛 테스트등 세부적인 설정을 포함하여 프로젝트를 생성할 수 있습니다.

모듈 세부 설정 화면
뷰 버전 선택 화면
프로젝트 관리자 선택 화면

세부적인 설정을 마치면 해당 프로젝트명의 폴더가 생성되고 해당 폴더에 프로젝트에 필요한 모듈과 파일들이 미리 셋팅됩니다.

프로젝트 폴더에 셋팅된 기본 파일 구성

생성된 프로젝트의 앱 서버를 실행시키려면 생성된 폴더로 이동하여 뷰 프로젝트를 생성할 때 선택했던 패키지 관리자의 명령어를 입력합니다.

npm일 경우에는 아래 명령어를 입력합니다.

npm run serve

yarn일 경우에는 아래 명령어를 입력합니다.

yarn serve

어떤 파일 관리자를 선택했는지 잘 모르겠다면 프로젝트 폴더에 있는 README.md파일을 열어 확인해보세요. 다음과 같이 서비스 구동을 위한 기본적인 명령어들이 작성되어 있습니다. 본 클래스에서는 yarn을 사용하도록 하겠습니다.

# my-vue-project

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

앱 서버가 실행되면 터미널 창에 관련 정보와 함께 성공적으로 컴파일 되었다는 메세지가 나타납니다.

컴파일 메세지 하단에 접속 가능한 경로가 표시됩니다.

이제 웹 브라우저를 열고 터미널에 표시된 주소로 접속을 해보세요. 다음과 같이 vue의 기본 앱 화면이 표시됩니다.

표시된 경로로 접속하면 나타나는 화면

뷰 프로젝트 폴더의 구조

Vue CLI로 프로젝트를 생성하면 node_modules, public, src 등의 폴더package.json파일, readme문서 파일 등으로 구성된 프로젝트 폴더를 확인할 수 있습니다.

뷰 프로젝트 폴더의 구성은 디폴트 모드로 생성한 경우와 매뉴얼 모드로 생성한 경우에 따라 조금 차이가 있습니다. Manually select features로 프로젝트를 생성하면 매뉴얼 모드의 설정에 따라 추가적인 파일이 포함될 수 있습니다.

폴더를 살펴보면 프로젝트를 구성하는 파일이 많지만 중요한 파일src 폴더에 있는 main.jsApp.vue그리고 프로젝트의 루트에 있는 package.json파일입니다.

프로젝트의 핵심 파일과 폴더

main.js

main.js주요 모듈과 화면을 임포트하고 아이디가 app인 엘리먼트에 프로젝트의 컴포넌트를 로드하고 렌더링하도록 기본 뷰 인스턴스에 명령하는 역할을 합니다.

아이디가 app인 엘리먼트는 프로젝트의 public 폴더에 있는 index.html파일에서 확인할 수 있는데 뷰로 작성된 모든 화면은 이 아이디가 app인 엘리먼트의 내부에서 렌더링되고 컨트롤 됩니다.

App.vue

src 폴더에 있는 App.vue파일은 템플릿을 이용한 기본 DOM과 뷰 컴포넌트를 작성하기 위한 기본 코드를 포함합니다.

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    components: {
      HelloWorld
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

테스트삼아 기본적으로 작성되어있는 <HelloWorld msg=”Welcome to Your Vue.js App”/>msg의 내용을 수정해보세요. 뷰는 해당 구성 요소를 자동으로 다시 로드하고 조금전에 수정된 내용으로 화면을 업데이트합니다.

이것은 뷰가 수정되는 내용을 바로 반영해서 업데이트 해주는 반응형 프레임워크이기 때문인데 작업의 효율성을 높여주는 강력한 기능이라고 할 수 있습니다.

 

package.json

package.json은 프로젝트의 정보를 담고 있는 설정 파일입니다. 이 파일에는 프로젝트 구성에 필요하거나 애플리케이션을 만드는데 필요한 라이브러리의 정보들이 담겨있습니다.

처음에 프로젝트를 실행하기 전에 터미널에서 yarn install이라는 명령어를 입력하면 뷰는 package.json에 있는 라이브러리의 목록을 참조하여 관련된 의존성 모듈을 모두 설치하는데 설치된 모듈은 프로젝트의 node_modules 폴더에서 확인할 수 있습니다.

애플리케이션을 개발하는 도중에 필요한 라이브러리가 생긴다면 이 package.json파일에 해당 라이브러리를 기술하면 됩니다. 그러면 나중에 언제라도 yarn install명령어를 실행하여 모든 의존성 라이브러리를 자동으로 설치할 수 있습니다.

뷰 프로젝트 디버깅하기

애플리케이션을 개발하는 과정에서 적절한 디버깅은 작업의 효율을 높여주고 실수를 예방하거나 에러를 찾아내는 중요한 작업으로 뷰는 크롬의 확장 프로그램인 vue.js devtools로 효율적인 디버깅 작업을 할 수 있습니다.

vue.js devtools

vue.js devtools는 뷰를 이용한 애플리케이션 개발에 도움이 되는 유용한 디버깅 도구입니다.

vue.js devtools를 사용하면 뷰로 만든 웹 앱을 간편하게 분석하고 컴포넌트간의 관계를 확인하거나 데이터의 변화를 추적할 수 있으며, 내부 변수를 검사하는 경우에도 다양한 디버깅 기능을 제공합니다.

또 각 개발 단계별 컴포넌트 상태, 페이지에서의 위치 등을 시각화하는데에도 큰 도움이 되며 Vuex와도 깊게 통합되어 있기때문에 웹 브라우저에서 이벤트의 흐름을 되감기 할 수 있는 타임머신 기능도 사용할 수 있습니다.

하지만 무료 도구인 만큼 분명한 한계도 존재합니다. 특정 메소드의 흐름을 깊이 추적하는 것은 어렵습니다.

vue.js devtools 설치 및 사용하기

vue.js devtools는 크롬 브라우저의 웹 스토어에서 검색하여 설치할 수 있습니다.

크롬 웹 스토어에서 vue.js devtools를 검색한 화면

vue.js devtools 확장 프로그램이 추가되면 크롬 주소창의 오른쪽에 vue 개발자 도구의 아이콘이 표시됩니다. 참고로 vue.js devtools 아이콘은 뷰로 생성된 애플리케이션 페이지에서만 활성화가 됩니다.

뷰 애플리케이션 페이지에서 활성화되는 vue.js devtools 아이콘

vue.js devtools를 사용하려면 뷰 프로젝트로 생성된 애플리케이션 페이지로 이동해 F12를 눌러 크롬 개발자 도구를 실행하면 됩니다.

크롬 개발자 도구를 실행하면 상단의 탭 메뉴에 Vue라는 탭 메뉴가 새로 추가되어 있는 것을 확인할 수 있습니다.

만약 vue.js devtools 플러그인을 설치했는데도 뷰 개발자 메뉴가 추가되어있지 않다면 크롬 확장 플러그인의 설정을 변경해주어야 합니다.

크롬 브라우저 주소창의 오른쪽에 있는 더보기 아이콘을 클릭하여 도구 더보기 > 확장 프로그램을 선택합니다.

해당 메뉴를 선택하면 chrome://extensions/페이지로 이동하여 설치된 플러그인의 목록을 보여줍니다. 표시된 목록에서 vue.js devtools를 찾아 세부정보를 클릭합니다.

세부정보를 클릭하면 아래쪽에 “파일 URL에 대한 엑세스 허용”이라는 항목이 있습니다. 이 항목의 체크 박스에 체크를 하고 크롬을 다시 실행합니다.

이제 뷰로 제작된 웹 페이지에서 크롬 개발자 도구를 확인하면 상단의 탭 메뉴에 Vue 라는 메뉴가 추가된 것을 확인할 수 있습니다.

추가된 vue 탭을 클릭하면 최상위 컴포넌트인 root단계별 엘리먼트 구조를 확인할 수 있고 엘리먼트 구조의 각 컴포넌트를 클릭하면 해당 컴포넌트에서 사용된 data 속성을 확인할 수 있습니다.

vue.js devtools 실행 화면

각각의 컴포넌트에 마우스를 올리면 눈 모양의 “inspect DOM”버튼이 표시됩니다. 이 버튼을 클릭하면 페이지 내의 해당 엘리먼트가 있는 곳으로 스크롤되어 쉽게 해당 엘리먼트를 찾을 수 있습니다.

트리의 컴포넌트를 선택하면 $vm0와 같이 뷰 객체의 정보를 담고 있는 변수를 사용할 수 있는데 이 변수를 이용하여 컴포넌트의 객체 속성을 확인하거나 디버깅 테스트 등의 작업을 수행 할 수 있습니다.

기초 코드 작성해보기

모든 프로그래밍 언어를 공부할 때는 의무적으로 한번은 만들어봐야 하는 프로그램이 있습니다. 바로 Hello, World입니다.

Hello World는 프로그래밍 언어의 가장 기본적인 문법으로 구현하는 기본 예제 프로그램입니다. Hello World프로그램을 직접 작성하고 실행해보는 이유는 프로그램을 직접 작성하고 동작시켜 봄으로써 해당 프로그래밍 언어의 구조와 문법을 알 수 있기 때문입니다.

우선 기본적인 Hellow World예제를 만들어보기 위해 뷰 프로젝트를 실행하고 src 폴더App.vue파일을 열어주세요. 다음은 App.vue 파일의 기본 구조입니다.

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
    name: 'App',
    components: {
        HelloWorld
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

App.vue 파일의 <template>안에 있는 HTML 내용을 보면 기존의 HTML 태그가 아닌 HelloWorld라는 태그가 있는 것을 확인할 수 있습니다. 이 태그는 컴포넌트를 가리키는 것으로

우선 이 HelloWorld 태그의 msg 속성의 내용을 변경해보세요. 이 속성의 내용을 바꾼 후 저장하면 양방향 바인딩이 이루어지며 개발자가 수정하는 즉시 업데이트가 이루어집니다.

이번에는 Components 폴더HelloWorld.vue라는 파일을 열어볼까요? 이 파일을 열어보면 아래와 같이 머스태치 또는 핸들바라고 부르는 {{ }} 모양의 기호들로 감싼 코드가 포함되어 있는 것을 확인 할 수 있습니다.

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

이렇게 {{ }} 기호로 감싼 메세지는 양방향 바인딩이 이루어지는데 이 양방향 데이터 바인딩 메시지는 아래쪽의 <script> 안에 속성으로 정의되어 있는 것을 알 수 있습니다.

양방향 데이터 바인딩과 핸들바

중첩된 형태의 중괄호({{..}})는 핸들바또는 머스태치라고 합니다. 앞으로의 강좌에서는 보다 의미를 명확하게 전달하기 위해 중첩된 중괄호의 명칭을 핸들바로 통일하도록 하겠습니다.

핸들바를 사용하는 것은 뷰가 모든 데이터를 핸들바의 내부로 가져와 해당 데이터를 코드로 해석할 수 있도록 하기 위해서입니다.

앞의 예제에서는 단순히 문자열을 표시해주는 역할이지만 핸들바 내에서는 {{‘Hello ‘ + ‘World’}}또는 {{5 + 2}}와 같이 자바스크립트 연산을 하거나 다음과 같이 데이터 바인딩을 사용하여 인스턴스 내부에 선언된 변수를 할당할 수도 있습니다.

웹에서 직접 테스트하기

만약 아직 개발 환경을 구성하지 않았다면 Jsfiddle.net과 같은 사이트에서 뷰 예제 프로그램을 작성하고 실행해보세요.

Jsfiddle.net에 접속하면 네 영역으로 분할 된 페이지를 확인할 수 있습니다. 이 페이지의 좌측 하단에는 자바스크립트 코드를 작성할 수 있고, 우측 하단에서는 작성한 소스를 실행한 결과를 확인할 수 있습니다. 상단은 HTML과 CSS를 작성할 수 있는 영역입니다.

Jsfiddle.net에서 뷰 프로그램을 작성하기 위해서는 좌측 하단의 자바스크립트 영역의 타이틀을 클릭한 후 Language 박스에서 vue.js를 선택해주어야 합니다. 같은 방식으로 HTML과 CSS 영역에서도 프리컴파일 언어나 관련된 언어를 선택하여 해당 언어를 테스트 할 수 있습니다.

예제 프로그램을 작성하고 난 후 상단의 RUN버튼을 클릭하면 결과를 확인할 수 있습니다.

뷰의 동작 프로세스 및 구조

뷰는 app이라는 아이디를 갖는 <div>요소의 내부에 각각의 싱글 컴포넌트가 추가되면 단일 페이지 애플리케이션으로 구현합니다.

app 요소의 내부에는 데이터 조작이 필요한 요소 즉 양방향 데이터 바인딩 요소를 중괄호를 중첩한 핸들바로 감싸고 있습니다.

핸들바로 감싼 데이터 요소는 뷰에서 데이터 바인딩이나 자바스크립트를 사용하여 직접 조작할 수 있습니다.

<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>
    </div>
</template>

앞의 Hello World 기본 예제 코드를 브라우저에서 실행하면 뷰 인스턴스에 정의된 데이터 객체의 메시지 즉, 핸들바에 정의된 속성의 내용이 화면에 출력됩니다.

뷰 인스턴스를 생성하는 코드는 main.js에 다음과 같이 포함되어 있습니다.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(App)
}).$mount('#app')

뷰 인스턴스를 생성한는 new Vue()는 아이디가 app인 새로운 Vue 인스턴스를 생성하고 내부에 render객체를 인자로 받습니다.

new Vue()를 통해 생성되는 인스턴스는 뷰의 핵심이라고 할 수 있습니다. 뷰는 이 new Vue()를 통해 만들어진 객체를 통해 페이지의 모든 데이터와 동작을 정의하고 제어합니다. 즉 앞으로 작성하게 될 모든 뷰 인스터스컴포넌트 정보도 이 객체의 내부에 정의되고 저장된다는 의미입니다.

샘플 코드와 같이 뷰는 #app을 페이지의 요소 식별자로 반환하고 id가 app인 <div> 태그에 포함되는 모든 요소들은 Vue 객체와 동기화되어 모두 뷰의 영향 아래 위치하게 됩니다.

물론 #app이 아닌 다른 아이디로 전체 콘테이너의 식별자를 바꿀 수도 있습니다. 만약 다른 아이디로 변경하는 경우에는 한 가지 주의해야 할 부분이 있습니다.

식별자를 변경하는 경우 <html>이나 <body>태그는 선택자로 지정할 수 없습니다. 만약 <html>이나 <body>요소를 선택자로 지정하면 에러가 발생하고 앱을 <html>이나 <body>가 아닌 다른 요소에 마운트하라는 메시지를 출력합니다.

댓글 남기기