RESTful API를 알아봅시다

김현재·2021년 7월 14일
APIJavaScriptRestfulaxios
26
post-thumbnail
post-custom-banner

Client와 Server사이의 연결고리가 되는 API, 그 중에서도 popular한 RESTful API를 알아보고,
client단에서 API를 활용하여(?) 통신하는 방법을 axios를 사용하여 매우 간단히 알아보자!



RESTful API란?

쉽게 REST한 API로 해석할 수 있겠다.

우선 API가 뭔지부터..

쉽게 말하면 API는 서버와 클라이언트 사이의 연결고리라고 볼 수 있다. 왜 연결고리나면, API를 통해 클라이언트의 요청사항을 서버에 전달이 가능하고, 서버로부터 결과값을 클라이언트에게 받아올 수 있기 때문이다.

(더 쉽게 생각하면 사랑의 큐피트💕 같은것이다..!)

좀 더 사전적인 정의를 보면..
API는 Application Programming Interface의 줄임말로, 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합을 칭한다. API는 소프트웨어를 통해 상호작용이 가능하기에, API는 API를 제공하는 애플리케이션과 서드파티 소프트웨어 및 하드웨어 등 사이의 간단한 커뮤니케이션 계약이라고도 볼 수 있다.

웹 개발에서의 API는,
보통 개발자가 앱을 통해 사용자의 웹 브라우저에서 상호작용할 수 있도록 하는 코드 기능들( e.g. methods, properties, 이벤트, URLs), 사용자의 컴퓨터 상에 있는 다른 소프트웨어, 하드웨어, 또는 서드파티 웹사이트나 서비스의 집합을 의미한다.

API의 역할은?

1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다:
API는 데이터베이스의 보안 유지를 위해 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근을 부여한다. 이를 통해서 데이터베이스의 보안을 지킨다!
(그래서 API key, ID를 절대 공유해서도 안되고, 잊어버려도 안되는 것!)

2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다: 위에서 말한 것과 같이 client-server간의 연결고리 역할을 한다.

3. API는 모든 접속을 표준화한다: API는 모든 접속을 표준화하기 때문에 기계/ 운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있다. 쉽게 말해, API는 멀티어댑터 같은 것이다!



그럼, REST란 ?

월드 와이드 웹(www)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처*의 한 형식으로, 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다.

💡개발 아키텍처?? : 비유하자면 개발계의 "택배 송장"같은 것이다..근데 이제 각 택배사들마다 모양이 다른...

REST는 HTTP URI를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용한다. 즉, REST는 중심에 Resource(자원)가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.

최근의 서버 프로그램은 다양한 브라우저와 안드로이폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야 한다. 이런 환경에서 REST는 필요에 따라 구현할 수 있는 일련의 지침으로, REST를 통하여 API를 좀 더 빠르게, 가볍게 구축할 수 있어 사물인터넷(IoT) 및 모바일 앱 개발에 적극적으로 사용되고 있다.

REST 의 특징

1) Uniform (유니폼 인터페이스*)

HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하며, 특정 언어나 기술에 종속되지 않는다.

💡Uniform Interface : URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처를 지칭한다

2) Stateless (무상태성)

REST는 작업을 위한 상태정보를 따로 저장하고 관리하지 않는다 (HTTP 프로토콜이 Stateless Protocol이기에 REST도 무상태성을 갖는다)

세션 정보나 쿠키정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 단순히 들어오는 요청만을 처리하면 된다! 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해진다.

⚠️주의
API서버는 각각의 요청을 별개의 것으로 인식하고 처리한다! 그렇기에 이전 요청이 다음 요청의 처리에 연관되어서는 안된다.
물론 이전 요청이 DB를 수정하여 DB에 의해 바뀌는 것은 허용된다.

3) Cacheable (캐시 가능)

REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능하다는 점이다.

그 덕분에 HTTP 프로토콜 표준에서 사용하는 Last-Modified태그나 E-Tag를 이용하여 캐싱 구현이 가능하다. 이런 식으로 캐시를 사용하여 응답시간을 빠르게 하면 REST Server 트랜잭션이 발생하지 않기 때문에 결국, 전체 응답시간, 성능, 서버의 자원 이용률을 향상시킬 수 있다.

4) Self-descriptiveness (자체 표현 구조)

REST는 REST API 메시지만 보고도 이를 쉽게 이해 할 수 있도록 자체 표현 구조로 되어 있다.

