Node.js post 요청날릴때 주의점

노드로 투두리스트를 만들어보는중에, 할일과 날짜를 입력하고 post요청을 한 후에

새로고침을하면 데이터가 중복되어서 펼쳐지는 문제가 발생했다.

- write 라우터 코드

const express = require("express");
const path = require("path");
const { Post } = require("../models");

const router = express.Router();

router.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "../views/write.html"));
});

router.post("/", async (req, res) => {
  try {
    // 요청이 왔으면 무조건 응답을 해주어야함
    // Post 테이블에 데이터 집어넣기
    const todo = await Post.create({
      todo_content: req.body.todo_content,
      todo_date: req.body.todo_date,
    });

    // 모든 데이터 찾기
    const todolist = await Post.findAll();

    console.log("todolist : ", todolist);

    res.render("write.html", { todolist });
  } catch (err) {
    console.error(err);
  }
});

module.exports = router;

원인은 post 요청이 끝난후에, 해당 url을 벗어나는것이 아니라 그 url에 남아있는 것이기 때문이다.
그 후에 페이지를 새로 고침하면 입력했던 값을 다시 post 요청을 하게 되는것이어서 그 값들이 반복되어서 브라우저상에 나타나는 것이다.

그렇기 때문에 post 요청을 한 후에 redirect나 get 같은 요청으로 그 url 을 벗어나야한다.

const express = require("express");
const path = require("path");
const { Post, User } = require("../models");
const router = express.Router();

router.get("/:id", async (req, res) => {
  try {
    const todos = await Post.findAll({
      // get 같은경우는 params나 query 프로퍼티를 많이 사용
      where: { post_writer: req.params.id },
      order: [["todo_date", "ASC"]],
    });
    // res.sendFile(path.resolve(__dirname, "../views/write.html"));
    // sendFile이 아니라 render로 get 해주어야함 .
    res.render("todo", { todoList: todos });
  } catch (err) {
    console.error(err);
  }
});

router.post("/write", async (req, res) => {
  try {
    // 요청이 왔으면 무조건 응답을 해주어야함
    // Post 테이블에 데이터 집어넣기
    const todo = await Post.create({
      todo_content: req.body.todo_content,
      todo_date: req.body.todo_date,
      post_writer: "1",
    });
    // 모든 데이터 찾기
    const todolist = await Post.findAll();

    console.log("todolist : ", todolist);

    // redirect 로 재연결 해주기 
    res.redirect("/todo/1");
  } catch (err) {
    console.error(err);
  }
});

router.post("/remove", async (req, res) => {
  try {
    const removeTodo = await Post.destroy({
      where: { id: req.body.id },
    });

    res.json({ msg: "ok", chk: removeTodo });
  } catch (err) {
    console.error(err);
  }
});

module.exports = router;