Vue를 실무 흐름으로 이해하기
Vue 3 Composition API로 현대적인 웹 애플리케이션을 구축합니다. 반응형 시스템, 컴포넌트 통신, Pinia 상태 관리, Nuxt.js 통합까지 완전 가이드. 이 가이드는 개념을 나열하기보다, 실제 프로젝트에서 판단해야 하는 순서대로 내용을 따라갈 수 있게 구성했습니다.
프론트엔드 프레임워크 완전 가이드
Vue 완전 가이드
Vue 3 Composition API로 현대적인 웹 애플리케이션을 구축합니다. 반응형 시스템, 컴포넌트 통신, Pinia 상태 관리, Nuxt.js 통합까지 완전 가이드.
목차 10개 섹션
가이드 사용법
프론트엔드 / 앱 개발
화면을 그리는 법에서 멈추지 않고, 상태, 데이터 요청, 라우팅, 접근성, 배포 단위까지 함께 봅니다.
구조 다이어그램
글로 읽은 내용을 머릿속에 오래 남기려면 먼저 흐름을 그림으로 잡는 편이 좋습니다. 아래 두 그림은 Vue를 학습할 때 계속 되돌아볼 수 있는 기준 지도입니다.
학습 흐름
다이어그램 렌더링 중…
아키텍처 관점
다이어그램 렌더링 중…
환경 설정
Vue를 처음 펼칠 때는 세부 명령보다 큰 그림이 먼저입니다. 이 섹션에서는 앞으로 배울 개념들이 어떤 문제를 풀기 위해 등장했는지부터 잡아봅니다.
create-vue는 Vite 기반 프로젝트 구조를 대화형으로 구성해주는 공식 스캐폴딩 도구입니다. 서버 사이드 렌더링(SSR)이 필요하면 Vue를 직접 설정하는 대신 그 위에 파일 기반 라우팅과 SSR을 얹은 Nuxt 3로 시작하는 경우가 많습니다.
BASH
npm create vue@latest my-app
cd my-app && npm install && npm run dev
# Nuxt 3 (SSR)
npx nuxi@latest init my-nuxt-appComposition API & 반응형
여기서는 Composition API & 반응형을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
`ref`로 감싼 값은 변경될 때마다 그 값을 사용하는 화면 부분만 자동으로 다시 그려집니다. `computed`는 의존하는 값이 바뀔 때만 다시 계산되는 캐시된 값이고, `watch`는 값이 바뀌는 순간에 부수 효과(API 호출, 로깅 등)를 실행합니다.
Counter.vueVUE
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
watch(count, (newVal) => {
console.log('count changed:', newVal);
});
function increment() { count.value++; }
</script>
<template>
<button @click="increment">Count: {{ count }} (x2: {{ doubled }})</button>
</template>컴포넌트 통신 (Props/Emit)
여기서는 컴포넌트 통신 (Props/Emit)을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
Vue 컴포넌트는 부모에서 자식으로는 props로 데이터를 내려주고, 자식에서 부모로는 emit으로 이벤트를 올려보내는 단방향 데이터 흐름을 기본으로 합니다. 자식이 부모의 상태를 직접 바꾸지 않기 때문에, 데이터가 어디서 왜 바뀌었는지 추적하기 쉽습니다.
ChildInput.vueVUE
<script setup lang="ts">
const props = defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
function onInput(e: Event) {
emit('update:modelValue', (e.target as HTMLInputElement).value);
}
</script>
<template>
<input :value="props.modelValue" @input="onInput" />
</template>Parent.vueVUE
<script setup>
import { ref } from 'vue';
const name = ref('');
</script>
<template>
<!-- v-model은 :modelValue + @update:modelValue의 축약형 -->
<ChildInput v-model="name" />
<p>입력값: {{ name }}</p>
</template>Pinia 상태 관리
여기서는 Pinia 상태 관리을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
여러 컴포넌트가 props/emit 체인을 여러 단계 거치지 않고 같은 상태를 공유해야 할 때 Pinia를 사용합니다. store는 하나의 중앙화된 반응형 객체로, state(데이터)·getters(계산된 값)·actions(상태를 바꾸는 로직)로 역할이 나뉩니다.
stores/user.tsTYPESCRIPT
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({ name: '', isLoggedIn: false }),
getters: {
greeting: (state) => `Hello, ${state.name}!`,
},
actions: {
login(name: string) {
this.name = name;
this.isLoggedIn = true;
},
logout() {
this.name = '';
this.isLoggedIn = false;
},
},
});Nuxt.js
여기서는 Nuxt.js을 실제 코드와 함께 확인합니다. 예제를 그대로 따라 하기보다, 입력과 출력, 그리고 바뀌기 쉬운 부분이 어디인지 보면서 읽어보세요.
Nuxt 3는 Vue의 Next.js입니다. 파일 기반 라우팅, SSR, 자동 import를 제공합니다.
pages/index.vueVUE
<script setup>
const { data } = await useFetch('/api/posts');
useSeoMeta({
title: 'My Blog',
description: 'Blog powered by Nuxt 3',
});
</script>
<template>
<div v-for="post in data" :key="post.id">
<NuxtLink :to="`/posts/${post.id}`">{{ post.title }}</NuxtLink>
</div>
</template>Vue 실무 설계
Vue 실무 설계은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
Vue는 Composition API로 domain logic을 composable로 분리하면 재사용성과 테스트가 좋아집니다.
| 결정 지점 | 확인 질문 | 실무 기준 |
|---|---|---|
| 경계 | Vue 코드에서 바뀌기 쉬운 부분은 어디인가? | 입출력, 설정, 외부 연동, 핵심 규칙을 분리합니다. |
| 상태 | 상태가 어디서 생성되고 어디서 사라지는가? | 상태 소유자와 수명 주기를 코드로 드러냅니다. |
| 장애 | 실패했을 때 호출자는 무엇을 받는가? | timeout, fallback, error contract를 먼저 정합니다. |
Vue 운영 기준
이 섹션은 Vue 운영 기준을 실무 관점에서 정리합니다. 개념을 외우기보다, 어떤 상황에서 이 기준을 꺼내 쓸지에 초점을 맞춰보세요.
reactivity 비용, watcher 남용, bundle size, route-level code split을 관리해야 합니다.
Vue 검증 전략
Vue 검증 전략은 선택지가 갈리는 지점입니다. 표를 기준으로 각 방법의 쓰임새와 운영상의 차이를 비교해두면 이후 판단이 훨씬 쉬워집니다.
component event, slot, form validation, async loading state를 테스트해야 합니다.
| 품질 축 | 검증 방법 | 완료 기준 |
|---|---|---|
| 정확성 | 정상/실패 케이스를 자동화합니다. | 핵심 시나리오가 재현 가능하게 통과합니다. |
| 회귀 방지 | 버그 수정 시 동일 케이스를 테스트로 남깁니다. | 같은 장애가 다시 배포되지 않습니다. |
| 운영성 | 로그, 메트릭, 알림을 확인합니다. | 문제가 생겼을 때 원인 추적 경로가 있습니다. |