API 호출

less

API 호출
├── 1. API란?
├── 2. 클라이언트-서버 구조 및 흐름
├── 3. JSON
├── 4. REST API란?
└── 5. API 호출 방식
    ├── fetch()               // 내장 함수
    ├── .then() / .catch()    // Promise 메서드
    ├── async / await         // 비동기 제어 문법
    ├── try...catch           // 에러 처리 구문
    └── then/catch vs async/await 비교

1. API란?

API(Application Programming Interface)는, 프로그램끼리 상호작용하기 위한 약속된 규칙이다.
웹 개발에서는 보통 클라이언트(브라우저/앱)와 서버가 데이터를 주고받는 방식을 의미한다.

클라이언트는 필요한 데이터를 요청(Request)
서버는 결과를 응답(Response)
이 요청/응답의 규칙을 정해둔 것이 API
대표 유형: REST API, GraphQL API

🔍 API를 쉽게 이해해보자!

API는 "프로그램끼리 소통하는 약속된 대화법"이다. 쉽게 말해, 식당의 메뉴판 같은 역할을 한다.

Client 손님 → "파스타 하나 주세유"
Server 식당 → 주문을 받아 요리(데이터)를 만들어 반환
API 메뉴판 → 주문 가능한 항목과 방법을 규칙으로 명시

이처럼 Client와 Server는 API를 통해 데이터를 주고받는다.

예시

요청 예시	설명
`GET comic.naver.com/webtoon/detail?titled=641253`	외모지상주의 API 호출
`GET comic.naver.com/webtoon/detail?titled=318995`	갓오브하이스쿨 API 호출

현실 서비스에서도 사용자가 버튼을 클릭하면 브라우저가 내부적으로 API 요청을 보낸다.
주소창에 URL을 입력하는 행위도 GET 요청의 한 형태다. (GET 요청을 직접 보내는 것)
단, 주소창으로는 헤더/바디를 정교하게 제어할 수 없으니 실제 앱에서는 fetch()/XHR/라이브러리를 사용한다.

API가 갖춰야 할 3가지 정보

구성 요소	설명	예시
Method	자원에 대한 행동	`GET`(조회), `POST`(생성), `PUT/PATCH`(수정), `DELETE`(삭제)
Endpoint	자원의 주소(경로)	`/api/users`, `/api/posts/:id`
Parameter	추가 조건/식별자	`?page=2&userId=1`, 경로 파라미터 `:id` 등

API 종류

유형	설명
Public API	누구나 사용 가능 (날씨, 환율, 번역 API 등)
Private API	회사 내부 전용 (관리자 대시보드 데이터)
Partner API	특정 파트너만 접근 가능 (제휴 서비스 간 통신)

모든 프로그램은 API를 가질 수 있다.

Window API → 윈도우 시스템 기능 제어 (알림, 창 크기 등)
Database API → DB의 데이터 읽기/쓰기
브라우저 API → DOM 조작, Web Storage, Geolocation 등

API는 비즈니스가 될 수도 있다.

잘 만든 API는 상품이 될 수 있다. (일부 API는 호출 1회당 요금을 부과해 수익을 창출)

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

통신 구조

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

통신 흐름

less

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

1. 클라이언트 → 서버의 API 엔드포인트로 HTTP 요청을 보낸다.
  예를 들어, /api/users 또는 /login 같은 경로로 데이터를 요청
1. 서버 → API 요청을 받아 내부 로직 처리 및 필요 시 DB에서 데이터 조회/저장
1. 데이터베이스 → 요청된 데이터 서버에 반환
1. 서버 → 클라이언트에 JSON 응답
1. 클라이언트 → 응답받은 API 데이터를 화면에 표시하거나 다음 동작으로 이어간다.

이 모든 과정은 네트워크를 통해 이루어진다.

3. JSON

json

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

JSON(JavaScript Object Notation)은 자바스크립트 객체 문법 기반의 데이터 교환 형식
key: value 구조를 사용한다.
문자열, 숫자, 불리언, 배열, 객체 등 다양한 타입의 값을 포함할 수 있다.
사람이 읽기 쉽고, 기계가 쉽게 파싱할 수 있어 API 통신에서 표준처럼 사용된다.
예를 들어, 서버에서 사용자 정보를 JSON 형식으로 응답하면, 클라이언트는 이를 자바스크립트 객체처럼 사용할 수 있다.

4. REST API란?

🧭 REST API (Representational State Transfer)

서버의 자원을 규칙적인 주소(URL)로 표현하고, 행동은 HTTP Method로 구분하는 API 설계 원칙이다.

REST의 핵심 개념

요소	의미	예시
자원(Resource)	서버가 관리하는 데이터	`/users`, `/posts`, `/comments`
행동(Method)	자원에 대한 요청 방식	`GET`, `POST`, `PUT`, `DELETE`
표현(Representation)	자원을 주고받는 형식	JSON, XML 등

RESTful API 예시

동작	Method	Endpoint	설명
게시글 목록 조회	`GET`	`/posts`	게시글 전체 조회
게시글 작성	`POST`	`/posts`	새 게시글 생성
특정 게시글 조회	`GET`	`/posts/:id`	특정 게시글 조회
게시글 수정	`PUT`	`/posts/:id`	게시글 수정
게시글 삭제	`DELETE`	`/posts/:id`	게시글 삭제

핵심: URL에는 자원만, 행동은 HTTP Method로 표현한다.

💡 피해야 할 설계 예시

잘못된 설계	올바른 설계
`/getAllUsers`	`/users`
`/createPost`	`/posts`
`/deletePost?id=1`	`/posts/1`

REST API의 장점

