[Node.js] React Native + Node.js + MySQL To do list 만들기 4 - Express로 CRUD 구현하기 (Building a CRUD API with Express)

안녕하세요 Foma 입니다.

 

오늘은 Node.js에서 Express 프레임워크를 활용하여 MySQL 데이터 베이스에 생성, 조회, 수정, 삭제 (CRUD) 를 구현해 보도록 하겠습니다.

 

바로 시작할게요~

---

Tutorial

•  React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting)
•  React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table)
•  React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend)
•  React Native + Node.js + MySQL To do list 만들기 4 - Express로 CRUD 구현하기 (Building a CRUD API with Express)
•  React Native + Node.js + MySQL To do list 만들기 5 - Axios 이용하여 CRUD 구현하기 (Implementing a api with Axios)

---

Install

 

HTTP 보안 상의 이유로 cors를 설치해야 합니다.

 

(CORS가 뭔지 자세한 내용이 궁금하시면 여기 에서 확인하시면 됩니다.)

 

npm install cors

---

Setting

 

필요한 환경을 변수로 세팅해 줍니다.

 

const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");

 

express에서 cors와 json을 사용하도록 설정해 줍니다.

 

app.use(cors());
app.use(express.json());

 

MySQL 데이터베이스를 연결을 생성해 줍니다.

 

const db = mysql.createConnection({
  user: "유저이름",
  host: "로컬호스트",
  password: "비밀번호",
  database: "데이터베이스이름",
});

 

express 앱을 원하는 포트에 실행시켜 줍니다.

 

app.listen(3001, () => {
  console.log("Your server is running on port 3001");
});

---

Building a API

 

Create

 

todo 정보를 클라이언트로부터 받아와 INSERT 쿼리를 통해 MySQL 데이터베이스에 추가해 줍니다.

 

app.post("/create", (req, res) => {
  const author = req.body.author;
  const title = req.body.title;
  const content = req.body.content;
  const priority = req.body.priority;

  db.query(
    "INSERT INTO TODOLISTSYSTEM.TODOS (AUTHOR,TITLE,CONTENT,PRIORITY) VALUES (?,?,?,?)",
    [author, title, content, priority],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send("Inserted values successfully!");
      }
    }
  );
});

 

Read

 

TodoListSystem 데이터베이스에 있는 Todos 테이블의 데이터를 모두 읽어옵니다.

 

app.get("/todos", (req, res) => {
  db.query("SELECT * FROM TODOLISTSYSTEM.TODOS", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(`Selected values successfully!`);
    }
  });
});

 

Update

 

id에 해당하는 Todo를 받아온 데이터로 변경해 줍니다.

 

app.put("/todos", (req, res) => {
  const todoid = req.body.todoid;
  const author = req.body.author;
  const title = req.body.title;
  const content = req.body.content;
  const priority = req.body.priority;

  db.query(
    "UPDATE TODOLISTSYSTEM.TODOS SET AUTHOR = ?, TITLE = ?, CONTENT = ?, PRIORITY = ? WHERE TODOID = ?;",
    [author, title, content, priority, todoid],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(`Updated values successfully!`);
      }
    }
  );
});

 

Delete

 

삭제할 todoid를 파라미터로 받아와 삭제를 진행합니다.

 

app.delete("/todos/:todoid", (req, res) => {
  const { todoid } = req.params;
  db.query(
    "DELETE FROM TODOLISTSYSTEM.TODOS WHERE TODOID = ?",
    [todoid],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(`Deleted values successfully!`);
      }
    }
  );
});

---

Next Tutorial

 

[React Native] React Native + Node.js + MySQL To do list 만들기 5 - Axios 이용하여 CRUD 구현하기 (Implementing a api

---

Source code

 

아래 레포지토리로 이동하면 전체 소스를 확인할 수 있습니다.

 

궁금하신 점 있으시면 언제든 댓글 달아주세요!

 

GitHub - fomagran/ToDoListFullStack: React native(CLI,TS) + Node.js + MySQL