Api란?

• Application Programming Interface
• 어떠한 응용 프로그램에서 데이터를 주고 받고 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
• 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 어떠한 데이터를 제공 받을 수 있는 지에 대한 규격들

작동법

• 작성된 프로그램은 API에게 데이터를 요청
• API는 요청받은 명령을 처리하기 위해 응용 프로그램 or 애플리케이션과 상호작용 → 이후 결과물을 작성된 프로그램에게 전달

비동기 프로그래밍

• 정의한 코드가 완료되지 않아도 다음 코드를 실행하는 것

function Example(){
	console.log('Hello world');
}
setTimeout(Example, 3000);
console.log('대기');

결과는
대기
Hello world // 3초후에 뜨는것!

Promise

• 비동기 상태를 값으로 다룰 수 있는 작업의 결과값을 담는 객체
  - 비동기 프로그램의 문제점인 '콜백지옥' 현상이 생기지 않도록 하는 기능
  • 비동기 프로그래밍을 할때 동기 프로그래밍 방식으로 코드 작성 가능!
    const p = Promise.resolve(1);
    1을 담는 Promise 객체 p선언

const p = new Promise((resolve, reject) => {
	setTimeout(() => {
    	console.log('2초가 지났습니다.');
        resolve('hello');
   	},2000);
});

Promise 생성자는 콜백을 인수로 받음.
콜백의 첫 번째 인수 resolve 함수는 콜백 안에서 resolve를 호출하면 resolve인수로 준 값이 곧 Promise객체의 결과값으로 처리됨 상태가 된다.
두번째 인수 reject함수는 비동기 작업에서 에러가 발생했을 때 호출하는 함수

async / await

Promise를 더 쉽게 사용할 수 있도록 해주는 문법

• 장점
  • 코드가 간결해지고, 가독성이 높아진다.
  • 에러확인이 쉽다.
• 사용방법
  • async는 함수에서 비동기 처리를 위한 promise동작을 한다는 것을 명시해주며 함수 이름의 제일 앞에 사용
  • await은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작하며 해당 함수 내부에서 promise의 앞부분에 사용

HTTP 메소드

• GET : 입력한 url에 존재하는 데이터를 가져와서 보여준다.
• POST : 사용자가 생성한 파일, 데이터를 서버에 업로드할 때
• DELETE : 데이터베이스에 저장되어 있는 내용 삭제

Fetch 함수

fetch("API 주소", {
 method: "GET"
 headers: {
  "Content-Type": "application/json",
 },
 bodys: JSON.stringfy({
   key: value,
 })
})
.then(response => response.json())
.then(response => {
	//data를 응답받은 후의 로직
});

• 첫 번째 파라미터는 API 주소, 두 번째 파라미터에는 request의 옵션

• GET : 정보를 가져올 때 / POST : 어떠한 정보를 보낼 때, 생성할 때 / DELETE : 정보를 삭제할 때

• headers : 메타정보

• bodys : body에 담아서 보내고 싶은 내용들. body는 객체로 이루어져 있어야 하며 객체에서의 key값은 백엔드에서 요구하는 key값으로 정해서 보내줘야 한다. js 파일로 작업을 했기 때문에 JSON.stringfy() 방식을 사용해 해당 내용을 JSON으로 바꿔준다.

• response.json() 은 받아온 데이터는 json 타입인데 자바스크립트에서 사용하기 위해 js 형식으로 바꿔주는 역할을 한다.

• fetch기본 메소드 GET

fetch('http://api.google.com/user')
  .then( res => res.json())
  .then( res => {
    if (res.success) {
      	console.log(`${res.user.name}`님 환영합니다);
    }
});

메소드가 POST인 경우

fetch('http://api.google.com/user',{
	method: 'post',
	body: //전달할 내용
})
  .then( res => res.json())
  .then( res => {
    if (res.success) {
      	console.log(`${res.user.name}`님 환영합니다);
    }
});

Axios

현재 가장 많이 사용되고 있는 HTTP 클라이언트
HTTP요청을 Promise 기반으로 처리한다는 장점

GET메소드 사용

axios.get('api url')
	.then() //api를 받아온 이후 실행할 코드 작성

POST메소드 사용

axios.post('api url', {
	// 보낼 데이터를 객체형태로 작성
})
.then() // 이후 실행할 코드 작성