나의 첫 'REST API' 사용

그놈의 REST API...

개발 공부를 하면서 수도 없이 들어왔고 목격했던 용어지만

정확한 뜻은 전혀 알지 못했다...

그러다가 오늘 유데미 JS 강의를 들으면서 드디어 처음으로 REST API라는 것을 사용해보았다.

 

사용 계기

유데미 강좌에 클라이언트(프론트)에서 서버(백)로 POST 요청을 보내는 과정이 있었다.

• 클라이언트단 코드 (프론트)

// node.js 서버의 '/add-location'으로 요청 보내기
fetch("http://localhost:3000/add-location", {
  method: "POST",
  // body에 JSON 형식으로 제공해야함
  body: JSON.stringify({
    address: address,
    lat: coordinates.lat,
    lng: coordinates.lng,
  }),
  headers: {
    "Content-Type": "application/json",
  },
})
  // 보낸 요청에 대한 응답 받아서 json으로 변환하고,
  .then((response) => {
    return response.json();
  })
  // 변환된 데이터 받아서 확인
  .then((data) => {
    console.log(data);
  });

위 코드는 클라이언트에서 http://localhost:3000/add-location 으로 POST 요청을 보내는데, 해당 주소가 바로 서버단이다.

 

• 서버단 코드 (백)

const express = require("express");
const router = express.Router();

// 임시 백엔드 대체용 스토리지 (서버 끄면 데이터 날라감)
const locationStorage = {
  locations: [],
};

// 라우트1: post 요청을 보내야만 익명함수 실행
router.post("/add-location", (req, res, next) => {
  // 요청 받은 데이터를 locationStorage에 넣음
  locationStorage.locations.push({
    id: Math.random(),
    address: req.body.address,
    coords: { lat: req.body.lat, lng: req.body.lng },
  });

  res.json({ message: "위치를 저장했습니다!" }); // json 데이터로 회신(응답)
});

// 라우트2: get 요청
router.get("/location");

module.exports = router; // express.js식 export

여기서 router.post("/add-location", ~) 구문이 보이는가?

여기서 바로 POST 요청을 받고 그에 따른 응답을 회신하는 작업이 일어난다. add-location 앞에 슬래시(/) 안 붙여서 혼났다..ㅋ

 

이렇게 클라이언트와 서버가 분리되어 있는 프로젝트에서 서로 요청을 주고 받을 수 있도록 사용되는 것이 바로 REST API다.

그러니까 여기서 사용된 REST API는 바로 Express.js 인 것이다!

---

REST란? (Representational State Transfer)

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

=> HTTP 프로토콜을 기반으로 자원을 URI로 표현하고, CRUD 연산을 HTTP 메서드(GET, POST, PUT, DELETE)로 매핑하는 것.