API란?

컴퓨터나 컴퓨터 프로그램 사이의 연결

클라이언트와 서버의 통신

1. 웹브라우저에서 서버에게 원하는 데이터 요청
2. 서버는 데이터베이스에서 요청받은 데이터 탐색
3. 서버가 데이터베이스에서 찾은 데이터를 가져옴
4. 꺼내온 데이터를 서버가 웹브라우저에게 전달
즉, "클라이언트와 서버의 통신은 클라이언트가 서버에 데이터를 요청하면, 서버는 데이터베이스에서 요청받은 데이터를 찾고 꺼내와서, 다시 클라이언트에게 알맞은 데이터를 전달하는 과정"

API는?

API는 웹브라우저와 같은 클라이언트와 서버 사이의 연결이며, 서버에 원하는 데이터를 요청하고 전달받는 방법

API호출

별도의 서버를 만들어두지 않았기 때문에 JSON에서 제공하는 무료 API예제를 활용 !

JSON 형식 ?

• JavaScript Object Notation의 약자 : JSON
• 자바스크립트 객체 표기법
• 자바스크립트에서 객체 형태의 데이터를 가독성이 좋게 나타내기 위한 표기법
• key: value 쌍으로 이루어짐

fetch 내장함수

• 자바스크립트에서는 fetch 내장함수를 이용해서 api를 호출
  

호출결과 promise가 호출됨

• promise를 객체를 반환하는 함수 = 비동기처리 함수
• then메서드를 활용해 결과값을 출력할 수 있음
  
• 가장 먼저 console.log(res)의 결과가 출력되고, 그 다음으로 fetch로 api를 호출한 내용이 출력됨
• fetch를 통해 API를 호출하면, Response라는 API 성공 객체 그 자체를 반환하기 때문에 이러한 값이 출력
  
• 자바스크립트에서 api를 통해 데이터를 요청하면, json 형식의 문자열을 받게 됨
• json 데이터를 사용하려면 문자열을 파싱해서 객체 형태로 변환이 필요
• fetch 함수의 반환값인 json 형식의 데이터가 담긴 res 변수에 json이라는 메서드를 사용해 이를 객체 형태로 변환
• API의 호출이 완전히 끝난 이후에, 이 res 변수를 객체로 변환해주기 위해 await을 작성

try-catch 적용

• 데이터를 받아오지 못하는 오류 등 다양한 오류가 발생할 수 있기 때문에, 데이터 통신을 위해서는 try-catch문을 통해서 오류를 표시해 두는 것이 좋음 !