API 호출

API (Application Programming Interface)

클라이언트와 서버 간의 데이터 통신을 가능하게 하는 인터페이스다.

웹사이트에서 필요한 데이터를 요청하고 받아오는 과정에서 핵심적인 역할을 담당한다.

클라이언트와 서버 통신의 이해

1. 웹 브라우저 → 서버에게 데이터 요청
2. 서버 → 데이터베이스에서 요청받은 데이터 검색
3. 데이터베이스 → 요청된 데이터 제공
4. 서버 → 클라이언트에게 데이터 전달

 

JSON (JavaScript Object Notation) 데이터 형식

자바스크립트 객체 표기법으로, 웹 애플리케이션에서 데이터를 전송할 때 사용되는 표준 형식이다.
Key-Value 쌍으로 구성되며, 배열과 객체 형태로 데이터를 구조화한다.

 

(1) fetch를 이용한 API 호출

// Promise 기반 방식
fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));

(2) async / await를 활용한 방식

const getData = async () => {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/users');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
};

getData();

 

Response 객체와 JSON 파싱

• fetch 함수는 Response 객체를 반환한다
• 실제 JSON 데이터를 얻으려면 .json() 메서드를 사용해야 한다
• JSON 데이터는 문자열 형태이므로 자바스크립트 객체로 파싱이 필요하다

비동기 처리의 중요성

• fetch 함수는 Promise를 반환하는 비동기 함수다
• await 키워드를 사용하여 API 호출 완료까지 대기할 수 있다
• async/await 방식이 then/catch 방식보다 가독성이 좋다

---

try-catch문을 활용한 에러 처리

const getData = async () => {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/users');
        
        // HTTP 응답 상태 확인
        if (!response.ok) {
            throw new Error(`HTTP Error: ${response.status}`);
        }
        
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.log('API 호출 실패:', error.message);
    }
};

에러 처리가 중요한 이유

• 네트워크 오류 발생 가능성
• 서버 응답 지연 또는 실패
• 잘못된 API URL 또는 권한 문제
• 사용자 경험 향상을 위한 적절한 피드백 제공

---

적절한 HTTP 상태 코드 확인

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

로딩 상태 관리

const getData = async () => {
    setLoading(true);
    try {
        // API 호출 로직
    } catch (error) {
        // 에러 처리
    } finally {
        setLoading(false);
    }
};

재사용 가능한 API 함수 작성

const apiRequest = async (url, options = {}) => {
    try {
        const response = await fetch(url, options);
        if (!response.ok) {
            throw new Error(`HTTP Error: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error('API 요청 실패:', error);
        throw error;
    }
};