5) Client - Server 구조

REST 서버는 API 제공 및 비즈니스 로직 처리, 저장, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조로 각각의 역할이 확실히 구분된다. 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어들게 된다.

6) 계층형 구조

REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있다.

7) Code-On-Demand(optional)

Server로부터 스크립트를 받아서 Client에서 실행한다.
반드시 충족될 필요는 없다.



REST의 장단점

장점

  • HTTP 프로토콜의 인프라를 그대로 사용하므로 REST API 사용을 위한 별도의 인프라를 구축할 필요가 없다
  • HTTP 프로토콜의 표준을 최대한 활용하여 여러 추가적인 장점을 함께 가져갈 수 있다
  • HTTP 표준 프로토콜을 따르는 모든 플랫폼에서 사용이 가능하다
  • Hypermedia API의 기본을 충실히 지키면서 범용성을 보장한다
  • REST API 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있다
  • 여러가지 서비스 디자인에서 생길 수 있는 문제를 최소화한다
  • 서버와 클라이언트의 역할을 명확하게 분리한다

단점

  • 표준이 존재하지 않는다
  • 사용할 수 있는 메소드가 4가지 밖에 없다(GET, POST, PUT, DELETE)
  • 구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재한다
  • pushState*를 지원하지 않는 점

    💡history.pushState() : 페이지를 reload하지 않고 url만 변경해야 할 경우 사용한다



REST의 구성

REST API는 다음과 같이 구성된다.

  • 자원(RESOURCE) - URI
    모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
    자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI 다.
    Client는 URI를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.

  • 행위(Verb) - HTTP METHOD
    HTTP 프로토콜의 Method(GET, POST, PUT, DELETE)를 사용한다.*

  • 표현(Representations)
    Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보낸다.
    REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타내어 질 수 있다.
    보통 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.

💡 HTTP Method
POST : 특정 URI를 요청하면 리소스를 생성한다 (Create)
GET : 특정 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다 (Read)
PUT : 특정 리소스를 수정한다 (Update)
DELETE : 특정 리소스를 삭제한다 (Delete)



그럼, RESTful이란?

RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다.
즉, REST 원리를 따르는 시스템을 RESTful이란 용어로 부르는 것 뿐이다!

RESTful의 목적

이해하고 사용하기 쉬운 REST API를 만드는 것!
RESTful한 API를 구현하는 근본적인 목적은 성능 향상이 아닌, 일관적인 컨벤션을 통한 API의 이해도 및 호환성을 높이는 것이기에, 성능이 중요한 상황에서는 굳이 RESTful API를 구현할 필요는 없다.



RESTful의 조건

API가 RESTful로 간주되려면 다음 기준을 따라야 한다
아래에 기준이 길긴 하지만, 위에서 본 REST의 특징을 그대로 적은 것이다...!

  • 클라이언트, 서버 및 리소스로 구성되었으며 요청이 HTTP를 통해 관리되는 클라이언트-서버 아키텍처여야 한다.
  • 클라이언트-서버 요청 간에 클라이언트 정보가 저장되지 않으며, 각 요청이 분리되어 있고 서로 연결되어 있지 않아야 한다.
  • 클라이언트-서버 상호 작용을 간소화하는 캐시 가능 데이터가 있어야 한다.
  • 정보가 표준 형식으로 전송되도록 하기 위한 구성 요소 간 통합된 인터페이스여야 한다.
    • 요청된 리소스가 식별 가능하며 클라이언트에 전송된 표현과 분리되어야 한다.
    • 수신한 표현을 통해 클라이언트가 리소스를 조작할 수 있어야 한다.
    • 클라이언트에 반환되는 자기 기술적(self-descriptive) 메시지에 클라이언트가 정보를 어떻게 처리해야 할지 설명하는 정보가 충분히 포함되어야 한다.
    • 하이퍼미디어: 클라이언트가 리소스에 액세스한 후 하이퍼링크를 사용해 현재 수행 가능한 기타 모든 작업을 찾을 수 있어야 한다.
  • 요청된 정보를 검색하는 데 관련된 서버(보안, 로드 밸런싱 등을 담당)의 각 유형을 클라이언트가 볼 수 없는 계층 구조로 체계화하는 계층화된 시스템을 갖춰야 한다.
  • Code on-demand(Optional): 요청을 받으면 서버에서 클라이언트로 실행 가능한 코드를 전송하여 클라이언트 기능을 확장할 수 있는 기능.

