Vue Composition API와 타입스크립트로 더 안전하고 재미있게 개발하기 🚀

콘텐츠 대표 이미지 - Vue Composition API와 타입스크립트로 더 안전하고 재미있게 개발하기 🚀

 

 

안녕, 개발자 친구! 🙌 오늘은 2025년 3월 4일, 프론트엔드 개발의 핫한 조합인 Vue Composition API와 타입스크립트에 대해 함께 알아볼 거야. 이 두 기술을 함께 사용하면 코드의 안정성과 개발 경험이 얼마나 향상되는지 직접 체험해보자!

🔍 Vue Composition API와 타입스크립트, 왜 함께 써야 할까?

프론트엔드 개발 세계는 정말 빠르게 변하고 있어. 2025년 현재, Vue 3는 이미 대세가 되었고 Composition API는 복잡한 컴포넌트 로직을 더 효율적으로 관리할 수 있는 강력한 방법으로 자리잡았어. 여기에 타입스크립트를 더하면? 그야말로 개발자의 천국이지! 😇

재능넷 같은 복잡한 서비스를 개발할 때도 이 조합은 정말 효과적이야. 다양한 재능을 거래하는 플랫폼에서는 여러 상태와 로직을 관리해야 하는데, Composition API와 타입스크립트의 조합은 이런 복잡성을 훨씬 쉽게 다룰 수 있게 해주거든.

🌟 이 글에서 배울 내용

  1. Vue Composition API의 기본 개념과 장점
  2. 타입스크립트와 Vue를 함께 사용하는 방법
  3. 실전 예제로 배우는 Composition API + 타입스크립트 활용법
  4. 2025년 최신 Vue 생태계에서의 개발 팁과 트릭
  5. 성능 최적화와 코드 구조화 전략
Vue + TS Composition API + TypeScript 더 안전하고 유지보수 가능한 Vue 앱 만들기

🧩 Vue Composition API 기초 이해하기

먼저 Composition API가 뭔지 간단히 알아보자. Composition API는 Vue 3에서 도입된 새로운 API 세트로, 컴포넌트의 로직을 더 유연하게 구성할 수 있게 해줘. Options API와 달리 함수 기반으로 코드를 작성하기 때문에 관련 로직을 한 곳에 모을 수 있어서 가독성과 재사용성이 크게 향상돼.

Options API vs Composition API 비교 🤔

Options API 방식

export default {
  data() {
    return {
      count: 0,
      name: 'Vue'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  mounted() {
    console.log('컴포넌트가 마운트되었습니다.')
  }
}

Composition API 방식

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 반응형 상태
    const count = ref(0)
    const name = ref('Vue')
    
    // 메서드
    function increment() {
      count.value++
    }
    
    // 계산된 속성
    const doubleCount = computed(() => count.value * 2)
    
    // 라이프사이클 훅
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다.')
    })
    
    // 템플릿에서 사용할 값과 함수 반환
    return {
      count,
      name,
      increment,
      doubleCount
    }
  }
}

Composition API의 가장 큰 장점은 관련 로직을 함께 그룹화할 수 있다는 거야. 예를 들어, 사용자 정보와 관련된 모든 상태, 메서드, 계산된 속성을 하나의 함수로 묶을 수 있지. 이렇게 하면 코드가 길어져도 관련 로직을 쉽게 찾을 수 있어서 유지보수가 훨씬 쉬워져. 😌

🔑 Composition API 핵심 개념

  1. setup 함수: 컴포넌트의 로직이 정의되는 곳
  2. 반응형 참조(ref, reactive): 반응형 상태를 만드는 함수들
  3. 생명주기 훅: onMounted, onUpdated 등 컴포넌트 생명주기에 연결
  4. computed, watch: 계산된 속성과 감시자
  5. provide/inject: 컴포넌트 간 데이터 전달

💡 2025년 트렌드 업데이트: 최근에는 setup 함수보다 <script setup> 구문을 더 많이 사용하는 추세야. 이 방식은 코드를 더 간결하게 만들고, 타입스크립트와의 통합도 더 자연스러워!

🔒 타입스크립트와 Vue: 안전한 개발의 시작

이제 타입스크립트를 Vue와 함께 사용하는 방법에 대해 알아보자. 타입스크립트는 자바스크립트에 타입 시스템을 추가한 언어로, 코드의 안정성과 개발 경험을 크게 향상시켜줘. 특히 대규모 프로젝트에서는 거의 필수적인 선택이 되고 있어. 🛡️

Vue 프로젝트에 타입스크립트 설정하기

2025년 현재, Vue CLI나 Vite를 사용하면 타입스크립트 설정이 정말 간단해졌어. 새 프로젝트를 시작할 때 타입스크립트 옵션을 선택하기만 하면 돼.

# Vite로 Vue + TypeScript 프로젝트 생성 (2025년 기준 가장 인기있는 방법)
npm create vite@latest my-vue-ts-app -- --template vue-ts

# 또는 Vue CLI 사용 (여전히 많이 사용됨)
npm create vue@latest my-vue-ts-app
# 그 후 TypeScript 옵션 선택

기존 프로젝트에 타입스크립트를 추가하는 것도 어렵지 않아. 필요한 패키지를 설치하고 tsconfig.json 파일을 설정하면 돼.

