Vue.js에서 전역 로그 기능 구현하기: Composable과 플러그인 비교 분석 및 실전 예제

 

 

Vue.js 애플리케이션에서 특정 기능을 어디서든 쉽게 호출하고 싶을 때가 있습니다. 이번 글에서는 Vue.js에서 전역 로그 기능을 구현하는 방법을 Composable과 플러그인 두 가지 방식으로 비교 분석하고, 실제 예제를 통해 각 방법의 장단점을 살펴보겠습니다.

 

문제 정의

우리는 다음과 같은 기능을 가진 코드를 전역적으로 사용하고 싶습니다.

• 사용자 정의 메시지: 사용자가 원하는 메시지를 전달하여 로그를 남길 수 있습니다.
• 기본 메시지: 사용자가 메시지를 전달하지 않을 경우, 랜덤한 값을 가진 기본 메시지를 생성합니다.
• API 호출: 전달된 메시지를 서버의 /api/server_log 엔드포인트로 전송하고, 서버에서 반환된 메시지를 콘솔에 출력합니다.
• 오류 처리: API 호출 중 발생하는 오류를 적절히 처리합니다.

728x90

해결 방안: Composable과 플러그인

1. Composable (useGlobalLogger.ts) 활용 방법

Composable은 Vue Composition API를 활용하여 특정 기능을 추출하여 재사용 가능한 형태로 만든 함수입니다. Nuxt.js에서는 composables 폴더에 Composable을 정의하면 자동으로 인식하여 사용할 수 있습니다.

장점:

• 간결하고 직관적인 코드 작성 가능
• Vue Composition API에 익숙하다면 쉽게 이해하고 활용할 수 있음
• 재사용성이 높음

단점:

• Vue Composition API에 대한 이해가 필요함

코드 예시:

// composables/useGlobalLogger.ts
import { ref } from 'vue'

const retMessage = ref(null)
const inMessage = ref(``)

const consoleLog = async (customMsg?: string) => {
  inMessage.value = customMsg || `[ 기본 메시지 : ${Math.random()} ]`

  try {
    const response = await $fetch(`/api/server_log?message=${encodeURIComponent(inMessage.value)}`)
    retMessage.value = response.message
    console.log(retMessage.value)
  } catch (error) {
    console.error('데이터를 가져오는 중 오류 발생:', error)
  }
}

export const useGlobalLogger = () => {
  return {
    retMessage,
    inMessage,
    consoleLog
  }
}

사용 예시:

// components/MyComponent.vue
<script setup>
const { retMessage, inMessage, consoleLog } = useGlobalLogger()

consoleLog('Hello from MyComponent!')
</script>

<template>
  <div>
    <p>입력 메시지: {{ inMessage }}</p>
    <p>반환 메시지: {{ retMessage }}</p>
    <button @click="consoleLog()">로그 전송</button>
  </div>
</template>

 

2. 플러그인 방식 (plugins/globalLogger.ts)

플러그인은 애플리케이션 전반에 기능을 주입하는 방법입니다. Nuxt.js에서는 defineNuxtPlugin을 사용하여 플러그인을 정의하고, provide를 통해 전역적으로 접근 가능한 객체를 제공합니다.

장점:

• 어디서든 inject을 통해 간편하게 접근 가능
• 전역적인 설정을 필요로 하는 경우 유용

단점:

• inject 방식이 다소 번거로울 수 있음

코드 예시:

// plugins/globalLogger.ts
export default defineNuxtPlugin((nuxtApp) => {
  const retMessage = ref(null)
  const inMessage = ref(``)

  const consoleLog = async (customMsg?: string) => {
    // ... 위와 동일한 로직
  }

  nuxtApp.provide('globalLogger', { retMessage, inMessage, consoleLog })
})

사용 예시:

<script setup>
const globalLogger = inject('globalLogger')

globalLogger.consoleLog('Hello from MyComponent!')
</script>

<template>
  <div>
    <p>입력 메시지: {{ globalLogger.inMessage }}</p>
    <p>반환 메시지: {{ globalLogger.retMessage }}</p>
    <button @click="globalLogger.consoleLog()">로그 전송</button>
  </div>
</template>

 

어떤 방식을 선택해야 할까?

• Composable: 간편하고 재사용성이 높아 일반적인 경우에 적합합니다.
• 플러그인: 전역적인 설정이 필요하거나, 모든 컴포넌트에서 동일한 기능을 사용해야 할 경우 유용합니다.

결론:

두 가지 방식 모두 전역 로그 기능을 구현하는 데 효과적입니다. 프로젝트의 특성과 개발자의 선호도에 따라 적절한 방식을 선택하여 사용하면 됩니다.

추가 고려 사항:

• 타입스크립트: 타입스크립트를 사용한다면, 각 변수와 함수에 타입을 명시하여 코드의 안정성을 높일 수 있습니다.
• 테스트: 작성한 코드에 대한 단위 테스트를 수행하여 코드의 품질을 보장해야 합니다.
• 오류 처리: 예외 상황을 고려하여 에러 메시지를 명확하게 표시하고, 사용자에게 최대한 친화적인 경험을 제공해야 합니다.

 

참고: 위 예제는 Nuxt.js 환경을 기준으로 작성되었습니다. 다른 Vue.js 프로젝트에서는 약간의 수정이 필요할 수 있습니다.

주의:

• 본 글은 Vue.js의 기본적인 개념에 대한 이해를 전제로 작성되었습니다.
• 더욱 복잡한 로직이나 대규모 프로젝트에서는 더욱 심층적인 설계가 필요할 수 있습니다.

728x90

---

🔥 어떤 방식을 선택해야 할까?

방법	장점	단점
✅ Composable (useGlobalLogger)	간편하고 자동 인식, 재사용성 높음	Vue Composition API에 익숙해야 함
✅ 플러그인 (inject)	전역 주입 가능 ($globalLogger), 설정 후 편리	inject 방식이 번거로울 수 있음

📌 결론:

• 단순한 반복 사용을 위해서는 composables/useGlobalLogger.ts 방식이 더 좋습니다.
• 어디서든 $globalLogger로 접근해야 한다면 plugins/globalLogger.ts를 선택하세요.

어떤 방식이든 Nuxt에서는 쉽게 활용할 수 있으니, 원하는 방식으로 적용해보시면 됩니다! 🚀
추가로 궁금한 점 있으면 말씀 주세요. 😊