# 기본 구조

## 기본 구조 

Vue application의 기본 구조를 살펴본다. 아래 페이지에 작성된 코드를 기준으로 설명한다.

{% content-ref url="" %}
[](https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3)
{% endcontent-ref %}

### 제어 영역 지정

VueJS는 HTML 문서의 특정 영역을 지정하여 사용한다. 기본적인 예제에서는 하나의 Vue app이 하나의 영역을 담당하므로 id를 식별자로 사용하였으나, class로 하거나 기타 다른 선택자를 사용할 수 있다.

```markup
<div id="app">

</div>
```

### Vue CDN

VueJS를 사용하기 위해서는 필요한 의존성을 불러와야 하며, 다양한 방법들이 존재한다. 여러 방법 중 가장 간편하게 사용할 수 있는 CDN을 사용하며, 공식 문서에 나와 있는 `unpkg`에서 제공하는 CDN을 사용한다.

```markup
<script src="https://unpkg.com/vue@next"><script>
```

위의 CDN을 사용할 경우 Vue Devtools를 이용한 개발용 테스트 등이 가능하다. 만약 배포용으로 CDN을 사용하고 싶을 경우 다음과 같이 CDN을 작성한다.

```markup
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
```

버전을 지정하고 싶은 경우 next 자리에 버전을 작성한다(학습용도 마찬가지)&#x20;

```html
<script src="https://unpkg.com/vue@3.2.27/dist/vue.global.prod.js"></script>
```

### Vue Application 생성

제어 영역에 연결할 Vue application을 다음과 같이 생성한다.

```html
<script>
const app = Vue.createApp({
    
});
app.mount("#app");
</script>
```

Vue 전역 객체의 createApp 함수를 이용하여 앱을 생성하며, 옵션을 추가하여 필요한 정보들을 알려준다.

생성된 앱을 mount 함수를 이용하여 작성한 선택자와 일치하는 영역에 할당하면 기본 application 구현이 완료된다.

### 백그라운드 데이터 생성

Vue 제어 영역에 표시하기 위한 백그라운드 데이터를 Vue application 내부에 생성한다.&#x20;

```javascript
const app = Vue.createApp({ 
    data(){
        return {
            text : "Welcome to Vue JS 3!"
        };
    }
});
app.mount("#app");
```

### Template Rendering

VueJS에서는 출력을 위한 다양한 형태의 템플릿 문법을 지원하며, 그 중 Mustache(이중 중괄호 구문)으로 출력을 시도하였다.

```markup
<h1>{{text}}</h1>
```

`{{text}}`는 Vue application 실행 이후 data 함수에서 반환하는 객체 내부의 `text` 값으로 치환된다. 따라서 일시적으로 화면에 `{{text}}` 글자가 표시될 수 있다.

{% hint style="info" %}
템플릿 출력 구문은 반드시 「제어 대상」 영역 내에서 사용해야 한다. Vue application에서 지정한 제어 대상 영역이 아닐 경우 렌더링되지 않는다.
{% endhint %}