27일차 - Node.js 입문(3) REST API 개발 let's go

이상민·2024년 9월 4일

TIL node.js 내일배움캠프

TIL

목록 보기

27/48

REST API 개발하기

REST API 를 만들어보자👶

Ⅰ. 상품 목록 조회 (/api/goods) GET Method
Ⅱ. 상품 상세 조회 (/api/goods/:goodsld) GET Method
Ⅲ. 상품 등록 (/api/goods/) POST Method

상품 목록 조회 API

🤷‍♂️상품 목록을 구현하려면 어떻게 해야 할까?

상품 목록 조회 API에서는 모든 상품(goods)이 한번에 전달 되어야한다.
예를들면 GET 메소드를 이용해서 /goods 라는 주소로 요청을 보냈을 때, 모든 상품 목록이 응답(response)해서 json 포맷으로 상품 목록이 보여야 함.
우리는 아직 데이터베이스를 사용하지 않기 때문에 routes 폴더에 goods.js 파일에서 아래의 상품 json 데이터를 저장

상품 예시 데이터

// /routes/goods.js

const goods = [
  {
    goodsId: 1,
    name: '상품 1',
    thumbnailUrl:
      'https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg',
    category: 'drink',
    price: 6.2,
  },
  {
    goodsId: 2,
    name: '상품 2',
    thumbnailUrl:
      'https://cdn.pixabay.com/photo/2014/08/26/19/19/wine-428316_1280.jpg',
    category: 'drink',
    price: 0.11,
  },
  {
    goodsId: 3,
    name: '상품 3',
    thumbnailUrl:
      'https://cdn.pixabay.com/photo/2016/09/07/02/12/frogs-1650658_1280.jpg',
    category: 'drink',
    price: 2.2,
  },
  {
    goodsId: 4,
    name: '상품 4',
    thumbnailUrl:
      'https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg',
    category: 'drink',
    price: 0.1,
  },
];

위에 예시 데이터를 routes/goods.js 에 넣은 뒤 http://localhost:3000/api/goods 에 접속했을 때 아래와 같이 나오면 성공이다.

상품 목록 상세 조회 API 구현하기

먼저, /routes/goods.js 파일에 아래 상품 예시 데이터를 삽입해준다.

/** 상품 상세 조회 **/
// localhost:3000/api/goods/:goodsId GET
router.get('/goods/:goodsId', (req, res) => {
  // 1. req.params 를 통해 상품의 id를 조회하고,
  // 2. 상품 id와 일치하는 데이터를 찾고,
  // 3. 조회된 상품 정보를 Response로 Return 한다.
  const goodsId = req.params.goodsId; // 1

  const findgoods = goods.find((oneGoods) => oneGoods.goodsId === +goodsId); // 2

  return res.status(200).json({ goods: findgoods }); // 3
});

🎈이제 localhost:3000/api/goods/1,2,3,4 주소로 GET 요청을 보낼 때마다 아래와 같이 상품 id에 일치하는 상품 목록을 JSON 형태로 전달받을 수 있다!!

✅ 상품 등록 API

상품 등록 API를 구현하려면 먼저 클라이언트가 요청(Request)시 전달하는 상품의 정보(body data)를 서버로 전달받아야한다.

품 등록 API는 ‘데이터를 저장’하는 역할을 담당하므로, Http 메서드 중에서는 데이터를 생성하는 POST 메서드를 이용하여 구현

POST 메서드는 클라이언트가 서버로 보내는 데이터를 전송하기 위해 사용되는 메서드로, 주로 서버의 리소스를 생성할 때 사용한다.

구현하기에 앞서 세팅

POST 메서드의 경우 클라이언트가 전달하는 데이터를 수신해야한다. 이 때, 클라이언트가 전달하는 데이터는 Express.js에서 req.body로 접근하여 사용할 수 있음.
BUT, Express.js에서는 req.body에 접근하기 위해서는 Body Parser라는 미들웨어를 적용해야한다.
Body Parser는 클라이언트가 전송하는 데이터를 해석하여 req.body 객체로 만들어주는 역할로 아래와 같이 Body Parser는 app.js파일에 추가하여, body에 접근이 가능하도록 설정해야 한다.

// app.js

import express from 'express';
import goodsRouter from './routes/goods.js';

const app = express();
const PORT = 3000;

// Express에서 req.body에 접근하여, body 데이터를 사용할 수 있도록 설정하는 미들웨어
app.use(express.json()); 
// json 형태로 서버에 body 데이터를 전달하면, req.body에 데이터를 변환하여 넣어준다.
app.use(express.urlencoded({ extended: true }));
// form content type에서 body 데이터를 전달하면, req.body에 데이터를 변환하여 넣어준다.

// localhost:3000/api -> goodsRouter, newsRouter
app.use('/api', [goodsRouter, newsRouter]);

app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

본격적으로 상품 등록 API 구현해보자🎃

🎈 1. 먼저, /goods/ 경로로 POST 요청이 들어올 때 실행되는 API를 구현한다.

/** 상품 등록 **/
// localhost:3000/api/goods POST
router.post('/goods', (req, res) => {
});

🎈 2. 클라이언트가 전달한 데이터(body data)를 각각의 변수로 할당한다. 여기서, 새롭게 생성할 상품 id(goodsId) 또한 새롭게 만들어 준다.

/** 상품 등록 **/
// localhost:3000/api/goods POST
router.post('/goods', (req, res) => {
  const name = req.body.name;
  const thumbnailUrl = req.body.thumbnailUrl;
  const category = req.body.category;
  const price = req.body.price;
    
  const goodsId = goods[goods.length - 1].goodsId + 1; // 현재 goodsId의 가장 큰 값 + 1});
  });

🎈 3. 전달받은 데이터를 바탕으로 상품을 생성하고, 상품 목록에 추가해주고, Http 상태 코드를 201로 전달

/** 상품 등록 **/
// localhost:3000/api/goods POST
router.post('/goods', (req, res) => {
  const name = req.body.name;
  const thumbnailUrl = req.body.thumbnailUrl;
  const category = req.body.category;
  const price = req.body.price;

  const goodsId = goods[goods.length - 1].goodsId + 1; // 현재 goodsId의 가장 큰 값 + 1

  const goodsItem = {
    goodsId: goodsId,
    name: name,
    thumbnailUrl: thumbnailUrl,
    category: category,
    price: price,
  };
  goods.push(goodsItem);
  // 마지막으로, 새롭게 생성된 상품 정보를 사용자에게 반환(Response)해준다. 
  // 이때, API가 ‘생성’의 역할을 담당하였기 때문에, Http 상태 코드를 201로 전달!!
  return res.status(201).json({ goods: goodsItem });
});

이제 insomnia로 들어가 요청값을 입력해보자 !!🪓

요청(Request)값 예시

http://localhost:3000/api/goods/ URL에 POST 요청을 아래의 Body 데이터를 담아서 전달해주자.

{
	"name": "상품 5",
	"thumbnailUrl": "https://cdn.pixabay.com/photo/2016/07/26/16/16/wine-1543170_960_720.jpg",
	"category": "drink",
	"price": 100.3
}