본문 바로가기

나의 FE피봇이야기/Dev_Knowledge

[Dev]개발자로부터 배우는 API 기본 (Javascript)

red hot


개발자분들의 블로그를 조금씩 보는 이유는 어떤식으로 개발 로직을 제작하는지 이해하기 위해서 입니다.

API에 대한 개념을 간략히 설명하고 본론 내용을 요약 정리 해보록하겠습니다.

※본 글은 한 개발자의 글(아래)을 요약했을 뿐입니다. 

원글
https://www.hyobb.com/22.-api#api-3


API

API는 서버와 클라이언트가 통신하는 과정 속에서 어떠한 방식으로 데이터를 요청하고 전달하겠다는 약속이라고 할 수 있습니다.

API 호출을 배우려면 json 형식에 대해 먼저 알아야하는데요, https://jsonplaceholder.typicode.com/posts 에 접속해보면, 많은 json 형식의 데이터들을 볼 수 있습니다.

json 이란 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법 이라는 뜻을 갖고 있고, 위의 그림과 같이 key value 쌍으로 이루어져 있는 데이터 표기법 입니다.


로직 작성 시 "주의사항" (Javascript)

이렇게 API의 개념과 API 호출 방법을 배워보았는데요, API를 호출 할 때에는 주의할 점이 있습니다.
API 호출은 필요한 데이터를 요청하는 작업입니다.
데이터를 요청할 때에는 우리의 컴퓨터가 아닌, 다른 서버 프로그램에 요청하는 경우가 많기 때문에 네트워크 오류 혹은 인터넷 속도 등의 다양한 이유로 실패할 수 있다는 점을 주의해야합니다. 그래서 비동기처리가 API작성시 중요합니다.


비동기처리가 포인트

1. async와 await

우리는 API 호출을 할 때에는 async와 await을 이용해 비동기적으로 호출을 하게 됩니다.


2. 호출 이후 응답을 기다림

비동기 동작을 수행할 함수 getData를 만들고, 함수 내부에서 fetch를 통해 API 호출을 비동기로 처리했습니다.
API 호출을 비동기로 처리했기 때문에 호출 이후 응답이 올 때 까지 아래 작성된 코드들은 실행되지 않습니다.

3. try catch

try 내부의 코드들이 먼저 실행되고, 그 이후 오류가 발생한다면 catch 문을 통해 catch 내부 코드들이 실행되는 것을 확인할 수 있습니다.