Front-end/JavaScript

자바스크립트 RESTful

NiceKHJ 2024. 8. 31. 11:44

RESTful은 REST 아키텍처 스타일을 따르는 웹 서비스 입니다.

REST는 HTTP 프로토콜을 기반으로 웹 서비스의 설계 원칙을 정의하며, RESTful 웹 서비스는 이러한 원칙을 준수하여 구현됩니다. RESTful 웹 서비스는 웹의 기존 기능을 최대한 활용하는 데 중점을 둡니다.

 

 

REST의 주요 원칙

  1. 자원(Resource)
    • 모든 것은 자원으로 간주됩니다.
    • 자원은 URI(Uniform Resource Identifier)로 고유하게 식별됩니다.
    • 예 : `https://api.example.com/users/123`는 ID가 123인 사용자 자원입니다.
  2. 표현(Representation)
    • 자원은 JSON , XML , HTML 등 다양한 형태로 표현될 수 있습니다.
    • 클라이언트와 서버는 자원의 표현을 주고받습니다.
  3. 상태 전이(Stateless)
    • 각 요청은 독립적이고 상태가 없습니다.
    • 서버는 각 요청을 완전히 이해하기 위해 필요한 모든 정보를 요청에 포함시켜야 합니다.
    • 클라이언트의 상태는 클라이언트 측에서 관리됩니다.
  4. HTTP 메서드(HTTP Methods)
    • 자원에 대한 CRUD 작업은 HTTP 메서드로 정의됩니다.
      • GET : 자원의 표현을 가져옵니다.
      • POST : 새로운 자원을 생성합니다
      • PUT : 기존 자원을 업데이트합니다
      • DELETE : 자원을 삭제합니다
    • 예 : GET/users/123 는 ID가 123인 사용자의 정보를 가져옵니다.
  5. 계층화된 시스템(Layered System)
    • 클라이언트는 중간 서버(프록시 , 게이트웨이 등)와 상호작용할 수 있으며, 이러한 중간 서버는 요청을 필터링하거나 로드 밸런싱 등을 수행할 수 있습니다.

 

RESTful 웹 서비스의 설계 예

자원 기반 URI 설계

  • GET /users : 모든 사용자 정보 조회
  • POST /users : 새 사용자 생성
  • GET /users/123 : ID가 123인 사용자 정보 조회
  • PUT /users/123 : ID가 123인 사용자 정보 업데이트
  • DELETE /users/123 : ID가 123인 사용자 삭제

 

RESTful API의 장점

  • 단순하고 일관된 인터페이스 : HTTP 프로토콜을 활용하여 일관된 인터페이스를 제공하며, URL만 보고도 무슨 행동을 하는 API인지 명확히 알 수 있습니다.
  • 확장성 : Stateless한 설계로 인해 서버와 클라이언트의 역할이 명확하게 분리되어 확장이 용이합니다.
  • 유연성 : 다양한 표현 형식을 지원하며 클라이언트와 서버간의 느슨한 결합을 유지합니다.
  • 가독성 : URI를 통해 자원을 명확히 식별할 수 있어 이해하기 쉽습니다.

 

RESTful API의 단점

  • 표준 부족 : REST는 아키텍처 스타일로서 특정 구현 표준이 없기 때문에 일관된 구현이 어려울 수 있습니다.
  • 복잡한 연산의 비효율성 : 대량의 데이터나 복잡한 연산을 수행하는 경우 HTTP 요청/응답의 오버헤드가 성능 저하를 초래할 수 있습니다.
  • 상태 유지의 어려움 : Stateless 특성으로 인해 클라이언트의 상태를 유지하는 데 어려움이 있을 수 있습니다.

REST 와 RESTful의 차이점

  • REST : 아키텍처 스타일, 디자인 원칙을 의미함
  • RESTful : REST 원칙을 실제로 구현한 웹 서비스

 

GET 요청 예시

 

 

 

POST 요청 예시

 

 

 

REST API 사용 방법

  1. URL에는 동사를 쓰지말고 자원을 표시해야한다
    • 예 : /members/1 [O]    |    /getMember?id=1  [X]
  2. 동사는 HTTP 메서드로 표현합니다.
    • GET /api/posts/1 : ID가 1인 POST 글 조회
    • POST /api/posts : 새로운 POST 글 등록
    • PUT /api/posts/1 : 1번 POST 글 수정
    • DELETE /api/posts/1 : 1번 POST 글 삭제

 

* Fetch API는 클라이언트 측에서 REST API와 상호작용하기 위해 사용되는 JavaScript 함수