# 필요한 패키지 설치
npm install typescript @vue/cli-plugin-typescript

기본 tsconfig.json 예시

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Vue 컴포넌트에서 타입스크립트 사용하기

Vue 3와 타입스크립트의 통합은 이전 버전보다 훨씬 자연스러워졌어. 특히 Composition API는 타입스크립트와 함께 사용하기 위해 설계된 측면이 있어서, 타입 추론이 잘 작동해. 👍

Vue 컴포넌트에서 타입스크립트를 사용하는 가장 기본적인 방법은 <script lang="ts">를 사용하는 거야:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">카운트: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref('안녕하세요, TypeScript!')
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      message,
      count,
      increment
    }
  }
})
</script>

하지만 2025년 현재, 대부분의 개발자들은 더 간결한 <script setup lang="ts"> 구문을 선호해:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">카운트: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('안녕하세요, TypeScript!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

script setup 구문을 사용하면 코드가 더 간결해지고, 반환문 없이도 변수와 함수가 자동으로 템플릿에 노출돼. 또한 타입스크립트 통합도 더 자연스러워져서 개발 경험이 크게 향상돼. 😊

🔮 Composition API와 타입스크립트 함께 활용하기

이제 본격적으로 Composition API와 타입스크립트를 함께 사용하는 방법을 알아보자. 이 조합은 정말 강력해서, 코드의 안정성과 가독성을 동시에 높일 수 있어. 특히 큰 규모의 애플리케이션에서 그 진가를 발휘하지! 🚀

1. ref와 reactive에 타입 지정하기

Composition API의 반응형 API인 ref와 reactive에 타입을 지정하는 방법부터 알아보자:

import { ref, reactive } from 'vue'

// ref에 타입 지정
const count = ref<number>(0)
const name = ref<string>('Vue')
const isActive = ref<boolean>(true)

// 복잡한 타입의 ref
interface User {
  id: number
  name: string
  email: string
}

const user = ref<User | null>(null)

// reactive에 타입 지정
interface State {
  count: number
  users: User[]
  isLoading: boolean
}

const state = reactive<State>({
  count: 0,
  users: [],
  isLoading: false
})

타입을 명시적으로 지정하면 IDE에서 자동 완성과 타입 검사를 통해 개발 경험이 크게 향상돼. 예를 들어, user.value.를 입력하면 IDE가 id, name, email 속성을 자동으로 제안해줘. 😎

2. 컴포저블 함수(Composables) 만들기

Composition API의 가장 큰 장점 중 하나는 로직을 재사용 가능한 함수로 추출할 수 있다는 거야. 이런 함수를 '컴포저블'이라고 부르는데, 타입스크립트와 함께 사용하면 더욱 강력해져!

타입스크립트로 컴포저블 함수 만들기

// useCounter.ts
import { ref, Ref } from 'vue'

interface UseCounterOptions {
  initialValue?: number
  min?: number
  max?: number
}

interface UseCounterReturn {
  count: Ref<number>
  increment: () => void
  decrement: () => void
  reset: () => void
}

export function useCounter(options: UseCounterOptions = {}): UseCounterReturn {
  const { 
    initialValue = 0,
    min = -Infinity,
    max = Infinity
  } = options
  
  const count = ref(initialValue)
  
  function increment() {
    if (count.value < max) {
      count.value++
    }
  }
  
  function decrement() {
    if (count.value > min) {
      count.value--
    }
  }
  
  function reset() {
    count.value = initialValue
  }
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

이렇게 만든 컴포저블 함수는 다음과 같이 컴포넌트에서 사용할 수 있어:

<script setup lang="ts">
import { useCounter } from '@/composables/useCounter'

// 옵션과 함께 사용
const { count, increment, decrement, reset } = useCounter({
  initialValue: 10,
  min: 0,
  max: 20
})
</script>

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <button @click="increment">증가</button>
    <button @click="decrement">감소</button>
    <button @click="reset">리셋</button>
  </div>
</template>

이런 방식으로 로직을 분리하면 코드의 재사용성이 높아지고, 컴포넌트는 더 간결해져. 또한 타입스크립트 덕분에 함수의 인자와 반환값에 대한 타입 안전성도 보장돼. 👌

컴포저블 함수의 재사용성 User 컴포넌트 useUser() usePermission() Product 컴포넌트 useProduct() useCart() Cart 컴포넌트 useCart() useCheckout() useUser() usePermission() useProduct() useCart()

3. Props와 Emits에 타입 지정하기

컴포넌트 간 통신에서도 타입스크립트를 활용하면 더 안전한 코드를 작성할 수 있어. Props와 Emits에 타입을 지정하면 잘못된 데이터 전달을 방지할 수 있지. 🛡️

<script setup lang="ts">
// Props 정의
interface Props {
  title: string
  count?: number
  items: string[]
  user: {
    id: number
    name: string
  }
}

// withDefaults를 사용하여 기본값 설정
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => []
})

// Emits 정의
interface Emits {
  (e: 'update', id: number, value: string): void
  (e: 'delete', id: number): void
}

const emit = defineEmits<Emits>()

// 이벤트 발생 예시
function updateItem(id: number, newValue: string) {
  emit('update', id, newValue)
}

function deleteItem(id: number) {
  emit('delete', id)
}
</script>

