[CRUD을 이용한 File upload Web] (9) user 데이터 수정하기 & 동기와 비동기

<본 블로그는 DCodeMania 의 유튜브를 참고해서 공부하며 작성하였습니 :-)>

=> CRUD App With Image Upload Using NodeJs, ExpressJs, MongoDB & EJS Templating Engine

 

 

🥕 동기(synchronous)

: 직렬적으로 태스크를 수행

: 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식 (태스크를 처리할 동안 나머지 태스크는 대기)

https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90 참고

 

🥕 비동기 (asynchronous)

: 병렬적으로 태스크를 수행

: 요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식 (a 태스크가 실행되는 시간 동안 b 태스크 함)

: 비동기 요청시 응답 후 처리할 '콜백 함수' 알려줌 => 해당 태스크가 완료되었을 때, '콜백 함수'가 호출됨

https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90 참고

 

➕ 후속 처리 메소드
1) Promise 
then (Promise 반환)
: 두 개의 콜백 함수를 인자로 전달 받음
: 첫 번째 콜백 함수는 성공(fulfilled, resolve 함수가 호출된 상태) 시 호출되고
두 번째 함수는 실패(rejected, reject 함수가 호출된 상태) 시 호출
: then 메소드는 Promise를 반환

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.

  if (/* 비동기 작업 수행 성공 */) {
    resolve('result');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('failure reason');
  }
});

catch 예외
: 비동기 처리에서 발생한 에러와 then 메소드에서 발생한 에러가 발생하면 호출
: catch 메소드는 Promise를 반환

3) async와 await
async
: function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환
await
: async 함수 안에서만 동작, 프라미스가 처리될 때 까지 기다리는 역할 => 결과는 그 이후 반환

async function 함수명() {
  await 비동기_처리_메서드_명();
}

 

 

🥕 user 데이터 수정하기

🐧 routes/routes.js

const express = require("express");
const router = express.Router();
const User = require("../models/user");
const multer = require("multer");
const fs = require("fs");

// image upload
var storage = multer.diskStorage({
  // 파일이 업로드될 경로 설정
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  // timestamp를 이용해 새로운 파일명 설정
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
  }
})

var upload = multer({
  storage: storage,
}).single("image");   // 한 개의 이미지 처리

// Insert an user into database route
router.post("/add", upload, (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: req.file.filename,
  });

  user.save().then((err) => {
    // index.js 에 res.locals.message 있음
    req.session.message = {
      type: "success",
      message: "User added successsfull!"
    };
    // 지정된 다른 URL로 재요청 (홈)
    res.redirect("/");
  }).catch((err) => {
    res.json({ message: err.message, type: "danger" });
  })
});

// 1) Get all users route
router.get("/", async (req, res) => {
  const user = await User.find();

  try {
    // Query를 이용할 때 프로미스를 리턴받고 싶다면 exec() 메서드를 이용
    // find()를 실행하여 Query의 인스턴스를 리턴
      res.render("index", {
        title: "Home Page",
        // 궁금 : 너 왜 error 잡히니?
        users: user
      });
  } catch (error) {
    (error) => {
      res.json({ message: error.message });
    }
  };
});

router.get("/add", (req, res) => {
  res.render("addUsers", { title: "Add users" });
})

// 2) Edit an user routes
router.get("/edit/:id", async (req, res) => {
  let id = req.params.id;
  const user = await User.findById(id);

  try {
    if (user == null) {
      res.redirect("/");
    } else {
      res.render("editUsers", {
        title: "Edit User",
        user: user,
      });
    }
  } catch (err) {
    res.redirect("/");
  }
});

// 3) Update user route
router.post("/update/:id", upload , async (req, res) => {
  let id = req.params.id;
  let new_image = "";

  if (req.file) {
    new_image = req.file.filename;
    try {
      // 동기 방식으로 파일 정보 읽기
      fs.readFileSync("./uploads/" + req.body.old_image);
    } catch(err) {
      console.log(err);
    }
  } else {
    req.image = req.body.old_image;
  }
    
  //  첫 번째 인자는 업데이트 하고자 하는 문서의 id, 두 번째 인자는 업데이트 할 정보 혹은 내용
  const user = await User.findByIdAndUpdate(id, {
    name : req.body.name,
    email : req.body.email,
    phone : req.body.phone,
    image : new_image
  });
  
  try {
    req.session.message = {
      type : "success",
      message :"User updated successfully!",
    };
    res.redirect("/");
  } catch (err) {
    res.json({ message : err.message, type : "danger"});
  }
  
});

module.exports = router;

 

🐧 views/editUsers.ejs

<%- include("layout/header") %>

    <div class="container">
        <div class="row">
            <div class="col-lg-6 mx-auto mt-4">
                <div class="card shadow">
                    <div class="card-header bg-success">
                        <h3 class="text-light">Edit User (<%= user.name %>)</h3>
                    </div>
                    <div class="card-body p-4">
                        <!-- add랑 router 경로 같아야 될듯? -->
                        <form action="/update/<%= user._id %>" method="post" id="add-form"
                            enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="name">Name</label>
                                <input type="text" name="name" class="form-control form-control-lg"
                                    placeholder="Enter name" value="<%= user.name %>" required />
                            </div>
                            <div class="mb-3">
                                <label for="email">Email</label>
                                <input type="email" name="email" class="form-control form-control-lg"
                                    placeholder="Enter email" value="<%= user.email %>" required />
                            </div>
                            <div class="mb-3">
                                <label for="phone">Phone</label>
                                <input type="tel" name="phone" class="form-control form-control-lg"
                                    placeholder="Enter phone" value="<%= user.phone %>" required />
                            </div>
                            <div class="mb-3">
                                <label for="image" class="form-label">Select Image</label>
                                <input type="file" name="image" class="form-control form-control-lg" />
                                <img src="/<%= user.image %>" width="100" class="img-thumbnail mt-1">
                            </div>
                            <input type="hidden" name="old_image" value="<%= user.image %>">
                            <div class="mb-3 d-grid">
                                <input type="submit" name="submit" value="Update User" class="btn btn-success btn-lg" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%- include("layout/footer") %>