Nuxt 데이터 페칭
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
20 면접 질문·
Mid-Level
1Nuxt에서 useFetch와 useAsyncData의 주요 차이점은 무엇인가요?
1
Nuxt에서 useFetch와 useAsyncData의 주요 차이점은 무엇인가요?
답변
useFetch는 useAsyncData와 $fetch를 감싸는 래퍼로, 일반적인 API 호출을 단순화합니다. URL 구성을 자동으로 처리하며 첫 번째 인자로 URL을 직접 받을 수 있는 반면, useAsyncData는 고유 키와 커스텀 fetcher 함수가 필요합니다. 간단한 API 호출에는 useFetch를, 복잡한 페칭 로직에는 useAsyncData를 사용합니다.
2useAsyncData를 사용할 때 항상 고유한 키를 제공하는 것이 권장되는 이유는 무엇입니까?
2
useAsyncData를 사용할 때 항상 고유한 키를 제공하는 것이 권장되는 이유는 무엇입니까?
답변
고유한 키를 통해 Nuxt는 SSR 하이드레이션 중에 서버와 클라이언트 간의 요청을 식별하고 중복을 제거할 수 있습니다. 고유한 키가 없으면 서버 렌더링 후 클라이언트에서 데이터가 불필요하게 다시 fetch되거나 caching 충돌이 발생할 수 있습니다. 키는 caching과 state 관리에도 사용됩니다.
3Nuxt에서 $fetch와 useFetch의 차이점은 무엇입니까?
3
Nuxt에서 $fetch와 useFetch의 차이점은 무엇입니까?
답변
$fetch는 state 관리나 반응성 없이 단순한 HTTP 요청을 수행하는 유틸리티 함수로, 네이티브 fetch와 유사하지만 Nuxt의 향상된 기능을 갖추고 있습니다. useFetch는 반응형 ref(data, pending, error)를 반환하고 SSR 하이드레이션을 처리하는 composable입니다. event handler 내의 명령형 호출에는 $fetch를, 컴포넌트 내의 선언형 fetching에는 useFetch를 사용하십시오.
4
useFetch 또는 useAsyncData에서 lazy fetching을 활성화하려면 어떻게 해야 합니까?
5
useFetch로 데이터를 fetching하는 중에 발생하는 오류를 어떻게 처리합니까?
+17 면접 질문
기타 Vue.js / Nuxt.js 면접 주제
JavaScript 기초
Junior
20개 질문모던 JavaScript (ES6+)
Junior
20개 질문Vue 기초
Junior
22개 질문Vue 컴포넌트
Junior
20개 질문Vue Router
Junior
18개 질문Pinia State Management
Junior
20개 질문Vuex (Legacy)
Mid-Level
15개 질문Composition API
Mid-Level
24개 질문Vue 반응성
Mid-Level
20개 질문Nuxt 기초
Mid-Level
22개 질문Nuxt SSR 및 SSG
Mid-Level
22개 질문Nuxt 서버 라우트
Mid-Level
20개 질문Nuxt 모듈
Mid-Level
18개 질문Vue 컴포저블
Mid-Level
20개 질문Vue 폼과 유효성 검사
Mid-Level
20개 질문Nuxt 상태 관리
Mid-Level
18개 질문Vue 테스팅
Mid-Level
20개 질문Nuxt 배포 및 CI/CD
Mid-Level
22개 질문Vue 성능
Senior
22개 질문Vue 고급 패턴
Senior
24개 질문Vue와 함께 사용하는 TypeScript
Senior
22개 질문Nuxt 인증
Senior
20개 질문Nuxt에서의 SEO
Senior
20개 질문Nuxt 국제화
Senior
18개 질문Vue 아키텍처
Senior
22개 질문Nuxt 보안
Senior
20개 질문Vue 생태계
Senior
18개 질문Vue 2→3 및 Nuxt 2→3 마이그레이션
Senior
22개 질문