[React] API의 정의, 장/단점, API 사용하기 _ JSON, fetch 함수

API란?

💡 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘

 

API = Application Programming Interface(애플리케이션 프로그램 인터페이스)

• Application 애플리케이션:는 고유한 기능을 가진 모든 소프트웨어
• Interface 인터페이스는 두 애플리케이션 간의 서비스 계약 → 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의

API 문서: 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어있음

---

API의 장/단점

API의 장점

① 데이터 접속의 표준화와 편의성

API는 모든 접속을 표준화하기 때문에 디바이스/운영체제 등과 상관없이 조건만 맞다면, 누구나 동일한 액세스를 약속한다. 또 조직에서 애플리케이션을 개발할 때 기능적 API를 사용하면, 필요한 기본 기능들– 인증, 통신, 지불 처리 및 위치 확인 등–을 매번 자가 개발/업데이트할 필요 없이 손쉽게 이용할 수 있는 장점이 있다. 즉, 더 이상 수레바퀴를 만들 때마다 매번 재발명할 필요가 없다.

② 자동화와 확장성

API를 통한 CRUD 처리에 따라 관련 데이터와 콘텐츠가 자동으로 생성되고 사용자의 환경에 맞춰서 정보가 전달 되어 개발 워크플로우가 간소화되고 애플리케이션 확장이 다소 용이하다. 예를 들자면 API를 활용한 웹 사이트 분석, 프로젝트 및 팀 관리 도구, 온라인 결제 시스템, 기타 여러 운영 설루션에 필요한 애플리케이션을 다소 쉽게 작성 가능하다.

③ 적용력

API는 변화 예측에도 큰 도움이 되기 때문에 API를 통해 데이터를 수집하고 전달하는 데 있어 유연한 서비스 환경을 구축하고 소프트웨어를 통합하고자 할 때, 그리고 개발자들 간의 협업이 필요할 때 더욱 용이하다.

 

API의 단점

① 보안성과 HTTP 방식의 제한

가장 주목할 것은 API의 단일 진입점인 API 게이트웨이는 해커의 타겟 대상이 될 수 있다는 점이다. 한마디로 API의 장점– 평범한 HTTP 메서드를 사용하여 액세스 할 수 있다는 점–이, 보안성에 관해서는 반면 크나큰 단점이 된다. 이 때문에 다른 일반적 인터넷 기반 리소스와 마찬가지로 메시지 가로채기 공격(man-in-the-middle), CSRF(Cross-Site Request Forgery) 공격, 크로스 사이트 스크립팅(Cross Site Scripting, XSS), SQL 삽입 공격(SQL injection), DDoS(Denial-of-service attack) 공격 (서비스 거부 공격) 등에 취약한 것이 사실이다. 또한 이러한 HTTP method는 메서드 형태가 다소 제한적이라는 문제점이 있다.

② 표준의 부재와 개발 비용

REST API의 설계에 있어 가장 큰 단점이라고 할 수 있는 점이 공식화된 표준이 존재하지 않는다는 점이다. 그러므로 관리가 어렵고 실제로 API 기능을 구현하고 제공하려면 개발 시간, 지속적인 유지 관리 요구 사항 및 지원 제공 측면에서 비용이 많이 들 수 있다. 또한 기존 API의 기능을 확장하려고 할 때 광범위한 프로그래밍 지식이 필요하다.

---

API 사용하기

JSON이란?

💡 JSON: JavaScript Object Notation = ‘자바 스크립트 객체 표기법

→ 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반의 데이터 교환 표준

 

JSON의 기본적인 형태

{
	key : value,
	key2: value2
}

 

JSON의 형태: 키(key)와 값(value)의 쌍

key와 value 사이엔 콜론(:)이 들어가며, 여러 데이터를 나열할 경우에는 쉼표를 사용한다.

 

fetch 함수

💡 fetch란 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공

 

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

 

• url: 가져오고자하는 데이터가 있는 주소
• 통신해서 우리가 response를 통해 json형식으로 데이터를 반환하여 사용할 수 있음A

 

→ method라는 인터페이스를 통해 GET/POST/HEAD/PUT/DELETE/OPTION/PATH 등의 다양한 메서드를 활용할 수 있다

headers: Request Header를 지정하는 인터페이스나, body 같은 HTTP Request에 실을 데이터를 설명하여 여러가지 타입을 넣고 객체 타입(json)형식으로 보내는 인터페이스가 있다.

 

fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify(data),
    })
    .then(response => response.json());

---

📍 참고 링크

API란 무엇인가요? - 애플리케이션 프로그래밍 인터페이스 설명 - AWS

API란? API의 정의와 종류 그리고 장단점 | 하늘네트

 

[React] API와 React의 fetch()💡