ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Project] REST API
    경남_ABC_FE/Section_4 2023. 12. 19. 11:36

    REST API 디자인

    REST는 "Representational State Transfer"의 약자

    REST API는 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말한다.

     

    REST 성숙도 모델 - 0단계

    0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 된다. 물론 이 경우, 해당 API를 REST API라고 할 수는 없다.

     

    REST 성숙도 모델 - 1단계

    모든 자원은 개별 리소스에 맞는 엔드포인트를 사용해야 하며 요청하고 받는 자원에 대한 정보를 응답으로 전달해야 한다는 것이 1단계의 핵심이다.

    엔드포인트 작성 시에는 동사, HTTP 메서드, 혹은 어떤 행위에 대한 단어 사용은 지양하고, 리소스에 집중해 명사 형태의 단어로 작성하는 것이 바람직한 방법이다.

    더불어 요청에 따른 응답으로 리소스를 전달할 때에도 사용한 리소스에 대한 정보와 함께 리소스 사용에 대한 성공/실패 여부를 반환해야 한다.

     

    REST 성숙도 모델 - 2단계

    2단계에서는 CRUD에 맞게 적절한 HTTP 메서드를 사용하는 것에 중점을 둔다.

     

    HTTP 메서드를 사용할 때 몇 가지 규칙에도 유의해야 한다.

    • GET 메서드 같은 경우는 서버의 데이터를 변화시키지 않는 요청에 사용해야 한다.
    • POST 메서드는 요청마다 새로운 리소스를 생성하고 PUT 메서드는 요청마다 같은 리소스를 반환한다. 멱등성(매 요청마다 같은 리소스를 반환하는 특징)을 가지는 메서드 PUT과 그렇지 않은 메서드 POST는 구분하여 사용해야 한다.
    • PUT 메서드와 PATCH 메서드도 구분하여 사용해야 한다. PUT은 교체, PATCH는 수정의 용도로 사용한다.

    REST 성숙도 모델 - 3단계

    3단계의 요청은 2단계와 동일하지만, 응답에는 리소스의 URI를 포함한 링크 요소를 삽입하여 작성해야 한다.

    이때 응답에 들어가게 되는 링크 요소는 응답을 받은 다음에 할 수 있는 다양한 액션들을 위해 많은 하이퍼미디어 컨트롤을 포함하고 있다.

    응답 내에 새로운 링크를 넣어 새로운 기능에 접근할 수 있도록 하는 것이 3단계의 핵심 포인트이다.

    이를 HATEOAS(Hypertext As The Engine Of Application State) 원칙을 준수했다고도 한다.

     

    Open API와 API Key

     

    Open API

    공공데이터에 쉽게 접근할 수 있도록 정부는 Open API의 형태로 공공데이터를 제공하고 있다.

     

    API Key

    API를 이용하기 위해서는 API Key가 필요하다. 

    API Key가 필요한 경우에는 로그인한 이용자에게 자원에 접근할 수 있는 권한을 API Key의 형태로 제공하고, 데이터를 요청할 때 API Key를 같이 전달해야 원하는 응답을 받을 수 있다.

     

    Postman

    브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다.

    테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 한다.

    -> 그래서 사용하는 것 중 하나가 JSON Server이다.

    JSON Server

    JSON Server를 사용할 때 db.json 파일에 JSON 형식으로 더미 데이터를 저장할 수 있다. 중요한 점은 각 항목에 숫자 형태의 id가 포함되어야 한다는 것이다.

     

    json_server 폴더 안에 server.js를 생성한다.

    const jsonServer = require('json-server');
    
    const server = jsonServer.create();
    const router = jsonServer.router('json_server/db.json');
    
    const middlewares = jsonServer.defaults();  // 기본 미들웨어 가져오기 (CORS 포함)
    
    server.use(middlewares);  // 기본 미들웨어 사용
    server.use(router);  // json-server의 라우터 사용
    
    server.listen(5001, () => {
      console.log('JSON Server is running on http://localhost:5001');
    });

     

    프로젝트 폴더 안의 package.json을 열어 서버를 실행하는 코드를 집어 넣는다.

     

    "scripts": {
        "start": "react-scripts start",
        ....
        "server": "json-server --watch ./json_server/db.json"
      },
Designed by Tistory.