기초적인 API 호출

1. 도입 (왜 배워야 하는가)

API(응용 프로그램 인터페이스)는 서로 다른 소프트웨어 시스템 간의 상호작용을 가능하게 합니다. 예를 들어, 웹 애플리케이션에서 서버에 데이터를 요청하고 응답을 받아서 사용자에게 정보를 표시하는 과정이 바로 API 호출입니다.

실무에서 API 호출을 이해하지 못하면, 외부 서비스와의 연동이 어렵고, 필요한 데이터를 가져오는 데 어려움을 겪게 됩니다. 예를 들어, 쇼핑몰 웹사이트에서 상품 정보를 외부 데이터베이스에서 가져오지 못하면 사용자에게 최신 정보를 제공하지 못하게 되어 신뢰성을 잃게 됩니다.

2. 핵심 개념 설명

API란?

API는 소프트웨어의 기능을 다른 소프트웨어에서 사용할 수 있도록 정의한 규칙입니다. 마치 레스토랑의 메뉴판처럼, 원하는 정보를 요청하는 방법과 형식을 제공합니다.

HTTP 요청

API 호출은 주로 HTTP 요청을 통해 이루어집니다. 이는 웹 브라우저가 서버와 소통하는 방법과 동일합니다. 예를 들어, 웹사이트를 방문할 때 브라우저가 서버에 요청을 보내고, 서버가 응답을 보내는 과정을 생각해보세요.

비유

API 호출을 식당에서 음식을 주문하는 것으로 비유할 수 있습니다. 손님이 메뉴에서 음식을 선택하고 주문을 하면, 주방에서 요리를 해서 손님에게 제공합니다. 이 과정에서 손님(클라이언트)과 주방(서버) 간의 소통이 이루어집니다.

3. 기본 코드 예제

가장 기본적인 API 호출을 보여주는 코드는 다음과 같습니다.

fetch('https://api.example.com/data') // API 호출을 위한 fetch 함수
  .then(response => { // 응답을 받으면
    if (!response.ok) { // 응답 상태가 정상인지 확인
      throw new Error('Network response was not ok'); // 오류 발생
    }
    return response.json(); // JSON 형태로 파싱
  })
  .then(data => { // 파싱된 데이터를 받으면
    console.log(data); // 데이터 콘솔에 출력
  })
  .catch(error => { // 오류가 발생하면
    console.error('There was a problem with the fetch operation:', error); // 오류 메시지 출력
  });

실행 결과

{
  "id": 1,
  "name": "Sample Item",
  "price": 100
}

코드 한 줄씩 동작 설명

1. fetch('https://api.example.com/data'): 지정된 URL에 GET 요청을 보냅니다.
2. .then(response => { ... }): 서버로부터 응답을 받으면 이 함수를 실행합니다.
3. if (!response.ok) { ... }: 응답 상태가 200이 아닐 경우 오류를 발생시킵니다.
4. return response.json();: 응답을 JSON 형식으로 변환합니다.
5. .then(data => { console.log(data); }): 변환된 데이터를 콘솔에 출력합니다.
6. .catch(error => { ... }): 오류가 발생하면 오류 메시지를 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 상품 목록 가져오기

쇼핑몰 애플리케이션에서 상품 목록을 가져오는 경우입니다.

fetch('https://api.example.com/products')
  .then(response => response.json())
  .then(data => {
    data.forEach(product => {
      console.log(상품명: ${product.name}, 가격: ${product.price});
    });
  })
  .catch(error => console.error('Error:', error));

상황 설명: 사용자가 쇼핑몰에 접속했을 때, 최신 상품 목록을 서버에서 가져와서 화면에 표시합니다.

예제 2: 사용자 정보 가져오기

사용자 정보를 가져오는 예제입니다.

fetch('https://api.example.com/users/1')
  .then(response => response.json())
  .then(user => {
    console.log(사용자 이름: ${user.name}, 이메일: ${user.email});
  })
  .catch(error => console.error('Error:', error));

상황 설명: 사용자가 로그인했을 때, 해당 사용자의 정보를 서버에서 가져와서 화면에 표시합니다.

5. 흔한 실수와 주의사항

실수 1: 잘못된 URL 사용

fetch('https://api.invalidurl.com/data') // 잘못된 URL
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error)); // NetworkError 발생

• 올바른 코드: 정확한 URL을 사용해야 합니다.

실수 2: 응답 상태 체크 누락

fetch('https://api.example.com/data')
  .then(response => response.json()) // 응답 상태 체크 없음
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• 올바른 코드: 응답 상태를 체크하는 코드를 추가해야 합니다.

6. 정리

• API 호출은 클라이언트와 서버 간의 데이터 전송을 가능하게 합니다.
• HTTP 요청을 통해 API와 소통하며, JSON 형식으로 데이터를 주고받습니다.
• 응답 상태와 오류 처리를 반드시 포함해야 합니다.

다음에 학습하면 좋은 주제

• 비동기 프로그래밍(AJAX, Async/Await)
• RESTful API 디자인
• 데이터 처리 및 상태 관리 (예: Redux)