sharingStorage

모던 자바스크립트 44장 REST API 본문

Front-End/모던 자바스크립트 Deep Dive

모던 자바스크립트 44장 REST API

Anstrengung 2022. 8. 2. 00:40

REST는 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 소개되었고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다.

 

REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP요청의 내용을 이해할 수 있다.

구성요소 내용 표현 방법
자원 자원 URI (엔드포인트)
행위 자원에 대한 행위 HTTP 요청 메서드
표현 자원에 대한 행위의 구체적 내용 페이로드

 

 

44.2 REST API 설계 원칙

REST에서 가장 중요한 기본적인 원칙은 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것이다.

 

1. URI는 리소스를 표현해야 한다.

리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. 이름에 get같은 행위에 대한 표현이 들어가서는 안된다.

# bad
GET/getTodos/1
GET/todos/show/1

# good
GET/todos/1

 

2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드 (GET, POST, PUT, PATCH, DELETE등 )를 사용하여 CRUD를 구현한다.

 

 

44.3 JSON Server를 이용한 REST API 실습

HTTP요청을 전송하고 응답받으려면 서버가 필요하다. JSON Server를 사용해 가상 REST API 서버를 구축하여 HTTP요청을 전송하고 응답을 받는 실습을 해본다.

 

44.3.1 JSON Server 설치

JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴이다. 먼저 npm을 사용하여 JSON Server를 설치한다.

필자는 다른 폴더에서 설치를 진행하는 바람에 g (global)옵션을 붙였다.

 

 

프로젝트 루트폴더에 다음과 같이 db.json 파일을 생성한다. 이 파일은 리소스를 제공하는 데이터베이스 역할을 한다.

 

44.3.3 JSON Server 실행

터미널에서 다음과 같이 입력하여 JSON 서버를 실행한다. JSON Server가 데이터베이스 역할을 하는 db.json 파일의 변경을 감지하게 하려면 watch옵션을 추가하고 port를 변경하려면 --port 옵션을 추가한다.

 

이와 같은 옵션은 번거로우니 package.json 파일에서 start 부분을 변경하여 JSON Server를 실행시킬 수 있다.

 

 

44.3.4 GET요청

todos 리소스에서 모든 todo를 취득한다. 

 

 

todos리소스에서 id를 사용하여 특정 todo를 취득한다.

 

44.3.5 POST 요청

todos 리소스에 새로운 todo를 생성한다. POST요청 시에는 setRequestHeader 메서드를 사용하여 요정 몸체에 담아 서버로 전송할 페이로드의 MIME타입을 지정해야한다.

 

 

44.3.6 PUT 

PUT은 특정 리소스 전체를 교체할 때 사용한다. 다음 예제는 todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체한다.

 

 

44.3.7 PATCH

PATCH는 특정 리소스의 일부를 수정할 때 사용한다. 다음 예제에서는 todos 리소스의 id로 todo를 특정하여 complete만 수정한다.

44.3.8 DELETE 요청

todos 리소스에서 id를 사용하여 todo를 삭제한다.

 

id:4가 삭제된 모습

 

Reference 

 모던 자바스크립트 Deep Dive _ 이웅모

Comments