이처럼 REST API는 따라야 할 기준이 있지만, 속도를 저하시키고 더 무겁게 만드는 XML 메시징, 빌트인 보안 및 트랜잭션 컴플라이언스처럼 특정 요구 사항이 있는 SOAP(Simple Object Access Protocol) 등 규정된 프로토콜보다 사용하기 쉬워 많이 사용된다.

RESTful 하지 못한 경우

Ex1) CRUD 기능을 모두 POST로만 처리하는 API
Ex2) route에 resource, id 외의 정보가 들어가는 경우(/students/updateName)



API 활용하기 - axios편

이제 API가 뭔지도 대충 알았고, RESTful한 API가 뭔지도 알았으니, 이 API를 어떻게 client가 사용할 수 있는지 익혀보자.

Axios

자바스크립트에서 비동기 HTTP 통신을 하는 방법은 크게 AJAX, Axios, Fetch 이렇게 3개가 있다.
이전에 AJAX 를 사용한 통신 방법을 알아봤으니, 이번엔 맛보기로 Axios를 이용해 통신하는 방법을 알아보자.

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로, 크로스 브라우징에 최적화되어 있어 IE11까지 모조리 지원한다.

Axios 특징

  • 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용이 가능하다
  • Promise(ES6) API를 사용한다
  • 요청과 응답 데이터의 변형
  • HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경된다

설치하기

<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>을 삽입하거나

npm을 사용중이라면 터미널에 yarn add axios를 사용하면 설치 가능하다

.request()

client의 request를 보내주는 함수이다

매개변수는 object타입의 config*를 받는다

💡config : 영어의 'configuration'에서 앞에 여섯개의 알파벳만을 따서 쓴 것으로, 컴퓨터에서 쓰일 때는 시스템의 환경설정을 해주는 파일을 말 한다.

예제 1)

axios.request({
  method: 'GET', //GET 메소드 사용
  url: `https://www.test.com`, 

  headers: {'Content-Type': 'application/json'},

  params: { msg: hi}, //쿼리스트링 지정
});

예제 2)

axios.request({ 
	method: 'POST', 
	url: `https://www.test.com`, 

	headers: {'Content-Type': 'application/json'}, 

	data: { password: 'testpw123', } }); // data에 전달된 object는 request body에 들어간다

만약 위의 예제의 Content-Type이 formdata를 요구한다면, 아래와 같이 formdata에다 append 해준다

const formdata= new FormData(); 

formdata.append('password', 'testpw123'); 

axios.request({ 
	method: 'POST',
	url: `https://www.test.com`, 
	data: formdata, });

💡formdata : FromData란 ajax로 폼 전송을 가능하게 해주는 FormData 객체로, 이미지를 ajax로 업로드할 때 필요하다



Get response

자바스크립트에서 네트워크통신은 비동기적으로 이루어지기에 axios.request({...})는 Promise를 리턴한다.

Promise가 뭔지 잘 모르겠다면 : 왜 비동기적 프로그래밍을 해야하는가 를 봅시다!

따라서 axios.request({...}).then(response=> ...);과 같이 사용 가능하며,
에러 캐치가 필요한 경우 axios.request({...}).then(response=> ...).catch(e=> ....); 처럼 사용할 수 있다.

axios.request({ 
	//some options 
}).then(response=>{ 
	const {data: responseBody, status: responseCode}= response; 
//... 
}).catch(e=>{ 
	//then에서 예외가 발생했거나, response code가 400 이상(실패)인 경우 이쪽으로 넘어온다 
	console.error(e); 
});

then의 response는 말그대로 request에 대한 response 정보를 담은 객체이며, response.data를 하면 response body를 얻을 수 있다.



참고자료

profile
김현재
쉽게만 살아가면 재미없어 빙고!
이전 포스트

Porfolio 제작기 - EmailJS로 contact page 구현하기

다음 포스트

라이브러리가 뭘까..?

post-custom-banner

2개의 댓글

comment-user-thumbnail
JU CHEOLJIN
2021년 7월 15일

여러 곳들 다니면서 정보를 찾아서 보면 정리가 잘 안될때가 많은데,
이렇게 한방에 정리해주셔서 많은 공부가 됐어요!! 👍
궁금했던 개념인데 감사합니다!!😁

1개의 답글