🚀 Nuxt 4 마이그레이션 실습: 데이터 페칭 개선점 적용하기

Nuxt 팀은 버전 4에서 개발자 경험(DX)과 성능을 극대화하기 위해 몇 가지 중요한 변화를 도입했습니다. 특히, 데이터 페칭 방식의 내부 로직이 개선되어 더욱 안전하고 효율적인 코드를 작성할 수 있게 되었습니다.

이번 실습에서는 기존 Nuxt 3 프로젝트를 4로 업그레이드할 때 알아야 할 주요 변경점을 확인하고, 데이터 페칭의 개선된 패턴을 적용해 봅시다.

1. 📋 Nuxt 4 마이그레이션 체크리스트 (핵심)

Nuxt 3 프로젝트를 4로 업데이트하는 것은 비교적 간단합니다. 주로 종속성 업데이트와 새로운 컨벤션 적용이 핵심입니다.

변경점	Nuxt 4 이전 (Nuxt 3)	Nuxt 4 이후	영향
종속성 업데이트	npm install nuxt@3.x	npm install nuxt@latest (현재 4.x)	필수 업데이트
새 디렉토리 구조	(pages, components 등 루트에 위치)	app/ 폴더 도입 (점진적 적용)	DX 향상 (선택 사항)
데이터 페칭	다소 중복된 데이터 fetching	자동 캐싱/싱글턴 로직 강화	성능 향상 (주요 실습 대상)
TypeScript	다소 복잡한 모듈 타입 처리	더욱 정교하고 안정적인 타입	DX 향상

2. 💡 실습: 데이터 페칭 개선점 적용하기

Nuxt 4에서는 useFetch 및 useAsyncData의 내부 로직이 개선되어, 여러 컴포넌트나 API 호출에서 데이터를 공유하는 것이 더욱 효율적이고 안전해졌습니다.

2.1. 기존 Nuxt 3 코드 (복습)

이전에 만들었던 composables/useUsers.js를 다시 살펴봅시다. 우리는 데이터 공유를 위해 key를 명시적으로 지정했습니다.

// composables/useUsers.js (Nuxt 3 방식)

export const useUsers = () => {
  // 데이터 공유를 위해 'key'를 명시적으로 지정
  return useFetch('https://jsonplaceholder.typicode.com/users', { 
    key: 'all-users-list' // <<-- 이 부분이 중요했습니다.
  });
}

2.2. Nuxt 4 개선점 적용 (자동 싱글턴)

Nuxt 4는 컴포저블 내에서 useFetch나 useAsyncData를 사용할 때, 함수 자체의 시그니처를 기반으로 자동으로 고유한 키를 생성하고 데이터를 공유하려 시도합니다.

따라서, 컴포저블 내에서 호출하는 경우 명시적인 key 옵션 없이도 데이터 싱글턴(Singleton, 단일 인스턴스)이 작동합니다.

1. composables/useUsers.js 파일을 다음과 같이 수정합니다.

   // composables/useUsers.js (Nuxt 4 권장 방식)
   
   export const useUsers = () => {
     // 명시적인 key 옵션을 제거합니다.
     // Nuxt 4가 이 함수 호출을 자동으로 식별하고 데이터를 공유합니다.
     return useFetch('https://jsonplaceholder.typicode.com/users'); 
   }
   // 💡 참고: Nuxt의 컴포저블 내부에서 fetch를 호출할 때는 이제 key를 생략하는 것이 권장됩니다.
   

2. pages/users.vue 등 컴포저블을 사용하는 모든 페이지에서 코드를 변경할 필요가 없습니다.

   // pages/users.vue 스크립트 부분
   <script setup>
   // useUsers()는 내부적으로 개선된 Nuxt 4 로직을 사용합니다.
   const { data, pending, error } = useUsers(); 
   </script>
   

결과 강조: 코드는 더 간결해졌지만, 여러 컴포넌트에서 useUsers()를 호출해도 API 호출은 한 번만 이루어지며, 데이터는 자동으로 공유됩니다. 이는 Nuxt 4가 성능 최적화 로직을 개발자 대신 담당해주기 때문에 가능한 일입니다.

3. 🆕 기타 주요 DX 개선점

• app/ 디렉토리: Nuxt 4는 애플리케이션의 핵심 파일(예: App.vue, Error.vue, Layouts)을 app/ 디렉토리로 이동하는 것을 장려합니다. 이는 프로젝트 루트를 깔끔하게 유지하고 구성 요소의 목적을 명확히 합니다.
• 더 빠른 콜드 스타트: 개발 서버를 처음 시작할 때의 속도가 더욱 향상되어, 개발 워크플로우의 지연 시간이 줄었습니다.

---

📝 블로그 마무리: Nuxt 4와 개발 생산성

이번 실습을 통해 Nuxt 4의 핵심적인 변화인 데이터 페칭의 자동화를 적용했습니다. 코드는 간결해지고 성능은 향상되었습니다. Nuxt는 끊임없이 개발자 경험(DX)을 개선하여 프론트엔드 개발자가 로직에만 집중할 수 있도록 돕고 있습니다.