[2022 하계 모각소] 5회차 결과

 

 

1. OPEN API란?

 

API는 응용프로그램이나 서비스를 개발하는데 필요한 운영체제(OS)나 라이브러리 등의 특정 기능을 추상화하여 사용하기 쉽도록 만든 인터페이스로 Single UNIX Specification, Windows API 등을 말한다.

 

Open API는 Web 2.0 API, 통신망 서비스 API 등 주로 인터넷이나 통신망과 관련된 자원의 API를 의미하는 것으로, 여러 사람들이 공동으로 사용할 필요가 있는 자원에 대하여 이 자원의 사용을 개방하고, 사용자들이 자원에 대한 전문적인 지식이 없어도 쉽게 사용할 수 있도록 기능을 추상화하여 표준화한 인터페이스를 말한다.

 

이러한 Open API 서비스는 아마존, 구글 등 글로벌 회사들이 자사의 서비스를 일반 개발자, 타사 등에 개방하여 다양한 Mashup 서비스가 생겨나게 하고, 이렇게 하는 것이 자사의 비즈니스를 더욱 확대하고 수익을 창출하게 되는 계기가 되는 것이 입증되었기에, 국내에서도 공공기관과 포털 사이트를 중심으로 Open API를 이용하여 자사의 자원을 개방하는 서비스가 보편화되고 있는 추세이다.

 

 

2. API 연동은 어떻게 하는 걸까?

 

API를 호출하기 위해서는 우선 axios라는 라이브러리를 설치해야 한다.

axios를 사용하여 GET, PUT, POST, DELETE 등의 메소드로 API 요청을 할 수 있다.

* axios는 REST API에 데이터를 요청할 때, 이를 Promise로 처리할 수 있게 해주는 라이브러리이기도 하다.

 

- Promise란?

리액트에서 Promise는 비동기 처리에 활용되는 객체를 말한다.

주로 웹서비스를 구현할 때 원활한 데이터 통신을 위해 활용된다.

<Promise의 상태는 총 3가지>

1) Pending(대기) - 비동기 로직 처리의 미완료 상태

new Promise();	//Promise 객체 생성

new Promise((resolve, reject) => {});	//인자는 resolve(실행)와 reject(실패)

2) Fulfilled(이행) - 비동기 로직 처리가 완료된 상태로 Promise 결과값 반환 상태

function getData() {
	return new Promise((resolve, reject) => {
    	let data = 10;
        resolve(data);
    })
 }
 
 getData().then((resolveData) => console.log(resolvedData));

resolve()를 통해 Promise 실행

Promise 객체 생성 후 resolve에 파라미터를 넣어주면 Promise가 이행상태로 넘어간다. 이후 then()을 활용하면 결과값을 받을 수 있다.

 

3) Rejected(실패) - 비동기 로직 처리의 실패 또는 오류 상태

function getData() {
	return new Promise((resolve, reject) => {
    	reject(new Error("This is rejected!"));
    })
}

getData().catch((err) => console.log(err));

reject인자는 호출 시 실패 상태가 된다. 이후 catch()를 활용하여 결과값을 받고 예외 처리 가능

 

-

GET : 데이터 조회

POST : 데이터 등록

PUT : 데이터 수정

DELETE : 데이터 제거

 

- REST API

REST (Representational State Transfer)

자원(Resource), 행위(Verb), 표현(Representations) 총 3가지로 구성된다.

 

- axios 사용법

import axios from 'axios';

axios.get('/users/1');

메소드를 정한 후 파라미터로는 API의 주소를 입력하면 된다.

axios.post('/users', {
	username : 'chamny',
    	name : 'chaemin'
});

POST 메소드는 위의 방식처럼 등록하고자 하는 정보를 넣을 수 있다.

위의 코드를 해석하면, users에 해당 user 객체를 신규 등록해달라는 의미일 수도 있고,

axios.post('/articles', {
	username : 'chamny',
    	contents : 'Fighting~',
});

위의 방식과 같이 articles에 article을 등록해달라는 의미로 사용될 수 있다.

즉 서버가 어떤 규칙을 정해놓으면 client는 그것에 맞게 REST API를 통신하면 되고 그것을 도와주는 것이 바로 axios 라이브러리이다.

 

 

대부분의 API는 아래와 같은 json형태로 호출된다.

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  (...)
]

 

 

3. axios로 데이터 받아보기

 

fetch도 좋지만 axios를 사용하면 장점이 많다고 한다.

- fetch()는 body property를 사용하고, axios는 data property를 사용한다.

- fetch의 url이 fetch() 함수의 인자로 들어가고, axios에서는 url이 option 객체로 들어간다.

- fetch에서 body 부분은 stringify()로 되어진다.

 

 

아래는 axios를 사용한 방식이다.

1) GET

let [data, setData] = useState([]);
const getData = async() => {
	const url = "http://~~";
    axios
    	.get(url)
        .then((res) => {
        	setData(res.data);
            console.log("데이터 불러오기 성공");
        })
        .catch((error) => {
        	console.log(error);
       	});
};

 2) POST

axios
	.post("/api/users/login",
    	{ email, password }
    )
    .then((response) => {
    	console.log(response);
    })
    .catch((err) => {
    	console.log(err.response);
    });

성공하면 200번대가 뜨고 보내는 것 자체로 실패 시 400번대 에러가 발생