Fetch API를 사용해서 실제 HTTP 요청 후 데이터를 화면에 출력하는 예제

1️⃣ HTML 구조

<button id="fetch-btn">1번 게시글 데이터 요청 후 게시글의 제목 화면에 출력</button>
<div>1번 게시글 제목: <span id="post-title"></span></div>

• 버튼 클릭 시 요청 실행
• <span id="post-title"> 안에 1번 게시글 제목을 표시

---

2️⃣ 버튼 클릭 이벤트

document.querySelector('#fetch-btn').addEventListener('click', () => {

• 버튼 클릭 시 실행되는 이벤트 등록

---

3️⃣ Fetch API 호출

fetch("https://jsonplaceholder.typicode.com/posts/1")

• Fetch API를 사용하여 URL에 GET 요청
• fetch()는 Promise 객체를 반환
• 즉, 비동기 요청 → 성공(resolve) / 실패(reject) 처리 가능

---

4️⃣ 첫 번째 .then()

.then((response) => response.json())

• fetch()의 반환 값은 Response 객체
• response.json() → Response 안의 JSON 데이터를 JS 객체로 변환
• response.json()도 Promise를 반환하기 때문에 다음 .then()으로 이어질 수 있음

---

5️⃣ 두 번째 .then()

.then((jsonData) => document.querySelector("#post-title").innerText = jsonData.title);

• JSON 객체를 받아서
• 1번 게시글의 title 속성을 가져와 화면에 출력

---

6️⃣ 실행 순서 요약

1. 버튼 클릭 → 이벤트 발생
2. fetch() 실행 → Promise 반환
3. 서버 요청 → Response 객체 받음
4. response.json() → 문자열(JSON) → JS 객체 변환 (또 Promise)
5. 변환된 JSON 객체에서 title 추출 → 화면에 출력

---

🔹 특징

• XMLHttpRequest + Promise 방식보다 코드가 훨씬 간결
• .then() 체이닝으로 순차적 처리 가능
• async/await와 함께 쓰면 더 동기 코드처럼 깔끔하게 작성 가능

---

원하면 내가 XHR + Fetch 비교표 만들어서

• 코드 구조, 간결함, 사용 편의성 차이까지 한눈에 보여줄 수 있어요.
  그거 보고 싶어요?