API란
인터넷에 API 정의를 검색해보면 API란 Application Programming Interface로, "컴퓨터나 컴퓨터 프로그램 사이의 연결" 이라고 나와있는데요, 인터페이스가 무엇인지, 그리고 컴퓨터나 컴퓨터 프로그램 사이의 연결이 무엇을 의미하는지 아직 잘 와닿지 않는 것 같습니다.
이렇게 어렵게 설명된 API 정의를 대신해, 아주 쉬운 예시를 통해 API란 무엇인지 자세하게 배워보도록 하겠습니다.
클라이언트와 서버의 통신
API에 대해 이해하려면, 먼저 클라이언트와 서버의 데이터 통신 즉, 우리가 웹이나 앱을 이용할 때 어떻게 원하는 데이터를 요청하고 받을 수 있는지를 먼저 이해해야합니다.
커피숍과 클라이언트-서버 통신
이러한 과정은 우리가 커피숍에 가서 커피를 주문하고 마시는 과정을 떠올려보면 쉽게 이해할 수 있습니다.
먼저, 우리가 커피숍에서 커피를 주문해 먹는 과정을 떠올려봅시다.
커피숍에서는 우리가 직접 커피숍에 들어가서 원두를 갈고 커피를 만들어 먹지 않고, 바리스타가 직접 알맞은 원두를 골라 커피를 제작합니다.
커피숍에서 커피를 주문하는 자세한 과정을 단계로 나눠 보자면 다음과 같습니다.
- 손님이 바리스타에게 원하는 커피를 주문합니다.
- 바리스타는 주문받은 커피를 만들기 위해 필요한 원두를 파악하고, 창고에서 원두를 선택합니다.
- 바리스타는 창고에서 선택한 원두를 가져옵니다.
- 선택한 원두로 커피를 제작하고, 완성된 커피를 손님에게 전달합니다.
이러한 과정은 우리가 웹이나 앱에서 데이터를 요청하고 전달받는 방식과 비슷합니다.
우리가 커피숍에서 커피를 주문하고 전달받는 과정과 마찬가지로 우리가 웹이나 앱에서 데이터를 요청하고 전달받는 방식을 단계별로 나눠보겠습니다.
- 웹브라우저에서 서버에게 원하는 데이터를 요청합니다.
- 서버는 데이터베이스에서 요청받은 데이터를 찾습니다.
- 서버가 데이터베이스에서 찾은 데이터를 꺼내옵니다.
- 꺼내온 데이터를 서버가 웹브라우저에게 전달합니다.
이 과정에 나오는 웹브라우저(클라이언트)는 손님, 서버는 바리스타, 데이터베이스는 창고 그리고 데이터는 커피 라고 할 수 있습니다.
커피숍에서 원하는 커피를 주문하는 과정과 마찬가지로 클라이언트는 원하는 데이터가 있을 경우, 직접 다른 서버의 데이터베이스에 접근하지 않고 원하는 데이터를
요청 합니다.그 다음, 바리스타가 손님이 주문한 커피를, 창고에서 알맞은 원두를 찾아 제작하듯이 서버 또한 클라이언트가 요청한 데이터를 데이터베이스에서 찾고 꺼냅니다.
마지막으로 바리스타가 완성된 커피를 우리에게 전달하는 것처럼, 서버도 클라이언트가 요청한 데이터를 전달합니다.
정리해보면, 클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾고 꺼내와서, 다시 클라이언트에게 알맞은 데이터를 전달하는 과정이라고 할 수 있습니다.
그래서 API란?
이렇게 클라이언트와 서버의 통신을 이해하셨다면, 이제 "컴퓨터나 컴퓨터 프로그램 사이의 연결"인 API가 무엇인지 배워보겠습니다.
API는 이렇게 웹브라우저와 같은 클라이언트와 서버 사이의 연결이라고 할 수 있고, 이렇게 서버에 원하는 데이터를 요청하고 전달받는 방법이라고 할 수 있습니다.
그럼 이제 API를 호출하는 방법 즉, 우리가 사용하는 웹 브라우저인 클라이언트에서 서버에게 데이터를 요청하고 전달받는 과정을 자바스크립트로 어떻게 작성해야 하는지 배워보도록하겠습니다.
API 호출
지금부터는 특정 서버에 데이터를 요청하고 받아보는 API 호출을 직접 실행해보겠습니다.
API 호출을 하기 위해서는 가장 먼저, 우리의 API 호출에 응답을 해줄 수 있는 서버가 필요한데요, 강의 실습을 위해 제작 해둔 별도의 서버가 없기 때문에 여러가지 api 예제들을 무료로 제공해주는 jsonplaceholder 라는 서비스를 이용해보도록 하겠습니다.
API 호출을 배우려면 json 형식에 대해 먼저 알아야하는데요, https://jsonplaceholder.typicode.com/posts 에 접속해보면, 많은
json 형식의 데이터들을 볼 수 있습니다.
Json은 이란 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법 이라는 뜻을 갖고 있고, 자바스크립트에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 표기법입니다.
이 json은 보통 웹 애플리케이션에서 데이터를 전송할 때 사용되며, 보이는 것과 같이 key value 쌍으로 이루어져있습니다.
다시 돌아와서 https://jsonplaceholder.typicode.com 웹페이지로 이동해보겠습니다.
아래로 스크로를 내리다보면 resources라는 화면을 볼 수 있는데, 여기서 우리는 /posts 를 눌러보겠습니다.
여기에 보이는 이 json형식의 데이터들은 https://jsonplaceholder.typicode.com/posts 라는 API의 호출 결과입니다.
이렇게 API는 API 주소(api url)를 통해 호출 할 수 있고, 우리가 이 API를 이용해 호출을 하면 서버는 페이지에 보이는 것과 같은 json 데이터들을 전달해줍니다.
그럼 이제 코드샌드 박스에서 실제로 동일한 API를 호출해보겠습니다.
우리는 jsonplaceholder에서 제공해주는 api 중 하나인, 이전에 우리가 확인했었던 https://jsonplaceholder.typicode.com/posts 를 이용해서 API를 호출해보겠습니다.
자바스크립트에서는 fetch 라는 내장함수를 이용해 API를 호출할 수 있습니다.
fetch 내장함수 안에는 우리가 사용할 API 주소를 넣어줄 수 있습니다.
response 라는 변수에 API 를 호출 한 결과를 담아 출력해보면, 어디서 많이 본듯 한 Promise {<pending>} 이라는 값이 출력되는 것을 볼 수 있습니다.
저번시간에 우리는, 이렇게 프로미스 객체를 반환하는 함수는 비동기 처리를 하는 함수이고, 이러한 함수는 then 메서드를 사용해 결괏값을 출력할 수 있다고 배웠었습니다.
그럼, 이 비동기 처리 함수의 결괏값을 then 메서드를 통해 출력해보고, catch 메서드를 사용해 에러도 출력해보겠습니다.
코드를 실행하면, 이 fetch 함수는 비동기 함수이기 때문에 가장 아래 작성된 response를 출력하는 코드가 먼저 실행되었고, 이후 프로미스에서 resolve 함수를 통해 전달된 결괏값을, then 메서드에서 매개변수로 받아 API 호출의 결괏값이 출력되는 것을 볼 수 있습니다.
API 호출 결과를 살펴보면, 우리가 확인했던 jsonplaceholder 사이트와는 전혀 다른 값들이 출력되었는데요, 그 이유는 우리가 API를 잘못 호출한 것이 아니라, 이렇게 fetch를 통해 API를 호출하면, Response라는 API 성공 객체 그 자체를 반환하기 때문에 이러한 값이 출력되는 것입니다.
그럼 우리가 원하는 데이터들을 전달받기 위해 getData 라는 함수를 생성한 다음, 함수 내부에서 fetch를 통해 API를 호출해보도록 하겠습니다.
앞에서 설명했던 것 처럼 fetch는 프로미스 객체를 반환하는 비동기적으로 처리하는 내장함수 이기 때문에, 지난시간에 배운 async/await을 사용해주도록 하겠습니다.
getData 라는 함수를 생성하고, async 를 작성해줍니다.
그 다음 함수의 내부에서 res 라는 변수에 fetch 함수로 API를 호출해주겠습니다.
우리가 jsonplaceholder 사이트에서 봤던 것 처럼, 자바스크립트에서 api를 통해 데이터를 요청하면, 보통 json 형식의 문자열을 받게 됩니다.