1️⃣ HTML 구조

<button id="xhr-promise-btn">게시글 데이터 요청 후 게시글 총 수 화면에 출력</button>
<div>게시글 수: <span id="post-count">0</span></div>

• 버튼 클릭 시 게시글 데이터를 요청하고
• <span id="post-count"> 안에 게시글 총 수를 표시하는 구조.

---

2️⃣ 버튼 클릭 이벤트

document.querySelector('#xhr-promise-btn').addEventListener("click", () => {
  fetchDataXML()
    .then((responseText) => JSON.parse(responseText))
    .then((jsonData) => document.querySelector("#post-count").innerText = jsonData.lentgh )
    .catch((status) => console.log('데이터 요청 실패', status) )
})

흐름 설명

1. 버튼 클릭 → fetchDataXML() 호출

   • 이 함수는 Promise 객체를 반환

2. .then((responseText) => JSON.parse(responseText))

   • 서버에서 받은 문자열(JSON)을 객체로 변환

3. .then((jsonData) => … )

   • 실제 데이터 처리: 게시글 수를 화면에 출력

4. .catch(...)

   • 요청 실패 시 에러 처리

---

3️⃣ fetchDataXML() 함수

function fetchDataXML() {
  return new Promise((resolve, reject) => {
    const xml = new XMLHttpRequest();
    xml.open("GET", 'https://jsonplaceholder.typicode.com/posts');
    xml.addEventListener('load',() => {
      if(xml.status === 200){
        resolve(xml.reposeText);
      }else {
        reject(xml.status)
      }
    })
    xml.send();
  })
}

분석

1. new Promise((resolve, reject) => {...})

   • Promise 객체 생성
   • 성공하면 resolve(data)
   • 실패하면 reject(status) 호출

2. XMLHttpRequest 객체 생성

const xml = new XMLHttpRequest();
xml.open("GET", 'https://jsonplaceholder.typicode.com/posts');

• GET 요청 준비 (jsonplaceholder에서 샘플 게시글 요청)

3. load 이벤트

xml.addEventListener('load', () => {
  if(xml.status === 200){
    resolve(xml.reposeText);  // <- 여기 오타 있음 (reposeText → responseText)
  } else {
    reject(xml.status)
  }
})

• 요청이 완료되면 실행
• HTTP 상태 코드가 200이면 성공 → resolve 호출
• 그렇지 않으면 실패 → reject 호출

4. xml.send()

• 요청 전송

---

4️⃣ 전체 흐름 요약

1. 버튼 클릭 → fetchDataXML() 호출 → Promise 반환
2. 비동기 요청 완료 후 resolve → then 체이닝 실행
3. 서버에서 받아온 문자열(JSON) → JSON.parse() → 객체 변환
4. 객체에서 길이(length) → 화면에 출력
5. 실패하면 .catch()에서 상태코드 출력

📌 주의: 코드 안에는 작은 오타가 있어요

xml.reposeText  // ❌
xml.responseText  // ✅

또한

jsonData.lentgh  // ❌
jsonData.length  // ✅

---

5️⃣ 핵심 포인트

• Promise로 비동기 XHR 요청 처리 → 콜백 지옥 없이 순차적 처리 가능
• .then()으로 응답 처리, .catch()로 오류 처리
• 실제 HTTP 요청이 들어가므로, 콘솔이 아니라 서버 데이터를 화면에서 확인 가능

---

원하면 내가 이 코드를 async/await 버전으로 바꾸어서

• .then 체인 없이
• 동기처럼 읽히도록 개선된 예제도 보여줄 수 있어.

---

JSON.parse(responseText)) 가 객체로 변환한다는거야?

맞아요 ✅ 정확히 이해했어요.

조금 더 풀어서 설명하면 이렇게 됩니다.

---

1️⃣ 서버에서 오는 데이터

• 서버에서 HTTP 요청(GET)하면 대부분 문자열 형태의 JSON이 돌아와요.
  예시:

'[{"id":1,"title":"hello"},{"id":2,"title":"world"}]'

문자열로 되어 있음 → 아직 JS 객체가 아님

