# 데이터 가져오기 및 API (React / Next.js)

> fetch API, axios, async/await, 에러 처리, 로딩 상태, abort controllers

- 20 면접 질문
- Mid-Level
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. fetch() 메서드는 호출되었을 때 무엇을 반환하나요?

**답변**

fetch()는 Response 객체로 해결되는 Promise를 반환합니다. axios와 달리 fetch는 HTTP 에러(404나 500 등)를 자동으로 거부하지 않으므로, 데이터를 파싱하기 전에 response.ok를 확인해야 합니다. 이 접근 방식은 에러 처리에 대한 더 많은 제어권을 제공하지만, 명시적인 상태 확인이 필요합니다.

## 2. fetch()로 얻은 Response 객체에서 JSON 데이터를 추출하는 방법은 무엇인가요?

**답변**

Response 객체에는 파싱된 데이터로 해결되는 Promise를 반환하는 json() 메서드가 있습니다. 이 메서드는 응답 본문을 점진적으로 읽기 때문에 비동기적입니다. 요청이 성공했는지 확인하기 위해 json()을 호출하기 전에 먼저 response.ok를 확인하는 것이 중요합니다.

## 3. Response 객체의 어떤 속성으로 HTTP 요청이 성공했는지 확인할 수 있나요?

**답변**

response.ok 속성은 HTTP 상태 코드가 200에서 299 사이일 때 true를 반환하며, 성공적인 응답을 나타냅니다. 이 속성은 axios와 달리 fetch()가 HTTP 에러를 자동으로 거부하지 않기 때문에 필수적입니다. 데이터를 처리하기 전에 response.ok를 확인하는 것은 에러 응답을 파싱하는 것을 방지하기 위한 모범 사례입니다.

## 17개 추가 질문 이용 가능

- async 함수 내에서 Promise의 해결을 동기적으로 기다릴 수 있게 하는 키워드는 무엇인가요?
- fetch() 사용 시 json(), then(), catch() 메서드는 어떤 순서로 호출해야 하나요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api