웹기초 fetch로 API 호출

브라우저 내장 기능을 활용하여 서버와 통신하는 Fetch API의 사용법을 정리했다.

Promise 기반으로 동작하며 비동기 처리에 적합한 방식이다.

Fetch API: 비동기 통신 구현

async/await 문법을 사용하여 네트워크 요청 로직을 직관적으로 작성할 수 있다.

// 1. GET 요청: 데이터 수신
async function loadData() {
    try {
        const response = await fetch('https://api.example.com/posts');

        // 응답 상태 수동 확인 필요 (404, 500 등)
        if (!response.ok) throw new Error('데이터 로드 실패');

        const data = await response.json(); // JSON 변환
        console.log('수신 데이터:', data);
    } catch (error) {
        console.error('에러 발생:', error);
    }
}

// 2. POST 요청: 데이터 전송
async function saveData() {
    const response = await fetch('https://api.example.com/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: '새 글', content: '내용' })
    });
    const result = await response.json();
    console.log('저장 결과:', result);
}

구현 시 주의사항

• 에러 처리: fetch는 네트워크 장애 시에만 reject된다.
  HTTP 오류 상태(404, 500 등)는 resolve되므로 response.ok 확인이 필수적이다.

• 비동기 변환: 응답 본문을 객체로 변환하는 .json() 과정도 비동기 작업이므로 await가 필요하다.

데이터 연동의 중요성

외부 API와의 연동을 통해 화면을 동적으로 구성할 수 있다.

async/await를 활용한 데이터 흐름 제어는 현대 웹 개발의 핵심 기술이다.

이를 통해 실시간 데이터를 다루는 애플리케이션 구축이 가능하는 것 같다.

웨이호프