모던 자바스크립트 : REST API

REST

• REST: HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처
  • HTTP/1.0과 1.1 스펙 작성에 참여
  • 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개
  • HTTP 장점을 최대한 활용할 수 있는 아키텍처로 REST 소개
• REST API : REST를 기반으로 서비스 API 구현한 것
• RESTful : REST의 기본 원칙을 성실히 지킨 서비스 디자인

 

1. REST API의 구성

• REST API는 자원, 행위, 표현의 3가지 요소로 구성됨
• REST : 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용 이해 가능

 

2. REST API의 설계 원칙

a. REST 에서 가장 중요한 기본적인 원칙

1. URI는 리소스를 표현
2. HTTP 요청 메서드는 행위에 대한 정의

b. URI는 리소스 표현

• 리소스를 식별할 수 있는 이름은 명사 사용

c. HTTP 요청 메서드는 행위에 대한 정의

• HTTP 요청 메서드 : 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법

 

3. JSON Server 이용한 REST API 실습

• HTTP 요청을 전송하고 응답 받으려면 서버 필요
• JSON Server 사용해 가상 REST API 서버 구축해 HTTP 요청을 전송하고 응답 받는 실습 진행

a. JSON sever 설치

• JSON Server는 json 파일 사용해 가상 REST API 서버 구축 할 수 있는 툴
• npm 사용해 JSON Server 설치

 

npm

• npm : 자바스크립트 패키지 매니저
• Node.js에서 사용할 수 있는 모듈들을 패키지화해 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI 제공
• 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지 검색해 재사용 가능

b. db.json 파일 생성

• 프로젝트 루트 폴어데 db.json 파일 생성
• db.json 파일은 리소스를 제공하는 데이터베이스 역할

c. JSON Server 실행

• 터미널에서 아래 명령어 입력해 JSON Server 실행
• JSON Server가 데이터베이스 역할을 하는 db.json 파일의 변경을 감지하게 하려면 watch 옵션 추가
• 기본포트 3000이고 포트 변경하려면 port 옵션 추가

• 매번 명령어 입력하기 번거로우니 package.json 파일의 scripts 수정해 JSON server 실행
• 터미널에서 npm start 명령어 입력해 JSON Server 실행

d. GET 요청

• JSON Server의 루트 폴더에 public 폴더 생성하고 JSON Server 중단 후 재실행
• public 폴더 다은 get_index.html 추가하고 브라우저에서 http://localhost:3000/get_index.html로 접속

• todos 리소스에서 id 사용해 특정 todo 취득
• public 폴더에 get_retrieve.html 추가하고 브라우저에서 http://localhost:3000/get_retrieve.html로 접속

e. POST 요청

• todos 리소스에 새로운 todo 생성
• POST 요청 시에는 setRequestHeader 메서드를 사용해 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입 지정해야함
• public 폴더에 post.html 추가 후 브라우저에서 http://localhost:3000/post.html로 접속

f. PUT 요청

• PUT : 특정 리소스 전체 교체 시 사용
• todos 리소스에서 id로 todo 특정해 id를 제외한 리소스 전체 교체
• PUT 요청 시에는 setRequestHeader 메서드 사용해 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입 지정
• public 폴더에 다음 put.html 추가하고 브라우저에서 http://localhost:3000/put.html로 접속

g. PATCH 요청

• PATCH : 특정 리소스 일부 수정 시 사용
• todos 리소스의 id로 todo를 특정해 compleated만 수정
• PATCH 요청 시에는 setRequestHeader 메서드 사용해 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입 지정
• public 폴더 다음 patch.html 추가 후 브라우저에서 http://localhost:3000/put.html로 접속

h. DELETE 요청

• todos 리소스에서 id 사용해 todo 삭제
• public 폴더에 delete.html 추가하고 브라우저에서 http://localhost:3000/delete.html로 접속

 

 

 

 

모던 자바스크립트 딥다이브 책을 정리한 내용입니다!!