fetch API
완전 정복

// async 함수 안에서만 await 사용 가능
async function getData(url) {
  try {
    // 1. 요청 보내기
    const response = await fetch(url);

    // 2. HTTP 에러 체크 (fetch는 4xx/5xx에서 에러 안 던짐!)
    if (!response.ok) {
      throw new Error(`HTTP 에러: ${response.status}`);
    }

    // 3. JSON 파싱
    const data = await response.json();

    // 4. 데이터 활용
    console.log(data);
    return data;

  } catch (err) {
    // 5. 에러 처리
    console.error('데이터 로드 실패:', err.message);
    throw err; // 호출한 곳으로 에러 전달
  }
}

// 호출
getData('https://api.example.com/posts');

async function loadPosts() {
  const btn     = document.getElementById('load-btn');
  const result  = document.getElementById('result');
  const status  = document.getElementById('status');

  // 로딩 시작
  btn.disabled   = true;
  status.textContent = '⏳ 로딩 중...';
  result.innerHTML   = '';

  try {
    const res  = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
    const data = await res.json();

    // 성공: 카드 렌더링
    status.textContent = `✅ 게시글 ${data.length}개 로드 완료`;
    result.innerHTML = data.map(post => `
      <div class="post-card">
        <strong>${post.title}</strong>
        <p>${post.body.substring(0, 80)}...</p>
      </div>
    `).join('');

  } catch (err) {
    // 에러: 사용자에게 표시
    status.textContent = `❌ 오류: ${err.message}`;
  } finally {
    btn.disabled = false; // 항상 버튼 복구
  }
}

async function postData(url, body) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body), // 객체 → JSON 문자열 변환
  });

  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

// 사용 예시
postData('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시글',
  body: '내용입니다.',
  userId: 1,
}).then(data => {
  console.log('저장 완료:', data);
});