API 호출

less

API 호출
├── API란?
├── 클라이언트-서버 구조 및 흐름
├── JSON
└── API 호출 방식
    ├── fetch()
    ├── .then() / .catch()
    ├── async / await
    └── try...catch

API (Application Programming Interface)란?

API는, 컴퓨터나 프로그램 간의 상호작용을 위한 통신 수단이다.
웹 개발에서는 주로 웹 브라우저(클라이언트)와 서버 사이에서 데이터를 주고받기 위한 약속된 규칙을 의미한다.

웹 브라우저는 서버에 필요한 데이터를 요청(Request)하고, 서버는 그 요청에 대한 응답(Response)을 돌려준다.
이때 요청과 응답의 형식, 방식 등을 정해놓은 것이 바로 API이다.
대표적인 예로는 REST API, GraphQL API 등이 있다.

클라이언트-서버 구조 및 흐름

클라이언트-서버 통신 구조

Client: 사용자가 직접 조작하는 프로그램으로, 서버에 요청을 보내고 응답을 받아 화면에 보여주는 역할을 한다. (ex 웹브라우저, 모바일 앱)
Server: 클라이언트의 요청을 받아 처리하고, 필요한 데이터를 데이터베이스에서 가져와 응답을 보내는 역할을 한다. 중간 관리자처럼 클라이언트와 데이터베이스 사이에서 데이터를 주고받는 다리 역할을 한다.
Database: 정보를 구조화된 형태로 저장하는 장소이다. 서버는 데이터베이스에 접근해 필요한 정보를 조회하거나 저장한다.

클라이언트-서버 통신 흐름

less

[Client] ⇄ HTTP ⇄ [Server] ⇄ SQL/ORM ⇄ [Database]

클라이언트는 HTTP 요청을 통해 서버의 API 엔드포인트(API 주소)에 접근한다. 예를 들어, /api/users 또는 /login 같은 경로로 데이터를 요청한다.
서버는 API 요청을 받아 내부 로직을 처리하고, 필요 시 데이터베이스에 SQL 쿼리나 ORM을 통해 접근한다.
데이터베이스는 요청된 데이터를 서버에 반환하고, 서버는 이 데이터를 다시 API 응답(ex.JSON 형식)으로 클라이언트에게 전달한다.
클라이언트는 응답받은 API 데이터를 화면에 표시하거나 다음 동작으로 이어간다.

이 모든 연결은 네트워크를 기반으로 작동하며, 인터넷 또는 클라우드 환경에서는 모두 네트워크 상에 존재하는 장치들이다. 즉, 클라이언트가 전 세계 어디에 있든, 네트워크만 연결되어 있다면 서버에 요청을 보낼 수 있고, 서버는 백엔드에서 DB에 접근하여 정보를 제공할 수 있다.

JSON (JavaScript Object Notation, 자바스크립트 객체 표기법)

json

{
  "id": 1,
  "title": "Hello JSON",
  "completed": false
}

JSON은 자바스크립트 객체 문법을 기반으로 만들어진 데이터 교환 형식이다.
key: value 쌍의 구조를 가지며, 문자열, 숫자, 불리언, 배열, 객체 등 다양한 타입의 값을 포함할 수 있다.
주로 웹 애플리케이션에서 클라이언트와 서버 간의 데이터를 주고받을 때 사용된다. 사람이 읽기 쉬우며, 기계도 쉽게 파싱할 수 있어 API 통신에서 표준처럼 사용된다.
예를 들어, 서버에서 사용자 정보를 JSON 형식으로 응답하면, 클라이언트는 이를 자바스크립트 객체처럼 사용할 수 있다.

API 호출 방식

{JSON} Placeholder는 테스트 용으로 자주 사용되는 가짜 API 주소이다.
이 API는 실제 서버처럼 동작하지만, 내부에 저장된 데이터는 테스트를 위한 가상 데이터이며, 요청을 보내도 실제로 데이터가 바뀌지는 않는다.
예를 들어, 아래 URL에 접속하거나 fetch()로 요청을 보내면 게시글 데이터를 JSON 형식으로 응답받을 수 있다.

