첫 Vue 앱 만들기 (hello world)

1. Vue 3 시작하기

Vue 3 CDN 추가

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

• Vue 3를 사용하기 위해 CDN(Content Delivery Network)을 통해 라이브러리를 불러옵니다.
• 개발 환경에서는 npm을 통한 설치를 권장하지만, 학습 목적으로는 CDN이 간단합니다.

2. Vue 앱의 기본 구조

HTML 템플릿

<div id="app">
    {{ message }}
</div>

• id="app"인 요소는 Vue 앱이 마운트될 위치입니다.
• {{ message }}는 Vue의 템플릿 문법으로, 데이터를 화면에 표시합니다.

Vue 앱 생성

Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    }
}).mount('#app');

• Vue.createApp(): Vue 앱을 생성합니다.
• data(): 반응형 데이터를 정의하는 함수입니다.
• mount('#app'): Vue 앱을 HTML 요소에 마운트합니다.

3. 핵심 개념

반응성 (Reactivity)

• Vue는 데이터가 변경될 때 자동으로 화면을 업데이트합니다.
• data() 함수에서 반환하는 객체의 속성은 반응형이 됩니다.

템플릿 문법

• {{ }}: 데이터를 화면에 표시하는 보간법입니다.
• 이 외에도 v-bind, v-on 등의 디렉티브를 사용할 수 있습니다.

마운트 (Mount)

• Vue 앱이 HTML 요소에 연결되는 과정입니다.
• mount('#app')는 id="app"인 요소에 Vue 앱을 마운트합니다.