[Javascript] : 'JS'에서 'API'를 호출하는 방법

zeew00·2024년 8월 19일

API js

2024 하계 방학 Front-End Mentoring

목록 보기

31/32

1. API

API(Application Programming Interface)는
컴퓨터 or 컴퓨터 프로그램 사이의 연결을 뜻합니다.

2. Client / Server 통신

API에 대해 이해하려면 우선 클라이언트와 서버의 데이터 통신 즉
우리가 웹 또는 앱을 이용할 때 어떻게 원하는 데이터를 요청하고
받을 수 있는지를 먼저 이해해야합니다.

2-1. 커피숍과 클라이언트/서버 통신

클라이언트/서버 통신 과정은 우리가 일상에서 커피숍에 가서 음료를 주문하고
수령 후 받아서 마시게되는 과정을 떠올려보면 보다 쉽게 이해할 수 있습니다.

손님이 바리스타(알바생)에게 원하는 음료를 주문합니다.

알바생은 주문 받은 음료를 만들기 위해 필요한 재료를 파악하고
창고에서 음료 제조에 필요한 알맞은 재료를 선택합니다.

알바생은 창고에서 선택한 재료를 로스팅 기계로 가져옵니다.

선택한 재료로 음료를 제작하고 완성된 음료를 손님에게 전달합니다.

위의 과정은 우리가 웹이나 앱에서 데이터를 요청하고 전달하는 방식과 유사합니다.

웹 브라우저에서 서버에게 원하는 데이터를 요청합니다.

서버는 DB에서 요청 받은 데이터를 찾습니다.

서버가 DB에서 찾은 데이터를 꺼내옵니다.

꺼내온 데이터를 서버가 웹 브라우저에게 전달합니다.

요약하자면 클라이언트/서버 간 통신은 클라이언트가 서버에 데이터를 요청하면
서버는 DB에서 요청 받은 데이터를 찾고 꺼내와서 다시 클라이언트에게 알맞은
데이터를 전달하는 과정이라 할 수 있습니다.

1-2. 그래서 'API'란 무엇인가?

API란 위와 같이 웹 브라우저와 같은 클라이언트/서버 사이의 연결이라고
할 수 있고 이렇게 서버에서 원하는 데이터를 요청 및 전달 받는 방법을 말합니다.

3. API 호출 방법

API를 호출하기 위해서는 가장 먼저 클라이언트의 API 호출에 응답 해줄 수 있는
서버가 필요한데 API 호출을 배우려면 우선 JSON 형식에 대해 알아야 합니다.
JSON(JavaScript Object Notation) JS 객체 표기법 이라는 뜻을 가지며
JS에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 표기 방법입니다.
보통 웹 어플리케이션에서 데이터를 전송할 경우 사용되며
key, value 쌍으로 이루어져 있습니다.

3-1. 'fetch' 내장함수를 이용한 API 호출

JS에서는 fetch라는 내장함수를 이용해 API 호출이 가능한데
fetch 내장함수 내에는 우리가 사용할 API 주소를 넣을 수 있습니다.
then 메서드와 catch 메서드를 사용해 에러를 출력해보겠습니다.

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

console.log(response);

fetch 함수는 비동기 함수이기 때문에 가장 아래에 작성된 response를 출력하는
코드가 먼저 실행되고 이후 프로미스에서 resolve 함수를 통해 전달된 결과 값을
then 메서드에서 매개변수로 받아 API 호출의 결과 값이 출력됩니다.

위와 같은 출력 결과가 나오는 이유는 fetch를 통해 API를 호출하면
response라는 API 성공 객체 그 자체를 반환하기 때문입니다.
따라서 getData 함수를 생성 후 async를 작성해줍니다.
그 다음 함수의 내부에서 res라는 변수에 fetch 함수로 API를 호출합니다.

const getData = async() => {
  const res = fetch("<https://jsonplaceholder.typicode.com/posts>");
};

getData();

JS에서 API를 통해 데이터를 요청하면 보통 JSON 형식의 문자열을 받게 되는데
이 JSON 형식은 JS의 객체 표기법으로 객체 형태의 데이터를 가독성 좋게 나타내기
위한 표기법이기 때문에 JS에서 이 JSON 데이터를 사용하려면 문자열을 파싱해서
객체 형태로 반환해야합니다.
res 변수에 json 메서드를 사용해 이를 객체형태로 변환 해주겠습니다.
이때 이 fetch 함수는 비동기적으로 처리되기 때문에 이 API 호출이 완전히
끝난 이후에 res 변수를 객체로 변환해주기 위해 `await를 사용합니다.

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

결과를 보면 데이터가 객체 형태(key: value)로 출력되는 것을 볼 수 있습니다.
마지막으로 try/catch를 사용해 예외(에러)처리 기능을 추가했습니다.

const getData = async () => {
    try {
        const response = await fetch("<https://jsonplaceholder123.typicode.com/posts>");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(`error : ${error}`);
    }
};

getData();