http

GET https://jsonplaceholder.typicode.com/posts

fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => response.json())
  .then((data) => console.log(data));

이처럼, 클라이언트는 API를 통해 서버에 데이터를 요청하고, 서버는 이를 받아 처리한 후 JSON 형식의 응답을 반환한다.
반환된 JSON 데이터는 클라이언트에서 가공하거나 화면에 렌더링하여 사용자에게 보여줄 수 있다.

fetch()

fetch()는 자바스크립트에서 API를 호출할 때 사용하는 내장 함수이다. 서버로 비동기 HTTP 요청을 보낼 수 있으며, Promise 객체를 반환한다. GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용할 수 있다.

// fetch 기본 사용 예시
const response = fetch("https://jsonplaceholder.typicode.com/posts");

console.log(response); // Promise {<pending>}

fetch()는 비동기 함수로, 실행 즉시 Promise 객체를 반환한다.
아직 서버의 응답을 받기 전이기 때문에 콘솔에는 "pending" 상태의 Promise가 출력된다.

.then() / .catch()로 응답 처리

const response = fetch("https://jsonplaceholder.typicode.com/posts")
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

console.log(response);

// 1. Promise { <pending> }
// 2. Response { ... }   // 요청이 완료된 후 출력

fetch()함수는 비동기적으로 동작하며 즉시 Promise 객체를 반환한다. 따라서, .then()과 .catch()를 사용해 응답 결과와 에러를 처리한다.
console.log(response)는 처리 완료 전의 Promise 객체를 출력하므로, pending 상태로 보일 수 있다.
이후 비동기 작업이 완료되면 .then() 내부가 실행되고, result에는 응답으로 받은 Response 객체가 전달된다. 이 객체는 서버로부터 받은 전체 응답 정보(HTTP 상태 코드, 헤더, 본문 등) 를 담고 있다.
단, fetch()는 처음에 응답 본문(body)이 아닌 Response 객체 전체를 반환하므로, 실제 데이터를 사용하려면 .json() 메서드로 응답 본문을 파싱해야 한다.

async/await로 더 직관적인 코드 작성

const getData = async () => {
  const result = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await result.json();
  console.log(data);
};

getData();

await fetch()는 HTTP 요청이 완료될 때까지 기다린 후, Response 객체를 반환한다.
fetch로 받은 응답은 JSON 형식의 문자열이므로, 이를 자바스크립트 객체로 변환하기 위해 .json() 메서드를 사용한다.
await result.json() 역시 비동기 처리이므로, JSON 파싱이 완료될 때까지 기다린 뒤 data에 할당된다. 최종적으로 console.log(data)는 변환된 자바스크립트 객체 배열을 출력한다.

try...catch를 사용한 API 호출 에러 처리

const getData = async () => {
  try {
    const result = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await result.json();
    console.log(data); // 정상 응답 시 JSON 데이터 출력
  } catch (error) {
    console.log(error); // 네트워크 오류 또는 JSON 파싱 오류 처리
  }
};

getData();

fetch()로 서버에 요청을 보낸 뒤, 응답을 .json()으로 변환하여 데이터를 출력한다.
네트워크 장애, 잘못된 주소, 응답 본문이 JSON이 아닐 경우 등 다양한 오류 상황이 발생할 수 있다.
이러한 예외 상황에 대비해 try...catch 구문을 사용하면, 코드 실행 중 오류를 감지하고 적절한 방식으로 처리할 수 있다. 이를 통해 프로그램이 예기치 않게 중단되지 않도록 안전한 흐름 제어가 가능해진다.

API 호출 ​

API (Application Programming Interface)란? ​

클라이언트-서버 구조 및 흐름 ​

클라이언트-서버 통신 구조 ​

클라이언트-서버 통신 흐름 ​

JSON (JavaScript Object Notation, 자바스크립트 객체 표기법) ​

API 호출 방식 ​

fetch() ​

.then() / .catch()로 응답 처리 ​

async/await로 더 직관적인 코드 작성 ​

try...catch를 사용한 API 호출 에러 처리 ​