Express로 todo 리스트 만들기 2

Express로 todo 리스트 만들기 2

1. Express로 todo 리스트 조회하기

• 이제 todo를 조회하는 기능을 만들어봅시다. 
• #1. VSCode의 터미널에 다음과 같이 입력하여 mysql2를 설치해 줍니다.

npm i mysql2

 

• #2. app.js에 들어가서 다음과 같이 입력해 줍니다.

import express from "express";
import cors from "cors";
import mysql from "mysql2/promise";

// DB 설정
const pool = mysql.createPool({
  host: "localhost",
  user: "newbean",
  password: "juv0312",
  database: "todo_2024_02",
  waitForConnections: true, // 연결하는 동안 대기 여부
  connectionLimit: 10, // 연결 제한 개수
  queueLimit: 0, // 최대 0(제한없음)개의 연결 요청을 대기열에 추가
  dateStrings: true, // 날짜 출력
});

const app = express();

// CORS 미들웨어 추가
app.use(cors());

const port = 3000;

app.get("/:user_code/todos", async (req, res) => {
  const { user_code } = req.params;

  const [rows] = await pool.query(
    `
    SELECT *
    FROM todo
    WHERE user_code = ?
    ORDER BY id DESC
    `,
    [user_code]
  );

  res.json({
    resultCode: "S-1",
    msg: "성공",
    data: rows,
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

 

    → 되었으면 nodemon app.js를 입력하여 브라우저에 들어가면, 정상적으로 나오는 것을 확인할 수 있습니다.

 

2. 단건 조회

• 이번엔 원하는 조건만 조회할 수 있게 만들어봅시다. (여기서는 Postman을 사용하였습니다.)(Postman이란?)
• #1. postman에 들어가 todo_exam이라는 이름으로 collection을 새로 만듭니다.
• #2. 조회라는 이름의 request를 생성 후, 다음과 같이 입력하여 url을 설정해 줍니다.

http://localhost:3000/localhost/todos

 

    → 그러면, 다음과 같은 화면이 나오게 됩니다. send 버튼을 클릭하여 정상적으로 가져와 지는지 확인해 줍니다.

 

• #3. app.js에 다음과 같은 내용을 추가하여, 단건 조회가 가능하게 해줍니다.

// app.get(...);

app.get("/:user_code/todos/:no", async (req, res) => {
  const { user_code, no } = req.params;

  const [[todoRow]] = await pool.query(
    `
    SELECT *
    FROM todo
    WHERE user_code = ?
    AND no = ?
    `,
    [user_code, no]
  );

  if (todoRow == undefined) {
    res.status(404).json({
      resultCode: "F-1",
      msg: "not found",
    });
    return;
  }

  res.json({
    resultCode: "S-1",
    msg: "성공",
    data: todoRow,
  });
});

// app.listen(...);

 

    → /1로 확인해 보면 정상적으로 나오는 것을 확인할 수 있습니다.

 

    → postman도 새로 request를 만들어서 확인해 보면, 정상적으로 나오는 것을 확인할 수 있습니다.

 

3. 삭제

• 이번엔 원하는 no의 todo 리스트를 삭제해 봅시다. 
• #1. app.js에 다음과 같은 내용을 추가하여, 삭제가 가능하게 해줍니다.

// app.get(...)

app.delete("/:user_code/todos/:no", async (req, res) => {
  const { user_code, no } = req.params;

  const [[todoRow]] = await pool.query(
    `
    SELECT *
    FROM todo
    WHERE user_code = ?
    AND no = ?
    `,
    [user_code, no]
  );

  if (todoRow == undefined) {
    res.status(404).json({
      resultCode: "F-1",
      msg: "not found",
    });
    return;
  }

  await pool.query(
    `
    DELETE FROM todo
    WHERE user_code = ?
    AND no = ?
    `,
    [user_code, no]
  );

  res.json({
    resultCode: "S-1",
    msg: `${no}번 할 일을 삭제하였습니다.`,
  });
});

// app.listen(...)

 

• #2. postman에서 request를 생성한 후, delete로 변경한 뒤, url을 복사 붙여넣기 해줍니다.

    → 그 다음, send 버튼을 누르면 정상적으로 작동되는 것을 확인할 수 있습니다.

 

    → 브라우저에서도 정상적으로 삭제 되었습니다.

 

4. 정리하며

• 지금까지 todo 리스트 데이터 조회 및 삭제에 대해 알아보았습니다.
• 다음시간엔 todo 리스트 데이터 생성 및 삭제에 대해 알아보겠습니다.

Express로 todo 리스트 만들기 3

 

※ Git 주소

todo 리스트 조회 및 단건조회 작업 · NewBean0312/todo-backend-2024-02@45310b8

todo 리스트 삭제 · NewBean0312/todo-backend-2024-02@d9325cc