Vue 개발환경과 기본 문법
Vue 파일 구조와 ref(), 이벤트, 속성 바인딩의 기본을 익혀봅니다.
1장에서는 Vue가 데이터를 중심으로 화면을 관리하는 프레임워크라는 것을 알아보았습니다.
2장에서는 실제 Vue 프로젝트를 만들고 기본적인 문법을 직접 실습합니다.
Vue 프로젝트를 개발할 때는 여러 도구가 서로 연결되어 사용됩니다.
JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 실행 환경입니다. Vue 프로젝트를 만들고 개발 도구를 실행할 때 사용합니다.
Node.js와 함께 설치되는 패키지 관리 도구입니다. Vue 개발에 필요한 여러 프로그램과 라이브러리를 설치할 때 사용합니다.
Vue 프로젝트를 빠르게 생성하고 개발 서버를 실행할 수 있도록 도와주는 개발 도구입니다.
명령 프롬프트 또는 VS Code 터미널에서 다음 명령어를 실행합니다.
node --version
npm도 정상적으로 사용할 수 있는지 확인합니다.
npm --version
일반적으로 Node.js를 설치하면 npm도 함께 설치됩니다. 따라서 Node.js 설치 후 두 명령어가 모두 정상적으로 실행되는지 확인하면 됩니다.
이제 Vite를 이용하여 첫 번째 Vue 프로젝트를 만들어 보겠습니다.
터미널에서 다음 명령을 실행합니다.
npm create vite@latest vue-basic
선택 화면이 나타나면 다음과 같이 선택합니다.
Framework : Vue Variant : JavaScript
cd vue-basic
npm install
npm run dev
터미널에 표시되는 로컬 주소를 웹 브라우저에서 열면 Vue 프로젝트를 확인할 수 있습니다.
프로젝트를 생성하면 여러 폴더와 파일이 만들어집니다.
vue-basic │ ├─ node_modules ├─ public ├─ src │ ├─ assets │ ├─ components │ ├─ App.vue │ └─ main.js │ ├─ index.html ├─ package.json └─ vite.config.js
처음부터 모든 파일의 역할을 이해할 필요는 없습니다.
우선 다음 세 가지 파일의 연결 관계를 기억하면 됩니다.
main.js는 Vue 프로그램을 시작하는 파일입니다.
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue를 Vue 애플리케이션으로 만든 다음 HTML의 #app 영역에 연결합니다.
Vue에서는 화면 하나 또는 화면의 일부를 .vue 파일로 작성할 수 있습니다.
기본 구조는 다음과 같습니다.
<script setup> </script> <template> </template> <style scoped> </style>
| 영역 | 역할 |
|---|---|
| <script setup> | JavaScript 프로그램 |
| <template> | HTML 화면 |
| <style scoped> | CSS 디자인 |
│
├─ JavaScript
├─ HTML
└─ CSS
Vue의 .vue 파일은 프로그램 로직, HTML 화면, CSS 디자인을 한 파일에서 관리할 수 있는 구조입니다.
이제 App.vue를 수정하여 간단한 데이터를 화면에 출력해 보겠습니다.
<script setup>
const title = 'Vue 프로그램'
</script>
<template>
<h1>{{ title }}</h1>
</template>
{{ }}는 JavaScript의 데이터를 HTML 화면에 출력하는 Vue 문법입니다.
{{ title }}
Vue에서 {{ }}를 이용해 JavaScript 값을 화면에 표시하는 방식을 보간법(Interpolation)이라고 합니다.
JavaScript 영역에서 여러 변수를 만들고 Vue 화면에 각각 출력할 수도 있습니다.
<script setup>
const name = '홍길동'
const age = 30
const department = '개발팀'
</script>
<template>
<h2>사원정보</h2>
<p>이름 : {{ name }}</p>
<p>나이 : {{ age }}</p>
<p>부서 : {{ department }}</p>
</template>
이름 : 홍길동
나이 : 30
부서 : 개발팀
Vue에서는 HTML 요소를 찾아 값을 넣는 코드를 작성하지 않아도 됩니다.
앞에서 만든 변수는 일반 JavaScript 변수입니다.
Vue에서 값의 변경을 감지하고 화면까지 자동으로 갱신하려면 ref()를 사용할 수 있습니다.
<script setup>
import { ref } from 'vue'
const count = ref(100)
</script>
<template>
<h2>현재 값 : {{ count }}</h2>
</template>
ref()는 Vue에서 반응형 데이터를 만드는 대표적인 방법입니다.
const count = ref(100)
구조를 간단하게 생각하면 다음과 같습니다.
│
└─ value
│
└─ 100
JavaScript 영역에서 값을 가져올 때는 .value를 사용합니다.
count.value
값을 변경할 때도 같은 방식입니다.
count.value = 200
JavaScript 영역에서는 count.value를 사용하고, template 영역에서는 {{ count }}처럼 사용할 수 있습니다.
이번에는 버튼을 클릭하여 count 값을 변경해 보겠습니다.
<script setup>
import { ref } from 'vue'
const count = ref(100)
function changeCount() {
count.value = 200
}
</script>
<template>
<h2>현재 값 : {{ count }}</h2>
<button @click="changeCount">
값 변경
</button>
</template>
[값 변경]
[값 변경]
여기서 중요한 점은 함수 안에 화면을 직접 변경하는 코드가 없다는 것입니다.
function changeCount() {
count.value = 200
}
다음과 같은 DOM 코드는 필요하지 않습니다.
document.getElementById("result").innerText = count
Vue가 count의 변경을 감지하고 연결된 화면을 자동으로 갱신하기 때문입니다.
count를 이용해 간단한 수량 프로그램을 만들어 보겠습니다.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increase() {
count.value++
}
function decrease() {
count.value--
}
function reset() {
count.value = 0
}
</script>
<template>
<h2>수량 : {{ count }}</h2>
<button @click="increase">증가</button>
<button @click="decrease">감소</button>
<button @click="reset">초기화</button>
</template>
[증가] [감소] [초기화]
모든 함수는 count 데이터만 변경합니다.
앞의 예제에서 다음 문법을 사용했습니다.
<button @click="increase">
@click은 버튼을 클릭했을 때 함수를 실행하는 Vue 이벤트 문법입니다.
일반적인 형태는 다음과 같습니다.
<button @click="함수명">
예를 들어 저장, 수정, 삭제 버튼을 만들 수 있습니다.
<button @click="save">저장</button> <button @click="update">수정</button> <button @click="remove">삭제</button>
JavaScript 함수는 다음과 같이 작성합니다.
function save() {
console.log('저장')
}
function update() {
console.log('수정')
}
function remove() {
console.log('삭제')
}
@click은 v-on:click의 축약형입니다.
v-on:click="save" @click="save"
실제 Vue 코드에서는 간단한 @click 형태를 많이 사용합니다.
Vue에서는 HTML 태그의 내용뿐만 아니라 HTML 속성에도 데이터를 연결할 수 있습니다.
<img src="python.png">
<img :src="image">
JavaScript에서는 다음 데이터를 준비합니다.
const image = '/python.png'
:는 v-bind:의 축약형입니다.
<img v-bind:src="image"> <img :src="image">
속성 바인딩은 이미지뿐만 아니라 링크, 버튼 상태 등에도 사용할 수 있습니다.
<a :href="url">사이트 이동</a> <button :disabled="disabled"> 저장 </button>
- @click → v-on:click
- :src → v-bind:src
지금까지 배운 내용을 이용하여 간단한 상품 수량 관리 프로그램을 만들어 보겠습니다.
<script setup>
import { ref } from 'vue'
const productName = '노트북'
const count = ref(1)
function increase() {
count.value++
}
function decrease() {
if (count.value > 0) {
count.value--
}
}
function reset() {
count.value = 0
}
</script>
<template>
<h1>상품 관리</h1>
<p>상품명 : {{ productName }}</p>
<h2>수량 : {{ count }}</h2>
<button @click="increase">
수량 증가
</button>
<button @click="decrease">
수량 감소
</button>
<button @click="reset">
초기화
</button>
</template>
<style scoped>
button {
margin-right: 10px;
padding: 8px 15px;
}
</style>
상품명 : 노트북
수량 : 1
[수량 증가] [수량 감소] [초기화]
이 프로그램에서 수량을 증가시키는 코드는 다음과 같습니다.
count.value++
감소시키는 코드는 다음과 같습니다.
count.value--
수량을 증가하거나 감소시킬 때 개발자가 HTML 화면을 직접 수정하지 않습니다.
count.value만 변경하면 Vue가 데이터의 변화를 감지하여 {{ count }}가 표시된 화면을 자동으로 갱신합니다.
Vue를 처음 배울 때 반드시 이해해야 하는 중요한 부분입니다.
let count = 100
const count = ref(100)
| 일반 변수 | ref() |
|---|---|
| JavaScript 변수 | Vue 반응형 데이터 |
| count | count.value |
| 값 변경 가능 | 값 변경 가능 |
| 변경 자체가 Vue 화면 갱신을 보장하지 않음 | 변경을 Vue가 감지 |
| 일반 프로그램 로직에 사용 | 화면과 연결되는 데이터에 많이 사용 |
Vue 화면에서 값이 변경되고 그 변경 내용을 화면에 바로 반영해야 하는 데이터라면 ref()를 사용하는 것이 중요합니다.
화면과 연결되고 변경되는 데이터 → ref()
- Vue 프로젝트 개발에는 Node.js, npm, Vite 등을 사용할 수 있다.
- npm create vite@latest 명령으로 Vue 프로젝트를 생성할 수 있다.
- npm install은 프로젝트에 필요한 패키지를 설치한다.
- npm run dev는 개발 서버를 실행한다.
- Vue 프로젝트의 기본 흐름은 index.html → main.js → App.vue로 이해할 수 있다.
- .vue 파일은 script, template, style 영역으로 구성할 수 있다.
- {{ }}는 데이터를 화면에 출력하는 보간법이다.
- ref()는 Vue에서 반응형 데이터를 만드는 대표적인 방법이다.
- JavaScript 영역에서 ref 값을 사용할 때는 .value를 사용한다.
- @click은 클릭 이벤트를 연결하는 Vue 문법이다.
- :속성명은 v-bind:속성명의 축약형이다.
- 반응형 데이터가 변경되면 Vue가 연결된 화면을 자동으로 갱신한다.