이렇게 타입을 지정하면 잘못된 타입의 데이터를 전달하려고 할 때 컴파일 단계에서 오류를 발견할 수 있어. 또한 IDE에서 자동 완성 기능도 제공되기 때문에 개발 속도도 향상돼. 🚀

💡 2025년 팁: Vue 3.4부터는 Props와 Emits에 대한 타입 추론이 더욱 개선되었어. 특히 복잡한 객체 타입에 대한 지원이 강화되어 타입 안전성이 더 높아졌지!

🛠️ 실전 예제: 재능넷 스타일 컴포넌트 만들기

이제 실제로 Composition API와 타입스크립트를 활용한 실전 예제를 만들어보자. 재능넷과 같은 서비스에서 사용할 수 있는 재능 목록 컴포넌트를 구현해볼게. 🎨

1. 재능 목록 타입 정의하기

// types/talent.ts
export interface Talent {
  id: number
  title: string
  description: string
  price: number
  category: string
  seller: {
    id: number
    name: string
    rating: number
  }
  images: string[]
  tags: string[]
  createdAt: string
}

export interface TalentFilter {
  category?: string
  minPrice?: number
  maxPrice?: number
  searchQuery?: string
  sortBy?: 'price' | 'rating' | 'newest'
}

2. 재능 목록을 관리하는 컴포저블 함수 만들기

// composables/useTalents.ts
import { ref, computed, Ref } from 'vue'
import { Talent, TalentFilter } from '@/types/talent'

interface UseTalentsReturn {
  talents: Ref<Talent[]>
  filteredTalents: Ref<Talent[]>
  isLoading: Ref<boolean>
  error: Ref<string | null>
  filter: Ref<TalentFilter>
  setFilter: (newFilter: Partial<TalentFilter>) => void
  fetchTalents: () => Promise<void>
}

export function useTalents(): UseTalentsReturn {
  const talents = ref<Talent[]>([])
  const isLoading = ref(false)
  const error = ref<string | null>(null)
  const filter = ref<TalentFilter>({
    sortBy: 'newest'
  })

  // 필터링된 재능 목록
  const filteredTalents = computed(() => {
    let result = [...talents.value]
    
    // 카테고리 필터링
    if (filter.value.category) {
      result = result.filter(talent => 
        talent.category === filter.value.category
      )
    }
    
    // 가격 필터링
    if (filter.value.minPrice !== undefined) {
      result = result.filter(talent => 
        talent.price >= (filter.value.minPrice || 0)
      )
    }
    
    if (filter.value.maxPrice !== undefined) {
      result = result.filter(talent => 
        talent.price <= (filter.value.maxPrice || Infinity)
      )
    }
    
    // 검색어 필터링
    if (filter.value.searchQuery) {
      const query = filter.value.searchQuery.toLowerCase()
      result = result.filter(talent => 
        talent.title.toLowerCase().includes(query) ||
        talent.description.toLowerCase().includes(query) ||
        talent.tags.some(tag => tag.toLowerCase().includes(query))
      )
    }
    
    // 정렬
    switch (filter.value.sortBy) {
      case 'price':
        result.sort((a, b) => a.price - b.price)
        break
      case 'rating':
        result.sort((a, b) => b.seller.rating - a.seller.rating)
        break
      case 'newest':
      default:
        result.sort((a, b) => 
          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
        )
        break
    }
    
    return result
  })

  // 필터 설정 함수
  function setFilter(newFilter: Partial<TalentFilter>) {
    filter.value = { ...filter.value, ...newFilter }
  }

  // 재능 목록 가져오기
  async function fetchTalents() {
    isLoading.value = true
    error.value = null
    
    try {
      // 실제로는 API 호출을 여기서 수행
      // const response = await fetch('/api/talents')
      // talents.value = await response.json()
      
      // 예시 데이터
      setTimeout(() => {
        talents.value = [
          {
            id: 1,
            title: '전문적인 웹사이트 개발해 드립니다',
            description: 'Vue와 TypeScript를 활용한 고품질 웹사이트 개발',
            price: 500000,
            category: '개발',
            seller: {
              id: 101,
              name: '코딩마스터',
              rating: 4.9
            },
            images: ['image1.jpg', 'image2.jpg'],
            tags: ['웹개발', 'Vue', 'TypeScript'],
            createdAt: '2025-02-28T09:00:00Z'
          },
          {
            id: 2,
            title: '로고 디자인 제작해 드립니다',
            description: '브랜드 아이덴티티에 맞는 현대적인 로고 디자인',
            price: 300000,
            category: '디자인',
            seller: {
              id: 102,
              name: '디자인프로',
              rating: 4.8
            },
            images: ['logo1.jpg', 'logo2.jpg'],
            tags: ['로고', '브랜딩', '디자인'],
            createdAt: '2025-03-01T14:30:00Z'
          },
          {
            id: 3,
            title: '영어 번역 서비스 제공합니다',
            description: '전문적인 영한/한영 번역 서비스',
            price: 200000,
            category: '번역',
            seller: {
              id: 103,
              name: '번역전문가',
              rating: 4.7
            },
            images: ['translate.jpg'],
            tags: ['번역', '영어', '한국어'],
            createdAt: '2025-03-02T11:15:00Z'
          }
        ]
        isLoading.value = false
      }, 1000)
    } catch (err) {
      error.value = '재능 목록을 불러오는데 실패했습니다.'
      isLoading.value = false
    }
  }

  return {
    talents,
    filteredTalents,
    isLoading,
    error,
    filter,
    setFilter,
    fetchTalents
  }
}

