AI 프롬프트로 Vue 3 200% 활용하기

1. 역할 / 2. 맥락 / 3. 지시 / 4. 형식

ref와 reactive를 비교표로 정리해줘.
각 행: 사용 대상 / .value 필요 여부 / 깊은 반응성 /
주의점 / 추천 사용처. 코드 예시 5개 포함.

v-bind와 v-on의 다양한 형태를 정리해줘.
약식(:, @) / 객체 바인딩 / 동적 인자 v-bind:[key] /
수정자(.prevent .stop .self) / 코드 예시 + 언제 무엇을 쓰는지.

v-if와 v-show 차이 + v-for의 key 중요성을
잘못된 예 vs 올바른 예 코드 비교로 보여줘.
v-for와 v-if를 같은 요소에 쓰면 안 되는 이유도.

<script setup lang='ts'>로 props 타입 정의 +
기본값 + 검증 + emits 타입까지 포함한
Button 컴포넌트를 만들어줘. 사용 예시 포함.

Options API로 짠 카운터를 Composition API + <script setup>으로
리팩터링하는 단계를 보여줘. 각 변경 이유와 
this가 사라진 이유를 주석으로.

computed vs watch vs watchEffect 차이를
같은 데이터(검색어 → 결과)로 3가지 구현으로 비교해줘.
각각 실행 시점·캐싱·언제 쓰는지 표 포함.

Vue Router 4로 멀티 페이지 SPA를 설계해줘.
중첩 라우트 / 동적 파라미터 / 보호 라우트(인증) /
useRoute로 URL 파라미터 / 404 처리 + 스크롤 복원.

3가지 컴포넌트 통신 방식 정리:
부모 → 자식: props
자식 → 부모: emit
조부모 → 손자: provide/inject
각 코드 예시 + 언제 무엇을 쓰는지 결정 트리.

Pinia로 인증 + 장바구니 + 다크모드 3가지 스토어를 설계해줘.
각 스토어: setup style / persist plugin /
getters / actions / TypeScript 타입 추론. 모듈 분리 기준 포함.

Vue 3 성능 병목 5가지를 진단·해결하는 패턴을 정리해줘.
불필요 반응성(ref vs shallowRef) / 큰 리스트 / 무거운 계산 /
KeepAlive / 컴포넌트 lazy. 각각 코드 예시.

Vitest + Vue Test Utils로 컴포넌트 단위 테스트를 작성해줘.
props / emit / 사용자 인터랙션 / 비동기 / mock /
접근성 검사. TDD 흐름 + AAA 패턴.

<!-- ❌ 나쁜 프롬프트: 'Vue로 데이터 받아와줘' -->
<script setup>
import { ref, onMounted } from 'vue';
const data = ref(null);
onMounted(async () => { data.value = await fetch('/api').then(r => r.json()); });
</script>
<!-- 문제: 에러 무시, 로딩 모름, 취소 불가, 타입 없음 -->


<!-- ✅ 좋은 프롬프트: 모든 엣지 케이스 + 타입 + composable -->
<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue';

interface Post { id: number; title: string }

function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);
  const ctrl = new AbortController();

  onMounted(async () => {
    try {
      const res = await fetch(url, { signal: ctrl.signal });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      data.value = await res.json();
    } catch (e: any) {
      if (e.name !== 'AbortError') error.value = e.message;
    } finally {
      loading.value = false;
    }
  });
  onUnmounted(() => ctrl.abort());

  return { data, loading, error };
}

const { data: posts, loading, error } = useFetch<Post[]>('/api/posts');
</script>

<template>
  <div v-if='loading'>로딩...</div>
  <div v-else-if='error'>에러: {{ error }}</div>
  <ul v-else>
    <li v-for='p in posts' :key='p.id'>{{ p.title }}</li>
  </ul>
</template>

<!--
  📊 비교:
  | 항목         | ❌ 나쁜 | ✅ 좋은 |
  | 에러 처리     | 무시   | error.value + UI |
  | 로딩 상태     | 없음   | loading.value |
  | 요청 취소     | 불가   | AbortController + onUnmounted |
  | 타입 안전성   | any    | 제네릭 T |
  | 재사용       | 불가   | composable 분리 |
  → 프롬프트의 구체성이 코드 품질을 결정합니다!
-->