일관성 있는 구조 (예측 가능)
자원별로 명확히 분리되어 유지보수가 용이하다.
HTTP 표준 메서드를 활용하므로 도입이 빠르다.

5. API 호출 방식

{JSON} Placeholder: 테스트용 가짜 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 데이터는 클라이언트에서 가공하거나 화면에 렌더링하여 사용자에게 보여줄 수 있다.

5-1. `fetch()`

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

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

자바스크립트에서 API를 호출할 때 사용하는 내장 함수이다.
fetch()는 비동기 HTTP 요청 함수이며, Promise 객체를 반환한다.
GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용할 수 있다.
서버의 응답을 받기 전까지는 pending 상태의 Promise가 출력된다.

5-2. `.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)는 응답을 기다리지 않으므로, pending 상태의 Promise가 출력된다.
.then() 내부의 result는 서버로부터 받은 Response 객체 전체이며,
이 안에는 HTTP 상태 코드, 헤더, 응답 본문 등이 포함된다.
단, fetch()가 반환하는 것은 응답 본문(body)이 아닌 Response 객체 자체이므로,
실제 데이터 사용을 위해선 .json()메서드로 응답 본문을 파싱해야 한다.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((res) => res.json()) // 응답 본문을 JSON으로 변환
  .then((data) => console.log(data)) // 변환된 데이터 사용
  .catch((err) => console.error('에러 발생:', err));

res.json()은 또 다른 Promise를 반환하므로,
.then()을 한 번 더 체이닝해서 변환된 데이터를 처리해야 한다.
.catch()는 전체 체인에서 발생한 에러를 한 번에 처리한다.
이렇게 .then()을 연속적으로 연결하는 방식을 Promise 체이닝이라고 한다.

5-3. `async`/`await`

const getData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const data = await res.json();
  console.log(data);
};

getData();

async 함수 안에서는 await 키워드를 사용할 수 있다.
await는 Promise가 완료될 때까지 기다린 후, 그 결과값을 반환한다.
await fetch()는 네트워크 요청이 끝날 때까지 기다린 뒤, 서버의 응답을 담은 Response 객체를 반환한다.
res.json()은 응답 본문을 읽고 JSON → 자바스크립트 객체로 변환하는 비동기 함수이므로, 이 과정 역시 await로 처리해야 한다.
이렇게 변환된 데이터가 data 변수에 저장되며, console.log(data)를 통해 실제 데이터 배열이 출력된다.
async/await 문법을 사용하면 비동기 코드가 동기 코드처럼 순차적으로 읽혀 가독성이 좋아진다.

5-4. `try...catch`

async function safeGetPosts() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    console.log('성공:', data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}
safeGetPosts();

try...catch는 코드 실행 중 발생할 수 있는 오류를 감지하고 처리하기 위한 구문이다.
try 블록에서 오류가 발생하면, 실행이 즉시 중단되고 제어 흐름이 catch 블록으로 이동한다.
fetch() 요청 중에는 네트워크 장애, 잘못된 URL, JSON 파싱 실패 등 다양한 오류가 발생할 수 있다.
이런 예외 상황에서도 try...catch를 사용하면 프로그램이 강제 종료되지 않고, 오류를 감지해 사용자에게 안내하거나 복구 로직을 실행할 수 있다.
즉, 비동기 코드의 안정성과 신뢰성을 높이는 핵심적인 에러 처리 방식이다.

5-5. then/catch vs async/await

비교 항목	`.then()` / `.catch()`	`async` / `await`
가독성	비동기 흐름이 중첩되어 복잡해질 수 있음	동기 코드처럼 순차적으로 읽혀 직관적
에러 처리	`.catch()`를 체이닝하거나 중첩해야 함	`try...catch`로 한 블록 안에서 일괄 처리 가능
병렬 처리	여러 Promise를 체이닝해야 제어 가능	`Promise.all()`과 함께 사용 시 병렬 처리 용이
사용 시점	간단한 단일 요청이나 테스트 코드에 적합	여러 단계의 비동기 흐름을 제어할 때 더 유용

💡 .then() / .catch()는 간단한 요청 흐름에 유용하지만, 여러 단계의 비동기 로직에서는 async/await과 try...catch 조합이 더 읽기 쉽고 안정적인 코드 구조를 제공한다.

정리

항목	핵심 요약
API	프로그램 간 통신을 위한 약속된 규칙
REST	URL로 자원을, HTTP Method로 행동을 표현하는 설계 원칙
JSON	표준적인 API 응답 데이터 포맷
fetch	브라우저 내장 비동기 요청 함수 (4xx/5xx 응답은 `res.ok`로 직접 확인)
then/catch	간단한 요청 흐름에 적합한 Promise 체이닝 문법
async/await	가독성이 높고 에러 처리 일관성 유지, 실무에서 기본적으로 사용됨

항목	분류	설명
`.then()`, `.catch()`	Promise 객체의 메서드	비동기 작업 완료 시 콜백 실행
`async`, `await`	자바스크립트 언어 문법	Promise 기반 코드를 동기처럼 작성 가능
`try...catch`	에러 처리 제어문	코드 실행 중 발생한 예외를 감싸서 처리

API 호출 ​

1. API란? ​

예시 ​

API가 갖춰야 할 3가지 정보 ​

API 종류 ​

모든 프로그램은 API를 가질 수 있다. ​

API는 비즈니스가 될 수도 있다. ​

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

통신 구조 ​

통신 흐름 ​

3. JSON ​

4. REST API란? ​

REST의 핵심 개념 ​

RESTful API 예시 ​

REST API의 장점 ​

5. API 호출 방식 ​

5-1. fetch() ​

5-2. .then() / .catch() ​

5-3. async/await ​

5-4. try...catch ​

5-5. then/catch vs async/await ​

정리 ​