[Web] REST API란? REST API 구성/특징/규칙/RESTful/Http method

FrontEnd/Web

[Web] REST API란? REST API 구성/특징/규칙/RESTful/Http method

하노정 2022. 10. 9. 00:57

REST API

REST(Representational State Transfer) API는 개발된 ‘프론트엔드에서 백엔드의 데이터를 가져올 때 가장 많이 사용되는 자원(Resource) 처리 방식 ‘ 입니다.

REST API를 따르는 API가 세상에 많이 존재하기 때문에 몇 가지 규칙을 알고 있으면 다른 서비스의 API를 사용하는 것에 거부감을 느끼지 않을 것입니다.

REST 구성

REST API는 다음의 구성으로 이루어져 있습니다.

자원(Resource) -URI
행위(Verb) - HTTP METHOD
표현(Representations)

REST API는 URI로 자원(Resource)을 요청하여 특정 형태로 표현(Representations)한다는 것과 HTTP METHOD를 적극적으로 활용해 행위(Verb)를 나타내는 것입니다.

예를 들어 GET/users는 모든 user의 정보를 응답으로 달라는 것이고, DELETE/user/1은 user id:1에 해당하는 user를 제거하라는 것입니다.

REST API의 요청으로 나오는 응답은 대체로 JSON으로 표현되므로 직관적으로 의미가 파악되어 읽기 쉽습니다.

json

{
	"name":"고양이",
	"age" : 3, 
	"weight" : 3.5
}

REST 특징

REST는 보안을 위해서 HTTPS를 사용합니다. REST API는 메시지만 보고도 쉽게 이해할 수 있고, 서버는 API 제공만 하고 클라이언트는 사용자 인증이나 로그인 정보 등을 직접 관리하는 구조로 각각 역할이 확실히 구분되어 개발해야 할 내용이 명확해집니다.

RESTful

RESTful은 ‘ REST를 REST답게 쓰기 위한 방법 ‘ 인데 누군가가 공식적으로 발표한 것은 아닙니다. REST 원리를 따르는 시스템을 RESTful이란 용어로 지칭합니다. REST API를 제공하는 웹 서비스를 RESTful하다고 할 수 있습니다.

REST API 디자인 가이드

REST를 보다 RESTful하게 사용하기 위한 것입니다.

URI로 자원을 표현하고, 자원에 대한 행위는 HTTP METHOD를 사용합니다. 이 두가지가 핵심이므로 이는 꼭 기억해야 합니다.

REST API 중심 규칙

URI는 정보의 자원을 표현해야 합니다.
자원에 대한 행위는 HTTP METHOD(GET, POST, PUT, DELETE 등)으로 표현해야 합니다.

GET /members/show/1     (x)
GET /members/1          (o)

HTTP METHOD

다음 4가지의 method를 가지고 자원(Resource)을 CRUD할 수 있습니다.

GET: GE T을 통해 해당 리소스를 조회합니다. 리소스를 조회하고 정보를 가져온다. URL에 특정 리소스를 붙여 정보를 요청하고, Request Body에 담아서 보내지 않습니다.
POST: POST를 통해 해당 URI를 요청하면 리소스를 생성합니다. GET과 다르게 URI로 보내지 않고 Request Body에 담아서 보냅니다. 이때 body에 담긴 내용물이 어떤 타입(x-www-form-urlencoded, json, xml 등)인지 보내야할 때 header에 추가 내용을 담으면 됩니다.
DELETE: DELETE를 통해 해당 리소스를 삭제합니다.
PUT: PUT을 통해 해당 리소스를 수정합니다. 리소스 전체 수정을 말하며 리소스 수정 시 모든 필드가 필요합니다.
PATCH: PATCH를 통해 해당 리소스를 수정합니다. 리소스 부분 수정을 말하며 리소스 수정 시 일부 필드만 필요합니다.

HTTP 응답상태코드

REST API는 리소스에 대한 응답을 잘 주는 것까지 포함되어야 합니다.

흔히 들어본 200, 404와 같은 것을 말합니다.

200: 클라이언트의 요청을 정상적으로 수행함.
400: 클라이언트의 요청이 부적절할 경우 사용함.
500: 서버에 문제가 있을 경우 사용함.

이 외에도 많은 응답상태코드가 있기 때문에 클라이언트 측에서는 문제가 발생했을 때 응답상태코드를 구글링하면 해결방법을 찾을 수 있습니다.

RESOURCE 접근

Query Parameter: GET 메소드를 사용해서 데이터를 서버에 전송할 때 ?변수=값 으로 보내는 것을 말합니다.

/post?post_id= 
/post?post_id=6&key1=value1

Path Variable: 데이터를 서버에 전송할 때 /값 으로 보내는 것을 말합니다.

/post/6

REQUEST HEADER/BODY

HTTP 통신 방식을 이용할 때 클라이언트와 서버 간에 요청 및 응답을 전송할 수 있습니다. 요청 메시지, 응답 메시지는 공통 포맷이고 HTTP header와 body를 포함합니다.

GET 방식처럼 데이터를 body에 담아 보낼 필요가 없을 때는 URI에 리소스 접근하는 방식만 신경쓰면 됩니다.

POST 방식처럼 데이터를 body에 담아 보낼 필요가 있을 때는 body에 들어갈 내용을 따로 정리해줘야 하고, body에 담긴 내용물이 어떤 타입인지 보내야 할 때 header에 Content-Type과 같은 내용을 담습니다. 수많은 타입이 존재하지만 대표적으로 Application/json과 같은 것이 있습니다.

header에는 필요에 따라 토큰을 넣어주기도 하고 다른 속성값을 넣어주기도 합니다. 이는 원하는 구현 방식에 따라 구글링하면 나옵니다. header와 body를 잘 정의해 request하고, response로 원하는 처리를 하고 응답상태코드로 예외처리도 해주면 좋습니다.

const modifyItem = {
        "postId" : postId,
        "title" : updateTitle,
        "content" : updateContent,
        "deadline" : updateDeadline,
        "postUserId" : 1
    }

fetch(`http://moa.shop:9000/posts/${postId}` , {
        method: "PATCH",
        headers: {
            'x-access-token' : my_jwt,
            'Content-Type': 'application/json'            
        },
        body: JSON.stringify(modifyItem)
    })

.then((response) => response.json())
    .then((response2) => {
        if (response2.code == 2022) {
            alert(response2.message);
        } else if (response2.code == 2022) {
            alert(response2.message);
        } else if (response2.code == 3020) {
            alert(response2.message);
        } else {
            gotoMain();
        }
        
        console.log(response2.result);
    })
    .catch((error) => console.log("error", error))