Nuxt - Utils

Nuxt - Utils는 반응형이나 상태와 무관하게 사용하는 함수들의 모음집입니다. Utils는 composable, plugin에 비해 간단하지만 정리하고 넘어가겠습니다.

Utils

Utils를 사용하는 방법에는 아래 두 가지 방식이 있습니다.

named export 사용하는 방법

// utils/index.ts
export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
	notation: 'compact',
	maximumFractionDigits: 1
});

Nuxt 3에서는 utils 디렉토리가 기본적으로 자동 임포트되지 않습니다. 따라서 명시적 import가 필요합니다.

formatNumber 유틸은 아래와 같이 임포트하여 사용 가능합니다.

// utils/index.ts에서 formatNumber 가져오기
import { formatNumber } from '~/utils/index';

const largeNumber = 1234567;
const formattedNumber = formatNumber(largeNumber);

console.log(formattedNumber); // "1.2M" (en-GB 표기법으로 축약)

default export 사용하는 방법

// utils/random-entry.ts 또는 utils/randomEntry.ts
// randomEntry()로 사용 가능합니다.
export default function (arr: Array<any>) {
  return arr[Math.floor(Math.random() * arr.length)]
}

import 하여 사용할 때는 유틸을 카멜 케이스로 import 할 수 있습니다.

// utils/random-entry.ts에서 randomEntry 가져오기
import randomEntry from '~/utils/random-entry';

const fruits = ['apple', 'banana', 'orange', 'strawberry'];
const randomFruit = randomEntry(fruits);

console.log(randomFruit); // 예: "banana" (배열에서 랜덤하게 선택된 항목)

utils와 composables는 유사한 성격을 가지지만 composables는 반응형 상태에 대한 비즈니스 로직, utils는 자주 사용하는 함수 같은 것들입니다.