공부를 하다가 문득🧐 생각이 떠올랐는데 API는 백엔드와 프론트엔드 중에서 어디부분에 조금 중점을 둬야하나 생각이 들었습니다.
프론트엔드 = 클라이언트
백엔드 = 서버
조금더 쉽게 설명하면
가게의 손님은 클라이언트, 종업원은 서버라고 한다면 메뉴판이 API가 되겠습니다.
손님과 종업원을 연결시켜주어야하고 여러 응답을받고 요청을 주는역할이 API입니다.
그러면 메뉴판은 항상 손님에게 주어져야하니까 프론트엔드에 조금더 비중이 있는건가?
💥아닙니다! 손님은 예약을하고 올수도있고, 요즘에는 직원없이 테이블에서 바로 주문할수있거나, 키오스크도 있기때문에 상황마다 다릅니다.
😄그래서 API는 상황에따라서 달라질수있어서 어느곳에 중점을 두기 힘들다고 봅니다.
API의 정석
👨🏫CRDU
API의 가장 기본개념이고 중요한 개념은 CRUD입니다.
여러가지 요청을 할수있는데
C:Create (올리다)
R:Read (불러오다)
U:Update (수정하다)
D:Delete (지우다)배달의 민족에 주문을 할때 결제를하고, 집주소를 저장하고, 요청사항을 수정하고, 전에 주문했던 가게들의 목록을 가져오는 등등 수많은 작업들이 있을껍니다
이러한 요청과 응답체계들이 프로그램이 작동하면서 생기는 일들입니다.
😒그러면 메뉴판은 어떻게 만들어야할까요?
메뉴판 만들기 즉 API 호출을 하기 위해서는 우리의 API 호출에 응답을 해줄 수 있는 서버가 필요한데요,
Json이 대표적이고 JSON 이란 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법 이라는 뜻을 갖고 있고, 자바스크립트에서 객체 형태의 데이터를 가독성 좋게 나타내기 위한 표기법입니다.
이 json은 보통 웹 애플리케이션에서 데이터를 전송할 때 사용되며, key value 쌍으로 이루어져있습니다.
간단한 제작 해둔 별도의 서버가 없기 때문에 여러가지 api 예제들을 무료로 제공해주는 jsonplaceholder 라는 서비스를 이용해보도록 하겠습니다.
주소 끝에 posts,comments등을 붙이면 데이터들이 보여지고 이제 이것을 JS코드를 작성해서 불러와볼 것입니다.
홈페이지에 나와있는 코드를 그대로 붙여놓어서 작성해보면
😱id값이 바뀌면서 데이터들을 쉽게 출력할수있습니다.
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));
이제 여기서 posts뒤에 javascript fetch("https://jsonplaceholder.typicode.com/posts")
숫자를 붙이면 원하는 데이터를 가져올수있고 손쉽게 출력할수있습니다.
그래서 공식문서 홈페이지에는 이러한것들이 주어집니다.
🤗더 나아가서는 JS는 비동기함수입니다. 실제로 데이터를 불러올때는 신중하게 가져와야 하기때문에
await는 일반적으로 async 함수 안에서 사용됩니다. await는 Promise가 처리될 때까지 함수의 실행을 일시 중지하고, Promise가 처리되면 그 결과를 반환합니다.
await를 사용하여 비동기 코드를 동기식으로 작성할 수 있습니다.
오류가 일어난다면 해결해야하기때문에 try catch 를 사용해서 예외처리도 해줌과 동시에 가독성도 추가해준다면 👀아주좋은 메뉴판을 만들수 있을껍니다!
이번에는 클라이언트와 서버의 통신 과정에 대해 알아보고, 비동기 처리 내용들을 활용해 직접 API를 호출해보았습니다.
