RESTful API를 이해해보자!

minseok oh·2022년 3월 24일
1

Comento(React)

목록 보기
6/7

#코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무

필수 링크
https://bit.ly/3D9XCOz

들어가기 전에


내 경험담으로 프로젝트를 위해 팀을 구성을 하게 되는데 그때 최소 4명으로 구성하게된다. 프론트엔드 1명, 백엔드 1명, 디자이너 1명, PM 1명 + ⍺ 이렇게 구성된 팀으로 프로젝트를 진행하게 되며 그 사이 백엔드 개발자와 프론트 엔드 개발자간에 의사소통이 필요할 때가 있다 바로 실데이터를 어떻게 받아 올지 혹은 실 데이터를 어떻게 저장을 하면 좀 더 효율적으로 저장이 될지? 등이 있다 이때 당시 의사소통을 하며 정리한 내용을 명세서로 정리할 필요가 있는데 바로 API 문서이다!

백엔드 개발자와 어떻게 협업을 하나?


  • 대부분의 백엔드는 API 서버로 구축된다
  • 프론트엔드와 백엔드도 대부분 API로 데이터를 주고 받기 때문에 API를 이해하고 있으면, 커뮤니케이션이 어렵지 않다!

API란 ??


  • 클라이언트와 서버 간에 데이터를 주고받는 방식을 정의한 것(규격)
  • 적절한 요청을 하였을 때, 그에 맞는 응답을 보내주는 창구(Endpoint)를 웹을 통해 노출하는 것

API 방법론


  • 대표적인 API 방법론으로는 REST API, SOAP API, GraphQL이 있다(경쟁 관계)

REST API

  • 네트워크를 통해서 컴퓨터들끼리 통신할 수 있게 해주는 아키텍처 스타일
    • 인터넷 식별자(URI)가 HTTP 프로토콜 기반
    • 브라우저 간 호환성이 좋은 JSON 방식의 데이터 포맷 사용
    • 단일 인터페이스 사용: 해당 API를 사용하는 애플리케이션들이 동일한 경로를 사용해 접속

SOAP API

  • 그 자체로 프로토콜
    • 보안이나 메시지 전송 등에 있어 엄격한 규약을 가짐
    • 데이터 포맷으로 XML만 사용
    • 자체적인 ACID 기준이 있어 데이터의 변형을 줄여줌
    • (ACID는 데이터베이스 트랜잭션이 안전하게 수행된다는 것을 보장하기 위한 성질)

GraphQL

  • Fackbook에서 말한 GraphQL 제작 이유

    • RESTful API 로는 다양한 기종에서 필요한 정보들을 일일히 구현하는 것이 힘들었다
    • iOS와 Android 에서 필요한 정보들이 조금씩 달랐고, 그 다른 부분마다 API를 구현하는 것이 힘들었다
  • 문제를 해결하기 위해, 정보를 사용하는 측(클라이언트)에서

    • 원하는 대로 정보를 가져올 수 있고,
    • 보다 편하게 정보를 수정할 수 있도록 하는 표준화된 Query language 를 만들게 되었다
  • GraphQL API 는 주로 하나의 Endpoint를 사용한다

  • GraphQL API 는 요청할 때 사용한 Query 문에 따라, 응답의 구조가 달라진다.

< 장점 >

  1. HTTP 요청의 횟수를 줄일 수 있다.
    • RESTful은 각 Resoure 종류 별로 요청을 해야하고, 따라서 요청 횟수가 필요한 Resoure의 종류에 비례
    • 반면 GraphQL은 원하는 정보를 하나의 Query에 모두 담아 요청하는 것이 가능하다
  2. HTTP 응답의 Size를 줄일 수 있다.
    • RESTful은 응답의 형태가 정해져있고, 따라서 필요한 정보만 부분적으로 요청하는 것이 힘들다
    • 반면 GraphQL은 원하는 대로 정보를 요청하는 것이 가능하다

<단점>

  1. File 전송 등 Text 만으로 하기 힘든 내용들을 처리하기 복잡하다
  2. 고정된 요청과 응답만 필요한 경우에는 Query로 인해 요청의 크가가 RESTful API의 경우보다 더 커진다
  3. 재귀적인 Query가 불가능하다.

REST 란?


REST(Representational State Transfer)
1. HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시하고
2. HTTP Method(GET, POST, PUT, DELETE)를 통해
3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미

자원(Resource): URI

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

행위(Verb): HTTP Method

  • HTTP 프로토콜의 Method를 사용한다
  • HTTP 프로토콜은 GET, POST, PUT, DELETE 와 같은 메서드를 제공한다.

표현(Representation of Resource)

  • Client가 자원의 상태에 대한 조작을 요청하면 Server는 이에 적잘한 응답(Representation)을 보낸다.
  • REST에서 하나의 자원 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.

REST의 특징


  • Server-Client(서버-클라이언트 구조)
  • Stateless(무상태)
  • Cacheable(캐시 처리 가능)
  • Layered System(계층화)
  • Code-On-Demand(optional)
  • Uniform Interface(인터페이스 일관성)

그럼 REST가 필요한 이유가 도대체 뭐냐?


  • 애플리케이션 분리 및 통합
  • 다양한 클라이언트의 등장
  • 최근의 서버 프로그램은 다양한 브라우저와 안드로이드폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야 한다.
  • 이러한 멀티 플랫폼에 대한 지원을 위해 서비스 자원에 대한 아키텍처를 세우고 이용하는 방법을 모색한 결과, REST에 관심을 가지게 됨

REST API란?


  • REST API란 REST의 원리를 따르는 API를 의미
  • 올바르게 설계하기 위해서 지켜야 하는 규칙이 있다

REST API 설계

  1. resource 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다, resource의 자원은 복수 명사를 사용해야 한다.

    Bad Example : GET /Member/1
    Good Example : GET /members/1

  2. 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다

  • URI예 HTTP Method가 들어가면 안된다

    Bad Example : GET /members/delete/1
    Good Example : DELETE /members/1

  • 행위에 대한 동사 표현(CRUD 기능)이 들어가면 안된다.

    Bad Example : GET /members/show/1 , GET /members/insert/1
    Good Example : GET /members/1 , POST /members/1

  • 경로 부분 중 변하는 부분은 유일한 값으로 대체한다

    student를 생성하는 route: POST/students
    id=12인 student를 삭제하는 route: DELETE /students/12

  1. 슬래시 구분자(/)는 계층 관계를 나타내는데 사용한다, 마지막 문자로 슬래시 구분자를 포함하지 않는다

    Bad Example : /houses/apartments/
    Good Example : /houses/apartments

  2. 리소스 간에는 연관 관계가 있는 경우는
    ( /리소스명/리소스ID/관계가 있는 다른 리소스명 )

    GET /users/{user-id}/devices

  3. 하이픈(-)은 URI 가독성을 높이는데 사용

    Bad Example : GET /users/{user_id}/devices
    Good Example : GET /users/{user-id}/devices

  4. 파일확장자는 URI에 포함하지 않는다.(필요한 경우 Accept header를 사용)

    Bad Example : GET /members/soccer/345/photo.png
    Good Example : GET /members/soccer/345/photo

profile
현재는 FE(Front) 개발자 미래엔 FSE(Full Stack) 개발자

0개의 댓글