fetch API & JSON

핵심 개념

fetch()는 네트워크 요청을 보내고 Promise를 반환합니다. response.json()으로 JSON 파싱, response.text()로 텍스트 반환합니다. HTTP 에러(404, 500)는 catch가 아닌 response.ok로 확인해야 합니다. POST 요청은 method, headers, body 옵션을 설정합니다. fetch 호출을 지우며 데이터 통신이 차단되는 것을 확인하십시오.

코드 분석

JS📋 코드 (2줄)

FETCH DATA
  버튼을 눌러 데이터를 수신하십시오

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS 'fetch API & JSON' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'fetch API & JSON'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS 'fetch API & JSON' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'fetch API & JSON'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

fetch API & JSON는 이 3가지만 확실히 잡으세요

1.XMLHttpRequest만 쓰면 콜백 기반이라 코드가 장황하고, Promise 체인과 자연스럽게 연결되지 않습니다

2.fetch()는 Promise 기반 HTTP 요청이며, response.json()으로 응답을 파싱하고, async/await와 조합하면 깔끔합니다

3.다음 챕터에서 문자열 패턴 매칭의 강력한 도구인 정규표현식을 배웁니다

💬 이 챕터 질문 보기

JS · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)