3. 재능 목록 컴포넌트 구현하기

<template>
  <div class="talents-container">
    <div class="filter-section">
      <h3>필터</h3>
      
      <div class="filter-group">
        <label for="category">카테고리</label>
        <select 
          id="category" 
          v-model="filter.category"
          @change="updateFilter({ category: $event.target.value })"
        >
          <option value="">모든 카테고리</option>
          <option value="개발">개발</option>
          <option value="디자인">디자인</option>
          <option value="번역">번역</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label for="minPrice">최소 가격</label>
        <input 
          id="minPrice" 
          type="number" 
          v-model.number="minPriceInput"
          @input="updateMinPrice"
        >
      </div>
      
      <div class="filter-group">
        <label for="maxPrice">최대 가격</label>
        <input 
          id="maxPrice" 
          type="number" 
          v-model.number="maxPriceInput"
          @input="updateMaxPrice"
        >
      </div>
      
      <div class="filter-group">
        <label for="search">검색어</label>
        <input 
          id="search" 
          type="text" 
          v-model="searchQuery"
          @input="updateSearch"
        >
      </div>
      
      <div class="filter-group">
        <label for="sortBy">정렬</label>
        <select 
          id="sortBy" 
          v-model="sortByValue"
          @change="updateSort"
        >
          <option value="newest">최신순</option>
          <option value="price">가격순</option>
          <option value="rating">평점순</option>
        </select>
      </div>
    </div>
    
    <div class="talents-list">
      <div v-if="isLoading" class="loading">
        재능 목록을 불러오는 중...
      </div>
      
      <div v-else-if="error" class="error">
        {{ error }}
      </div>
      
      <div v-else-if="filteredTalents.length === 0" class="no-results">
        검색 결과가 없습니다.
      </div>
      
      <div v-else class="talents-grid">
        <talent-card 
          v-for="talent in filteredTalents" 
          :key="talent.id"
          :talent="talent"
          @view-details="viewTalentDetails"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useTalents } from '@/composables/useTalents'
import TalentCard from '@/components/TalentCard.vue'
import { Talent, TalentFilter } from '@/types/talent'

// 재능 목록 컴포저블 사용
const { 
  filteredTalents, 
  isLoading, 
  error, 
  filter, 
  setFilter, 
  fetchTalents 
} = useTalents()

// 입력 필드를 위한 로컬 상태
const minPriceInput = ref<number | null>(null)
const maxPriceInput = ref<number | null>(null)
const searchQuery = ref('')
const sortByValue = ref<'newest' | 'price' | 'rating'>('newest')

// 필터 업데이트 함수들
function updateFilter(newFilter: Partial<TalentFilter>) {
  setFilter(newFilter)
}

function updateMinPrice() {
  setFilter({ minPrice: minPriceInput.value || undefined })
}

function updateMaxPrice() {
  setFilter({ maxPrice: maxPriceInput.value || undefined })
}

function updateSearch() {
  setFilter({ searchQuery: searchQuery.value || undefined })
}

function updateSort() {
  setFilter({ sortBy: sortByValue.value })
}

// 재능 상세 보기
function viewTalentDetails(talent: Talent) {
  console.log('재능 상세 보기:', talent)
  // 실제로는 라우터를 통해 상세 페이지로 이동
  // router.push(`/talents/${talent.id}`)
}

// 컴포넌트 마운트 시 재능 목록 가져오기
onMounted(() => {
  fetchTalents()
})

// 필터 상태가 변경될 때 로컬 상태 업데이트
watch(() => filter.value, (newFilter) => {
  minPriceInput.value = newFilter.minPrice || null
  maxPriceInput.value = newFilter.maxPrice || null
  searchQuery.value = newFilter.searchQuery || ''
  sortByValue.value = newFilter.sortBy || 'newest'
}, { immediate: true })
</script>

4. 재능 카드 컴포넌트 구현하기

<template>
  <div class="talent-card" @click="$emit('view-details', talent)">
    <div class="talent-image" v-if="talent.images.length > 0">
      <img :src="talent.images[0]" :alt="talent.title">
    </div>
    
    <div class="talent-content">
      <h3 class="talent-title">{{ talent.title }}</h3>
      <p class="talent-description">{{ truncatedDescription }}</p>
      
      <div class="talent-meta">
        <span class="talent-price">{{ formattedPrice }}</span>
        <span class="talent-category">{{ talent.category }}</span>
      </div>
      
      <div class="talent-seller">
        <span class="seller-name">{{ talent.seller.name }}</span>
        <span class="seller-rating">⭐ {{ talent.seller.rating }}</span>
      </div>
      
      <div class="talent-tags">
        <span 
          v-for="(tag, index) in talent.tags" 
          :key="index"
          class="talent-tag"
        >
          #{{ tag }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Talent } from '@/types/talent'

// Props 정의
interface Props {
  talent: Talent
}

const props = defineProps<Props>()

