VueUse 완벽 가이드 | Vue Composables·유틸리티·Hooks·실전 활용
이 글의 핵심
VueUse로 Vue 개발을 가속화하는 완벽 가이드. 200+ Composables, useFetch, useLocalStorage, useMouse까지 실전 예제로 정리. VueUse·Vue 3·Composables 중심으로 설명합니다.
이 글의 핵심
VueUse로 Vue 개발을 가속화하는 완벽 가이드입니다. 200+ Composables, useFetch, useLocalStorage, useMouse까지 실전 예제로 정리했습니다.
실무 경험 공유: 직접 구현한 Composables를 VueUse로 대체하면서, 개발 시간이 50% 단축되고 코드 품질이 향상된 경험을 공유합니다.
들어가며: “반복 코드가 많아요”
실무 문제 시나리오
시나리오 1: 같은 로직을 반복해요
fetch, localStorage 등을 매번 구현합니다. VueUse는 200+ Composables를 제공합니다. 시나리오 2: 브라우저 API가 복잡해요
Native API는 어렵습니다. VueUse는 간단한 래퍼를 제공합니다. 시나리오 3: 반응형 유틸리티가 필요해요
직접 만들기 어렵습니다. VueUse는 즉시 사용 가능합니다.
1. VueUse란?
핵심 특징
VueUse는 Vue Composables 컬렉션입니다. 주요 장점:
- 200+ Composables: 다양한 유틸리티
- TypeScript: 완벽한 지원
- Tree-shakable: 필요한 것만
- SSR 친화적: Nuxt 호환
- 잘 테스트됨: 안정적
2. 설치 및 기본 사용
설치
npm install @vueuse/core기본 사용
<script setup lang="ts">
import { useMouse, useLocalStorage } from '@vueuse/core';
const { x, y } = useMouse();
const count = useLocalStorage('count', 0);
</script>
<template>
<div>
<p>Mouse: {{ x }}, {{ y }}</p>
<p>Count: {{ count }}</p>
<button @click="count++">Increment</button>
</div>
</template>3. State Composables
useLocalStorage
<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core';
const user = useLocalStorage('user', { name: ', email: ' });
</script>
<template>
<input v-model="user.name" placeholder="Name" />
<input v-model="user.email" placeholder="Email" />
</template>useSessionStorage
<script setup lang="ts">
import { useSessionStorage } from '@vueuse/core';
const token = useSessionStorage('token', ');
</script>4. Browser Composables
useFetch
<script setup lang="ts">
import { useFetch } from '@vueuse/core';
const { data, error, isFetching } = useFetch('/api/users').json();
</script>
<template>
<div v-if="isFetching">Loading...</div>
<div v-else-if="error">Error: {{ error }}</div>
<ul v-else>
<li v-for="user in data" :key="user.id">{{ user.name }}</li>
</ul>
</template>useClipboard
<script setup lang="ts">
import { useClipboard } from '@vueuse/core';
const { text, copy, copied } = useClipboard();
const handleCopy = () => {
copy('Hello VueUse!');
};
</script>
<template>
<button @click="handleCopy">
{{ copied ? 'Copied!' : 'Copy' }}
</button>
<p>Clipboard: {{ text }}</p>
</template>5. Sensors Composables
useMouse
<script setup lang="ts">
import { useMouse } from '@vueuse/core';
const { x, y } = useMouse();
</script>
<template>
<div>Mouse: {{ x }}, {{ y }}</div>
</template>useScroll
<script setup lang="ts">
import { useScroll } from '@vueuse/core';
import { ref } from 'vue';
const el = ref<HTMLElement>();
const { x, y, isScrolling, arrivedState } = useScroll(el);
</script>
<template>
<div ref="el" style="height: 300px; overflow: auto;">
<div style="height: 1000px;">
<p>Scroll Y: {{ y }}</p>
<p>Is Scrolling: {{ isScrolling }}</p>
<p>At Top: {{ arrivedState.top }}</p>
<p>At Bottom: {{ arrivedState.bottom }}</p>
</div>
</div>
</template>6. Elements Composables
useIntersectionObserver
<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';
const target = ref<HTMLElement>();
const isVisible = ref(false);
useIntersectionObserver(target, ([{ isIntersecting }]) => {
isVisible.value = isIntersecting;
});
</script>
<template>
<div ref="target">
<p v-if="isVisible">I'm visible!</p>
</div>
</template>useElementSize
<script setup lang="ts">
import { useElementSize } from '@vueuse/core';
import { ref } from 'vue';
const el = ref<HTMLElement>();
const { width, height } = useElementSize(el);
</script>
<template>
<div ref="el">
Size: {{ width }} x {{ height }}
</div>
</template>7. Utilities
useDebounce
<script setup lang="ts">
import { ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';
const search = ref(');
const results = ref([]);
const debouncedSearch = useDebounceFn(async () => {
const response = await fetch(`/api/search?q=${search.value}`);
results.value = await response.json();
}, 500);
</script>
<template>
<input v-model="search" @input="debouncedSearch" />
<ul>
<li v-for="result in results" :key="result.id">{{ result.name }}</li>
</ul>
</template>useToggle
<script setup lang="ts">
import { useToggle } from '@vueuse/core';
const [isOpen, toggle] = useToggle();
</script>
<template>
<button @click="toggle()">Toggle</button>
<div v-if="isOpen">Content</div>
</template>8. 실전 예제: 다크 모드
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<template>
<button @click="toggleDark()">
{{ isDark ? '🌙' : '☀️' }}
</button>
</template>정리 및 체크리스트
핵심 요약
- VueUse: Vue Composables 컬렉션
- 200+ Composables: 다양한 유틸리티
- TypeScript: 완벽한 지원
- Tree-shakable: 필요한 것만
- SSR 친화적: Nuxt 호환
- 잘 테스트됨: 안정적
구현 체크리스트
- VueUse 설치
- State Composables 사용
- Browser Composables 사용
- Sensors Composables 사용
- Elements Composables 사용
- Utilities 활용
- 커스텀 Composable 작성
같이 보면 좋은 글
- Vue 3 Composition API 가이드
- Pinia 완벽 가이드
- Nuxt 3 완벽 가이드
이 글에서 다루는 키워드
VueUse, Vue 3, Composables, Hooks, Utilities, Frontend, TypeScript
자주 묻는 질문 (FAQ)
Q. React Hooks와 비슷한가요?
A. 네, 개념은 비슷하지만 Vue Composition API에 최적화되어 있습니다.
Q. Nuxt에서 사용할 수 있나요?
A. 네, Nuxt 3에서 완벽하게 작동합니다.
Q. 번들 크기는 어떤가요?
A. Tree-shakable이라 사용한 것만 포함됩니다.
Q. 프로덕션에서 사용해도 되나요?
A. 네, 많은 Vue 프로젝트에서 안정적으로 사용하고 있습니다.
심화 부록: 구현·운영 관점
이 부록은 앞선 본문에서 다룬 주제(「VueUse 완벽 가이드 | Vue Composables·유틸리티·Hooks·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.
내부 동작과 핵심 메커니즘
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(런타임·게이트웨이·프로세스) participant D as 의존성(API·DB·큐·파일) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
- 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
- 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.
프로덕션 운영 패턴
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.
확장 예시: 엔드투엔드 미니 시나리오
앞선 본문 주제(「VueUse 완벽 가이드 | Vue Composables·유틸리티·Hooks·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request)
authorize(validated, ctx)
result = domainCore(validated)
persistOrEmit(result, idempotentKey)
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정 불일치 | 프로필·시크릿·기본값, 리전 | 스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.