---

2️⃣ JSON.parse()

JSON.parse(responseText)

• 문자열(JSON) → 자바스크립트 객체/배열로 변환
• 위 예시라면:

[
  {id:1, title:"hello"},
  {id:2, title:"world"}
]

• 이제 jsonData[0].title 같은 식으로 바로 접근 가능

---

3️⃣ 요약

단계	데이터 형태	접근 가능 여부
서버 응답	문자열 JSON	문자열이므로 jsonData[0].title 불가
JSON.parse() 후	JS 객체/배열	객체처럼 jsonData[0].title 접근 가능

parse가 뭔데?

좋아, 여기서 아주 기본부터 잡아볼게 😎

---

1️⃣ “parse”의 뜻

• parse = 문자열을 읽어서 의미 있는 데이터 구조로 바꾼다
• 쉽게 말하면

"글자를 해석해서 컴퓨터가 이해할 수 있는 자료 형태로 변환"
라고 생각하면 돼요.

---

2️⃣ 자바스크립트에서의 JSON.parse

const jsonString = '{"name":"홍길동","age":20}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "홍길동"

• 서버에서 온 문자열(JSON) → JSON.parse()를 쓰면
• 자바스크립트 객체로 변환됨
• 이제 obj.name, obj.age처럼 속성 접근 가능

---

3️⃣ 비유

• JSON 문자열은 편지지에 글자로 적힌 데이터
• parse = 편지를 읽어서 바로 쓸 수 있는 엑셀 파일 같은 구조로 옮기는 것

---

4️⃣ 반대 개념

• 객체 → 문자열 변환 = JSON.stringify(obj)
• parse ↔ stringify 쌍으로 생각하면 좋아요

---

하드 코딩 작성 순서?

1️⃣ HTML 구조 먼저 만들기

<button id="xhr-promise-btn">게시글 데이터 요청</button>
<div>게시글 수: <span id="post-count">0</span></div>

• 버튼 클릭 시 요청 실행
• 게시글 수를 보여줄 span 준비

---

2️⃣ 버튼 이벤트 등록

document.querySelector('#xhr-promise-btn').addEventListener("click", () => {
  // 나중에 작성할 fetchDataXML() 호출
});

• 클릭하면 HTTP 요청 시작

---

3️⃣ Promise 기반 함수 작성

function fetchDataXML() {
  return new Promise((resolve, reject) => {
    const xml = new XMLHttpRequest();
    xml.open("GET", 'https://jsonplaceholder.typicode.com/posts');

    xml.addEventListener('load', () => {
      if(xml.status === 200){
        resolve(xml.responseText);  // 성공하면 resolve
      } else {
        reject(xml.status);         // 실패하면 reject
      }
    });

    xml.send();
  });
}

• new Promise() → 성공(resolve) / 실패(reject) 처리
• XHR로 실제 서버 요청

---

4️⃣ 버튼 클릭 이벤트에서 Promise 호출 및 처리

document.querySelector('#xhr-promise-btn').addEventListener("click", () => {
  fetchDataXML()
    .then(responseText => JSON.parse(responseText))   // 문자열 → 객체 변환
    .then(jsonData => document.querySelector("#post-count").innerText = jsonData.length) // 게시글 수 표시
    .catch(status => console.log('데이터 요청 실패', status)); // 에러 처리
});

---

5️⃣ 실행 순서 요약

1. 버튼 클릭 → 이벤트 발생
2. fetchDataXML() 호출 → Promise 객체 반환
3. XHR 요청 시작 → 서버에 GET 요청
4. 요청 완료 → resolve(responseText) 또는 reject(status)
5. .then() → JSON.parse → 객체로 변환 → 화면에 데이터 출력
6. .catch() → 실패 시 에러 처리

---

🔹 하드코딩 작성 순서 요약

1. HTML 요소 만들기 (버튼, 표시 영역)
2. 클릭 이벤트 리스너 등록
3. Promise 기반 데이터 요청 함수 만들기
4. 이벤트 안에서 함수 호출 + then, catch 체이닝
5. 화면에 데이터 출력