// Emits 정의
defineEmits<{
  (e: 'view-details', talent: Talent): void
}>()

// 설명 텍스트 자르기
const truncatedDescription = computed(() => {
  if (props.talent.description.length > 100) {
    return props.talent.description.substring(0, 97) + '...'
  }
  return props.talent.description
})

// 가격 포맷팅
const formattedPrice = computed(() => {
  return new Intl.NumberFormat('ko-KR', {
    style: 'currency',
    currency: 'KRW'
  }).format(props.talent.price)
})
</script>

이렇게 Composition API와 타입스크립트를 함께 사용하면 코드의 가독성과 안정성이 크게 향상돼. 특히 재능넷과 같은 복잡한 서비스를 개발할 때 이런 접근 방식은 유지보수를 훨씬 쉽게 만들어줘. 🎯

💡 실무 팁: 실제 프로젝트에서는 위 예제를 더 작은 컴포넌트로 분리하고, API 호출 로직을 별도의 서비스 레이어로 분리하는 것이 좋아. 이렇게 하면 코드의 재사용성과 테스트 용이성이 더 높아져!

🚀 고급 패턴과 최적화 기법

이제 Composition API와 타입스크립트를 더 효과적으로 활용할 수 있는 고급 패턴과 최적화 기법에 대해 알아보자. 2025년 현재, Vue 생태계에서는 이런 고급 패턴들이 표준처럼 자리 잡고 있어. 🧠

1. 제네릭을 활용한 재사용 가능한 컴포저블

타입스크립트의 제네릭을 활용하면 더 유연하고 재사용 가능한 컴포저블을 만들 수 있어:

// useApi.ts
import { ref, Ref } from 'vue'

interface UseApiOptions<T> {
  initialData?: T
  immediate?: boolean
  onSuccess?: (data: T) => void
  onError?: (error: Error) => void
}

interface UseApiReturn<T> {
  data: Ref<T | null>
  isLoading: Ref<boolean>
  error: Ref<Error | null>
  execute: () => Promise<T>
  reset: () => void
}

export function useApi<T>(
  apiCall: () => Promise<T>,
  options: UseApiOptions<T> = {}
): UseApiReturn<T> {
  const {
    initialData = null,
    immediate = false,
    onSuccess,
    onError
  } = options
  
  const data = ref<T | null>(initialData) as Ref<T | null>
  const isLoading = ref(false)
  const error = ref<Error | null>(null)
  
  async function execute(): Promise<T> {
    isLoading.value = true
    error.value = null
    
    try {
      const result = await apiCall()
      data.value = result
      
      if (onSuccess) {
        onSuccess(result)
      }
      
      return result
    } catch (err) {
      const errorObj = err instanceof Error ? err : new Error(String(err))
      error.value = errorObj
      
      if (onError) {
        onError(errorObj)
      }
      
      throw errorObj
    } finally {
      isLoading.value = false
    }
  }
  
  function reset() {
    data.value = initialData
    error.value = null
    isLoading.value = false
  }
  
  // 즉시 실행 옵션이 있으면 마운트 시 실행
  if (immediate) {
    execute()
  }
  
  return {
    data,
    isLoading,
    error,
    execute,
    reset
  }
}

이 컴포저블은 다음과 같이 사용할 수 있어:

<script setup lang="ts">
import { useApi } from '@/composables/useApi'
import { Talent } from '@/types/talent'

// 재능 목록 가져오기
const getTalents = () => fetch('/api/talents').then(res => res.json())
const { 
  data: talents, 
  isLoading, 
  error, 
  execute: fetchTalents 
} = useApi<Talent[]>(getTalents, {
  initialData: [],
  immediate: true,
  onSuccess: (data) => console.log(`${data.length}개의 재능을 불러왔습니다.`)
})

// 특정 재능 상세 정보 가져오기
const getTalentDetails = (id: number) => 
  fetch(`/api/talents/${id}`).then(res => res.json())

const talentId = 123
const { 
  data: talentDetails, 
  isLoading: isLoadingDetails 
} = useApi<Talent>(() => getTalentDetails(talentId), {
  immediate: true
})
</script>

제네릭을 활용하면 다양한 타입의 API 호출에 같은 컴포저블을 재사용할 수 있어. 이는 코드 중복을 줄이고 일관된 에러 처리와 로딩 상태 관리를 가능하게 해주지. 👌

2. 상태 관리 패턴

큰 규모의 애플리케이션에서는 상태 관리가 중요해. Composition API와 타입스크립트를 활용한 간단한 상태 관리 패턴을 구현해보자:

// store/useUserStore.ts
import { reactive, readonly, provide, inject, InjectionKey } from 'vue'

interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

interface UserState {
  currentUser: User | null
  isAuthenticated: boolean
  token: string | null
}

interface UserStore {
  state: UserState
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  updateProfile: (userData: Partial<User>) => Promise<void>
}

// 초기 상태
const initialState: UserState = {
  currentUser: null,
  isAuthenticated: false,
  token: null
}

