본문 바로가기
JavaScript

[Deep dive] 44장 REST API

쥬크버그 2023. 8. 23. 18:02

REST(REpresentational State Transfer)

- HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐

 

RESTful

- REST의 기본 원칙을 성실히 지킨 서비스 디자인 

 

REST API

- REST를 기반으로 서비스 API를 구현한 것 

 

44.1 REST API의 구성 

 

- 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성 

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

 

44.2 REST API 설계 원칙 

 

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

 - 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용 

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

#good
GET /todos/1


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

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

 - GET , POST, PUT, PATCH, DELETE

 - 리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다

#bad
GET/todos/delete/1

#good
DELETE/todos/1

 

44.3 JSON Server를 이용한 REST API 실습 

 

- HTTP 요청을 전송하고 응답을 받으려면 서버가 필요 

- JSON Server을 사용해 가상 REST API 서버를 구축

 

44.3.1 JSON Server 설치 

- JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴 

- npm을 사용하여 JSON Server 설치 

npm i -g json-server

 

44.3.2 db.json 파일 생성

- db.json 파일은 리소스를 제공하는 데이터베이스 역할을 함

 

44.3.3 JOSN Server 실행 

- JSON Server가 데이터베이스 역할을 하는 db.json 파일의 변경을 감지하게 하려면 watch 옵션 추가 

//기본 포트(3000) 사용/ watch 옵션 적용 
json-server --watch db.json

- 기본 포트는 3000. 포트를 변경하려면 port 옵션 추가 

//포트 변경/watch 옵션 적용
json-server --watch db.json--port 5000

 

 

44.3.4 GET 요청 

- todos 리소스에서 모든 todo를 취득(index)

<!DOCTYPE html>
<hmtl>
  <body>
  <pre></pre>
  <script>
    const xhr = new XMLHttpRequest();

    //HTTP 요청 초기화 
    //todos 리소스에서 모든 todo를 취득(index)
    xhr.open('GET','/todos');

    //HTTP 요청 전송
    xhr.send();

    //load 이벤트는 요청이 성공적으로 완료된 경우 발생
    xhr.onload = () => {
      if(xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      }
      else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
  </script>
</body>
</hmtl>

 

- tods 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)

<!DOCTYPE html>
<hmtl>
  <body>
  <pre></pre>
  <script>
    const xhr = new XMLHttpRequest();

    //HTTP 요청 초기화 
    //todos 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)
    xhr.open('GET','/todos/1');

    //HTTP 요청 전송
    xhr.send();

    //load 이벤트는 요청이 성공적으로 완료된 경우 발생
    xhr.onload = () => {
      if(xhr.status === 200) {
        document.querySelector('pre').textContent = xhr.response;
      }
      else {
        console.error('Error', xhr.status, xhr.statusText);
      }
    };
  </script>
</body>
</hmtl>

 

44.3.5 POST 요청 

- todos 리소스에 새로운 todo를 생성

- POST 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야함

<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();

      xhr.open('POST','/todos');

      //요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정 
      xhr.setRequestHeader('content-type', 'application/json');

      xhr.send(JSON.stringify({id:4, content:'Angular',completed:false}));

      xhr.onload = () => {
        if(xhr.status === 200 || xhr.status === 201) {
          document.querySelector('pre').textContent = xhr.response;
        }
        else {
          console.log('Error', xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

 

44.3.6 PUT 요청 

- PUT은 특정 리소스 전체를 교체할 때 사용 

- todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체 

- PUT 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정

<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
      
      //todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체 
      xhr.open('PUT','/todos/4');

      //요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정 
      xhr.setRequestHeader('content-type', 'application/json');

      //리소스 전체를 교체하기 위해 페이로드를 서버에 전송
      xhr.send(JSON.stringify({id:4, content:'react',completed:true}));

      xhr.onload = () => {
        if(xhr.status === 200) {
          document.querySelector('pre').textContent = xhr.response;
        }
        else {
          console.log('Error', xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

 

44.3.7 PATCH 요청 

- PATCH는 특정 리소스의 일부를 수정할 떄 사용

- todos 리소스의 id로 todo를 특정하여 completed만 수정 

- PATCH 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정

<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();

      xhr.open('PATCH','/todos/4');

      //요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정 
      xhr.setRequestHeader('content-type', 'application/json');
      
      //리소스를 수정하기 위해 페이로드를 서버에 전송
      xhr.send(JSON.stringify({completed:false}));

      xhr.onload = () => {
        if(xhr.status === 200) {
          document.querySelector('pre').textContent = xhr.response;
        }
        else {
          console.log('Error', xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

 

44.3.8 DELETE 요청 

- todos 리소스에서 id를 사용하여 todo를 삭제 

<!DOCTYPE html>
<html>
  <body>
    <pre></pre>
    <script>
      const xhr = new XMLHttpRequest();
     
      //todos 리소스에서 id를 사용하여 todo를 삭제 
      xhr.open('PATCH','/todos/4');

      xhr.send();
      
      xhr.onload = () => {
        if(xhr.status === 200) {
          document.querySelector('pre').textContent = xhr.response;
        }
        else {
          console.log('Error', xhr.status, xhr.statusText);
        }
      };
    </script>
  </body>
</html>

'JavaScript' 카테고리의 다른 글

[Deep dive] 46장 제너레이터와 async/await  (0) 2023.08.24
[Deep dive] 45장 프로미스  (0) 2023.08.24
[Deep dive] 43장 Ajax  (0) 2023.08.23
[Deep dive] 42장 비동기 프로그래밍  (0) 2023.08.23
[Deep dive] 41장 타이머  (0) 2023.08.22

'JavaScript' Related Articles

티스토리툴바