Fetch API

// 기본 GET 요청
const response = await fetch('/api/users');
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}
const users = await response.json();

// POST 요청 with JSON body
const newUser = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '김철수', email: 'kim@example.com' }),
});

// 인증 토큰과 함께 요청
const authResponse = await fetch('/api/profile', {
  headers: {
    'Authorization': `Bearer ${accessToken}`,
  },
  credentials: 'include', // 쿠키 포함
});

// AbortController로 요청 취소
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

try {
  const data = await fetch('/api/slow-endpoint', {
    signal: controller.signal,
  });
  clearTimeout(timeoutId);
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('요청이 타임아웃되었습니다');
  }
}

// 파일 업로드 with FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', '프로필 이미지');

await fetch('/api/upload', {
  method: 'POST',
  body: formData, // Content-Type 자동 설정
});

// 재사용 가능한 fetch wrapper
async function api(endpoint, options = {}) {
  const response = await fetch(`/api${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options.headers,
    },
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({}));
    throw new Error(error.message || `HTTP ${response.status}`);
  }

  return response.json();
}