// 스토어 생성 함수
function createUserStore(): UserStore {
  // 내부 상태 (변경 가능)
  const state = reactive<UserState>({...initialState})
  
  // 액션
  async function login(email: string, password: string) {
    try {
      // 실제로는 API 호출
      // const response = await fetch('/api/login', {...})
      
      // 예시 응답
      const userData: User = {
        id: 1,
        name: '홍길동',
        email: email,
        role: 'user'
      }
      
      const token = 'example-jwt-token'
      
      // 상태 업데이트
      state.currentUser = userData
      state.isAuthenticated = true
      state.token = token
      
      // 토큰 저장
      localStorage.setItem('auth_token', token)
    } catch (error) {
      console.error('로그인 실패:', error)
      throw error
    }
  }
  
  function logout() {
    // 상태 초기화
    state.currentUser = null
    state.isAuthenticated = false
    state.token = null
    
    // 토큰 제거
    localStorage.removeItem('auth_token')
  }
  
  async function updateProfile(userData: Partial<User>) {
    if (!state.currentUser) {
      throw new Error('사용자가 로그인되어 있지 않습니다.')
    }
    
    try {
      // 실제로는 API 호출
      // const response = await fetch(`/api/users/${state.currentUser.id}`, {...})
      
      // 상태 업데이트
      state.currentUser = {
        ...state.currentUser,
        ...userData
      }
    } catch (error) {
      console.error('프로필 업데이트 실패:', error)
      throw error
    }
  }
  
  return {
    state: readonly(state) as UserState, // 읽기 전용으로 노출
    login,
    logout,
    updateProfile
  }
}

// 의존성 주입을 위한 키
const UserStoreKey: InjectionKey<UserStore> = Symbol('UserStore')

// Provider 컴포저블
export function provideUserStore() {
  const store = createUserStore()
  provide(UserStoreKey, store)
  return store
}

// Consumer 컴포저블
export function useUserStore(): UserStore {
  const store = inject(UserStoreKey)
  if (!store) {
    throw new Error('useUserStore는 provideUserStore 내에서 호출되어야 합니다.')
  }
  return store
}

이 패턴을 사용하면 다음과 같이 애플리케이션 전체에서 일관된 상태 관리가 가능해:

// App.vue
<script setup lang="ts">
import { provideUserStore } from '@/store/useUserStore'

// 앱 루트에서 스토어 제공
provideUserStore()
</script>

// LoginForm.vue
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/store/useUserStore'

const email = ref('')
const password = ref('')
const isLoading = ref(false)
const error = ref('')

const userStore = useUserStore()

async function handleLogin() {
  if (!email.value || !password.value) {
    error.value = '이메일과 비밀번호를 입력해주세요.'
    return
  }
  
  isLoading.value = true
  error.value = ''
  
  try {
    await userStore.login(email.value, password.value)
    // 로그인 성공 후 처리
  } catch (err) {
    error.value = '로그인에 실패했습니다. 다시 시도해주세요.'
  } finally {
    isLoading.value = false
  }
}
</script>

// UserProfile.vue
<script setup lang="ts">
import { useUserStore } from '@/store/useUserStore'

const userStore = useUserStore()
const { currentUser, isAuthenticated } = userStore.state
</script>

<template>
  <div v-if="isAuthenticated && currentUser">
    <h2>{{ currentUser.name }}님의 프로필</h2>
    <p>이메일: {{ currentUser.email }}</p>
    <button @click="userStore.logout">로그아웃</button>
  </div>
  <div v-else>
    로그인이 필요합니다.
  </div>
</template>

이 패턴은 Pinia나 Vuex 같은 상태 관리 라이브러리 없이도 간단한 상태 관리를 구현할 수 있게 해줘. 물론 더 복잡한 애플리케이션에서는 Pinia를 사용하는 것이 좋을 수 있어. 2025년 현재, Pinia는 Vue의 공식 상태 관리 라이브러리로 자리 잡았고, 타입스크립트와의 통합도 매우 우수해. 🏆

3. 성능 최적화 기법

Composition API와 타입스크립트를 사용할 때 적용할 수 있는 몇 가지 성능 최적화 기법을 알아보자:

  1. 메모이제이션 활용하기 
    import { ref, computed } from 'vue'

const items = ref([...]) // 큰 배열
const searchQuery = ref('')

// 필터링 로직이 복잡한 경우 computed 사용
const filteredItems = computed(() => {
  console.log('필터링 계산 실행')
  return items.value.filter(item => 
    item.name.includes(searchQuery.value)
  )
})
  2. 불필요한 반응성 피하기 
    import { ref, reactive, shallowRef } from 'vue'

// 변경이 자주 발생하는 큰 객체의 경우
// 깊은 반응성이 필요하지 않다면 shallowRef 사용
const bigData = shallowRef({ /* 큰 데이터 객체 */ })

// 반응성이 필요하지 않은 상수는 ref/reactive 사용 안 함
const FIXED_CONFIG = { /* 변경되지 않는 설정 */ }
  3. 컴포넌트 지연 로딩 
    // 라우터에서 지연 로딩 사용
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

// 또는 컴포넌트 내에서
import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)

성능 최적화는 실제 성능 문제가 발생했을 때 적용하는 것이 좋아. 조기 최적화는 코드를 복잡하게 만들 수 있으니, 실제 측정을 통해 병목 지점을 찾은 후에 최적화를 적용하는 것이 현명해. 📊

Vue 애플리케이션 성능 최적화 느림 보통 빠름 메모이제이션 지연 로딩 불필요한 반응성 제거 최적화된 애플리케이션

