[Express] CRUD 기능 만들기

이번 포스팅에서는 Express로 CRUD(Create, Read, Update, Delete) 기능을 구현하는 기본적인 흐름을 살펴보겠다.

실제로 DB와 연결하지는 않았고, Express의 CRUD 처리 과정과 코드 흐름을 이해하는 데 집중했다.

 

 

 

🐱READ - 데이터 조회

전체 데이터 조회

전체 고양이 데이터를 조회하는 엔드포인트다.

데이터베이스에서 데이터를 가져오는 것처럼 가정하고 Cat이라는 객체에서 데이터를 불러온다.

만약 데이터 조회 중 에러가 발생하면 에러 메시지를 반환한다.

import { error } from "console";
import * as express from "express";
import { Cat, CatType } from "./app.model";

const app: express.Express = express();
const port: number = 8000;


//* READ 고양이 전체 데이터 다 조회
app.get("/cats", (req, res) => {
  try {
    const cates = Cat; //목 데이터지만 DB에서 가져왔다고 가정
    res.status(200).send({
      success: true,
      data: {
        cates,
      },
    });
  } catch (error) { //만약 가져오던 중 에러가 발생했다면 에러 메세지 반환
    const errorMessage =
      error instanceof Error ? error.message : "Unknown error";
    res.status(400).send({ success: false, errorMessage }); //요렇게 헤더에서 status도 쓸 수 있다.
  }
});


app.listen(port, () => {
  console.log(`server is on http://localhost:${port}`);
});

 

 

잘 가져와짐

 

 

 

 

임의로 에러를 발생시켜 보자

//* READ 고양이 전체 데이터 다 조회
app.get("/cats", (req, res) => {
  try {
    const cates = Cat; //목 데이터지만 DB에서 가져왔다고 가정
    throw new Error("DB connect error"); //임의 에러 발생
    res.status(200).send({
      success: true,
      data: {
        cates,
      },
    });
  } catch (error) {
    const errorMessage =
      error instanceof Error ? error.message : "Unknown error";
    res.status(400).send({ success: false, errorMessage });
  }
});

에러 메세지도 잘 나옴

 

 

 

단일 데이터 조회 (동적 라우팅)

특정 id를 가진 고양이 데이터를 조회하기 위해 동적 라우팅을 사용한다.

:id와 같이 URL에 :을 붙여주면 이 부분이 파라미터로 처리되며, 요청 URL에서 고양이 id 값을 받아와서 해당 id에 해당하는 데이터를 찾아 반환할 수 있다.

 

이런식으로 :을 붙이면 얘 자체가 파라미터가 된다.

이제 이걸 변수처럼 쓸 수 있다.

이런식으로 param에 id라는 이름으로 넣어주면

param에서 id를 가져와 맞는 id를 가진 cat를 찾아와 반환할 수 있다.

 

 

잘 나옴 ㅎ.ㅎ

 

 

🐱CREATE - 데이터 생성

데이터를 생성할 때는 보통 요청 본문(body)에 JSON 형식으로 데이터를 보낸다.

Express에서 JSON 데이터를 처리하려면 JSON 파싱 미들웨어를 사용해야 한다.

이를 통해 클라이언트에서 보낸 데이터를 쉽게 읽고 처리할 수 있다.

 

이렇게 express에서 제공하는 미들웨어를 사용하면 json형식을 읽어올 수 있다.

 

 

🐱UPDATE - 데이터 수정

PUT (전체 데이터 수정)

PUT 요청은 기존 데이터를 완전히 덮어씌울 때 사용한다. 특정 id에 해당하는 고양이 데이터를 찾은 후, 요청 본문(body)의 데이터로 대체한다.

 

PATCH (부분 데이터 수정)

PATCH 요청은 데이터의 일부만 수정할 때 사용한다. 스프레드 문법을 이용해 기존 데이터에 새로운 데이터를 병합하여, 요청 본문에 있는 속성만 업데이트한다.

  //PUT
  router.put('/cat/:id', (req,res) => {
    try{
    const params = req.params;
    const body = req.body;
    let result;
    Cat.forEach((cat)=> {
        if(cat.id === params.id){
            cat = body;
            result = cat;
        }
    });
    res.status(200).send({
        success: true,
        data: {
          cat : result
        },
      });
}catch (error) {
    const errorMessage =
      error instanceof Error ? error.message : "Unknown error";
    res.status(400).send({ success: false, errorMessage });
  }
  })
  
    //PATCH
  router.put('/cat/:id', (req,res) => {
    try{
    const params = req.params;
    const body = req.body;
    let result;
    Cat.forEach((cat)=> {
       if(cat.id === params.id) {
       cat = {...cat, ...body}; //구조분해할당(뒤의 객체 우선)
       result = cat;
       }
    });
    res.status(200).send({
        success: true,
        data: {
          cat : result
        },
      });
}catch (error) {
    const errorMessage =
      error instanceof Error ? error.message : "Unknown error";
    res.status(400).send({ success: false, errorMessage });
  }
  })

 

 

 

🐱DELETE - 데이터 삭제

 

DELETE 요청은 특정 id에 해당하는 데이터를 삭제한다.

Cat 배열에서 해당 고양이 객체를 찾아 제거하고, 성공적으로 삭제되면 삭제된 데이터를 응답으로 반환한다.

만약 해당 id를 찾지 못하면 404 에러를 반환하도록 했다.

    //DELETE
      router.delete('/cat/:id', (req, res) => {
        try {
          const params = req.params;
          let result = null;
      
          // Cat 배열에서 해당 id의 cat 객체 삭제
          const index = Cat.findIndex((cat) => cat.id === params.id);
          if (index !== -1) {
            // 해당 cat 객체를 배열에서 제거하고, 삭제된 객체를 result에 저장
            result = Cat.splice(index, 1)[0];
          }
          // 응답
          if (result) {
            res.status(200).send({
              success: true,
              data: {
                deletedCat: result,
              },
            });
          } else {
            res.status(404).send({
              success: false,
              message: "Cat not found",
            });
          }
        } catch (error) {
          const errorMessage =
            error instanceof Error ? error.message : "Unknown error";
          res.status(400).send({ success: false, errorMessage });
        }
      });

 

 

 

이처럼 Express에서는 간단한 코드로 CRUD 기능을 구현할 수 있다.

지금은 DB와 연결되지 않은 상태에서의 기본적인 CRUD 흐름만을 구현했지만, 이를 바탕으로 DB 연결과 함께 더 복잡한 로직을 추가할 수 있다.

 

 

 

 

 

 

참고

탄탄한 백엔드 NestJs 강의 - 윤상석