API란?
API(Application Programming Interface) 란, 쉽게 말해서 컴퓨터들이 서로 대화할 수 있도록 도와주는 방법 이라고 볼 수 있음.
예를 들어,
피자 가게에서 피자를 주문할 때, 우리는 메뉴판을 보고 원하는 피자를 선택하고, 그 피자의 이름과 사이즈 등을 직원에게 말함. 그러면 직원은 우리가 말한 주문대로 피자를 만들어 줌. 여기서 API는 우리와 피자 가게 사이에서 서로 대화를 돕는 메뉴판과 직원 같은 역할을 함.
- 피자가게: 우리가 주문하고 싶은 정보나 서비스를 제공하는 곳 (
ex인터넷의 어떤 서비스나 웹) - 주문서: 우리가 피자를 어떻게 만들지 알려주는 정보 (API를 통해 우리가 요청하는 것)
- 피자 완성: 주문서대로 만든 피자를 우리에게 전달하는 것 (API가 우리에게 결과를 보내주는 것)
REST API란?
REST(Representational State Transfer) API는 클라이언트와 서버 간에 데이터를 주고 받기 위한 URL 규칙임.
하이퍼 미디어(링크)를 기반으로 특정 리소스나 데이터를 접근하기 위한 방식으로써 URL에 명시적으로 어떤 데이터를 담고 있는지 나타내야 함.
예를 들어, 사용자의 목록을 받아오는 URL은 다음과 같음
http://domain.com/api/users
여기서 첫 번째 사용자 데이터는 다음과 같이 접근할 수 있음.
http://domain.com/api/users/1
API 함수 예시
https://jsonplaceholder.typicode.com/todos
const apiUrl: string = 'https://jsonplaceholder.typicode.com/todos';
interface Todo { // API에서 반환하는 Todo 객체의 구조 정의. 해당 인터페이스는 각 할 일 항목이 다음 속성들을 가지고 있음을 명시함.
userId: number;
id: number;
title: string;
completed: boolean;
}
//TODO: 아래 API 함수의 타입을 정의해 보세요
async function fetchTodos(): Promise<Todo[]> {
const response = await fetch(apiUrl);
const data = await response.json();
return data;
}
fetchTodo().then(todos => todos[0].id);
이 코드에서는
-
async키워드를 사용하여 함수가 비동기로 동작함을 나타내며,await로 비동기 작업을 처리함. -
fetch(apiUrl)을 사용하여apiUrl에 GET 요청을 보내고, 응답을 받아서response변수에 저장함. -
response.json()은 응답 데이터를 JSON 형식으로 변환하여, 그 결과를data변수에 저장함. -
함수는
Promise<Todo[]>타입을 반환함. 즉, 이 함수는 할 일 목록(Todo)의 배열을 포함하는 프로미스를 반환하고, 반환되는 데이터는Todo인터페이스와 일치하는 구조로 되어 있음. -
fetchTodos().then()함수가 비동기적으로 데이터를 가져오면.then()블록에서 할 일 목록을 처리할 수 있음.
여기서는 첫 번째 할 일 항목의id값을 가져옴.