💎 2025년 Vue + TypeScript 베스트 프랙티스

마지막으로, 2025년 현재 Vue와 타입스크립트를 함께 사용할 때 알아두면 좋은 베스트 프랙티스를 정리해보자. 이런 패턴들은 재능넷과 같은 대규모 서비스를 개발할 때 특히 유용해! 🌟

  1. script setup 구문 사용하기

    2025년 현재, <script setup> 구문은 Vue 컴포넌트를 작성하는 표준이 되었어. 이 구문은 코드를 더 간결하게 만들고, 타입스크립트와의 통합도 더 자연스러워.

  2. 타입 정의 파일 분리하기

    복잡한 타입은 별도의 types.ts 파일로 분리하여 관리하는 것이 좋아. 이렇게 하면 여러 컴포넌트에서 동일한 타입을 재사용할 수 있고, 코드의 일관성을 유지할 수 있어.

  3. 컴포저블 함수 활용하기

    반복되는 로직은 컴포저블 함수로 추출하여 재사용하자. 이는 코드 중복을 줄이고, 테스트 용이성을 높여줘.

  4. 타입 추론 활용하기

    가능한 경우 명시적 타입 선언보다 타입스크립트의 추론 기능을 활용하는 것이 좋아. 이는 코드를 더 간결하게 만들고, 리팩토링 시 유연성을 제공해.

  5. 엄격한 타입 검사 활성화하기

    tsconfig.json에서 strict: true를 설정하여 더 엄격한 타입 검사를 활성화하자. 이는 런타임 오류를 줄이는 데 도움이 돼.

  6. API 응답에 대한 타입 정의하기

    백엔드 API 응답에 대한 타입을 명확하게 정의하면, 프론트엔드와 백엔드 간의 계약을 명확히 할 수 있어. 이는 특히 팀 프로젝트에서 중요해.

  7. Vue의 타입 유틸리티 활용하기

    Vue는 PropType, ComponentPublicInstance 등 유용한 타입 유틸리티를 제공해. 이를 활용하면 더 정확한 타입 정의가 가능해.

  8. ESLint와 TypeScript 통합하기

    ESLint와 TypeScript를 통합하여 코드 품질과 일관성을 유지하자. @typescript-eslint 플러그인을 사용하면 타입스크립트 관련 린트 규칙을 적용할 수 있어.

  9. 테스트 작성 시 타입 활용하기

    테스트 코드에서도 타입스크립트를 활용하면 테스트의 정확성을 높일 수 있어. Vitest나 Jest와 같은 테스트 프레임워크는 타입스크립트와 잘 통합돼.

  10. 점진적 타입 적용하기

    기존 JavaScript 프로젝트를 TypeScript로 마이그레이션할 때는 점진적으로 타입을 적용하는 것이 좋아. any 타입으로 시작하여 점차 구체적인 타입으로 개선해나가자.

"Vue Composition API와 TypeScript의 조합은 단순히 두 기술을 함께 사용하는 것 이상의 가치를 제공합니다. 이 조합은 코드의 안정성, 가독성, 유지보수성을 크게 향상시키며, 개발자 경험을 한 단계 높여줍니다."

- Vue 커뮤니티 의견, 2025

🎬 마무리: 함께 성장하는 Vue와 TypeScript

지금까지 Vue Composition API와 타입스크립트를 함께 활용하는 방법에 대해 알아봤어. 이 두 기술의 조합은 2025년 현재 프론트엔드 개발의 강력한 도구로 자리 잡았어. 특히 재능넷과 같은 복잡한 서비스를 개발할 때 이 조합은 코드의 안정성과 유지보수성을 크게 향상시켜주지. 🚀

Vue 3와 타입스크립트는 계속해서 발전하고 있어. Vue의 반응성 시스템과 타입스크립트의 타입 시스템이 더욱 긴밀하게 통합되면서, 개발자 경험은 더욱 향상되고 있지. 앞으로도 이 생태계는 더욱 성장할 것으로 기대돼. 😊

이 글이 Vue Composition API와 타입스크립트를 함께 사용하는 데 도움이 되었길 바라. 더 많은 개발 지식과 팁이 필요하다면 재능넷의 '지식인의 숲' 메뉴를 계속 방문해주길 바라! 함께 성장하는 개발자 커뮤니티가 되었으면 좋겠어. 👋

Vue와 TypeScript로 더 안전하고 유지보수 가능한 코드를 작성해보세요! 🚀

🔍 Vue Composition API와 타입스크립트, 왜 함께 써야 할까?

프론트엔드 개발 세계는 정말 빠르게 변하고 있어. 2025년 현재, Vue 3는 이미 대세가 되었고 Composition API는 복잡한 컴포넌트 로직을 더 효율적으로 관리할 수 있는 강력한 방법으로 자리잡았어. 여기에 타입스크립트를 더하면? 그야말로 개발자의 천국이지! 😇

재능넷 같은 복잡한 서비스를 개발할 때도 이 조합은 정말 효과적이야. 다양한 재능을 거래하는 플랫폼에서는 여러 상태와 로직을 관리해야 하는데, Composition API와 타입스크립트의 조합은 이런 복잡성을 훨씬 쉽게 다룰 수 있게 해주거든.

🌟 이 글에서 배울 내용

  1. Vue Composition API의 기본 개념과 장점
  2. 타입스크립트와 Vue를 함께 사용하는 방법
  3. 실전 예제로 배우는 Composition API + 타입스크립트 활용법
  4. 2025년 최신 Vue 생태계에서의 개발 팁과 트릭
  5. 성능 최적화와 코드 구조화 전략
Vue + TS Composition API + TypeScript 더 안전하고 유지보수 가능한 Vue 앱 만들기

🧩 Vue Composition API 기초 이해하기

먼저 Composition API가 뭔지 간단히 알아보자. Composition API는 Vue 3에서 도입된 새로운 API 세트로, 컴포넌트의 로직을 더 유연하게 구성할 수 있게 해줘. Options API와 달리 함수 기반으로 코드를 작성하기 때문에 관련 로직을 한 곳에 모을 수 있어서 가독성과 재사용성이 크게 향상돼.

Options API vs Composition API 비교 🤔

Options API 방식

export default {
  data() {
    return {
      count: 0,
      name: 'Vue'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  mounted() {
    console.log('컴포넌트가 마운트되었습니다.')
  }
}

Composition API 방식

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 반응형 상태
    const count = ref(0)
    const name = ref('Vue')
    
    // 메서드
    function increment() {
      count.value++
    }
    
    // 계산된 속성
    const doubleCount = computed(() => count.value * 2)
    
    // 라이프사이클 훅
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다.')
    })
    
    // 템플릿에서 사용할 값과 함수 반환
    return {
      count,
      name,
      increment,
      doubleCount
    }
  }
}

Composition API의 가장 큰 장점은 관련 로직을 함께 그룹화할 수 있다는 거야. 예를 들어, 사용자 정보와 관련된 모든 상태, 메서드, 계산된 속성을 하나의 함수로 묶을 수 있지. 이렇게 하면 코드가 길어져도 관련 로직을 쉽게 찾을 수 있어서 유지보수가 훨씬 쉬워져. 😌

🔑 Composition API 핵심 개념

  1. setup 함수: 컴포넌트의 로직이 정의되는 곳
  2. 반응형 참조(ref, reactive): 반응형 상태를 만드는 함수들
  3. 생명주기 훅: onMounted, onUpdated 등 컴포넌트 생명주기에 연결
  4. computed, watch: 계산된 속성과 감시자
  5. provide/inject: 컴포넌트 간 데이터 전달

💡 2025년 트렌드 업데이트: 최근에는 setup 함수보다 <script setup> 구문을 더 많이 사용하는 추세야. 이 방식은 코드를 더 간결하게 만들고, 타입스크립트와의 통합도 더 자연스러워!

🔒 타입스크립트와 Vue: 안전한 개발의 시작

이제 타입스크립트를 Vue와 함께 사용하는 방법에 대해 알아보자. 타입스크립트는 자바스크립트에 타입 시스템을 추가한 언어로, 코드의 안정성과 개발 경험을 크게 향상시켜줘. 특히 대규모 프로젝트에서는 거의 필수적인 선택이 되고 있어. 🛡️

Vue 프로젝트에 타입스크립트 설정하기

2025년 현재, Vue CLI나 Vite를 사용하면 타입스크립트 설정이 정말 간단해졌어. 새 프로젝트를 시작할 때 타입스크립트 옵션을 선택하기만 하면 돼.

# Vite로 Vue + TypeScript 프로젝트 생성 (2025년 기준 가장 인기있는 방법)
npm create vite@latest my-vue-ts-app -- --template vue-ts

# 또는 Vue CLI 사용 (여전히 많이 사용됨)
npm create vue@latest my-vue-ts-app
# 그 후 TypeScript 옵션 선택

기존 프로젝트에 타입스크립트를 추가하는 것도 어렵지 않아. 필요한 패키지를 설치하고 tsconfig.json 파일을 설정하면 돼.

# 필요한 패키지 설치
npm install typescript @vue/cli-plugin-typescript

기본 tsconfig.json 예시

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Vue 컴포넌트에서 타입스크립트 사용하기

Vue 3와 타입스크립트의 통합은 이전 버전보다 훨씬 자연스러워졌어. 특히 Composition API는 타입스크립트와 함께 사용하기 위해 설계된 측면이 있어서, 타입 추론이 잘 작동해. 👍

Vue 컴포넌트에서 타입스크립트를 사용하는 가장 기본적인 방법은 <script lang="ts">를 사용하는 거야:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">카운트: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref('안녕하세요, TypeScript!')
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      message,
      count,
      increment
    }
  }
})
</script>

하지만 2025년 현재, 대부분의 개발자들은 더 간결한 <script setup lang="ts"> 구문을 선호해:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">카운트: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('안녕하세요, TypeScript!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

script setup 구문을 사용하면 코드가 더 간결해지고, 반환문 없이도 변수와 함수가 자동으로 템플릿에 노출돼. 또한 타입스크립트 통합도 더 자연스러워져서 개발 경험이 크게 향상돼. 😊

관련 키워드

Vue Composition API 타입스크립트 Vue 3 프론트엔드 개발 컴포저블 함수 반응형 프로그래밍 타입 안전성 스크립트 셋업 컴포넌트 개발 상태 관리