[JavaScript, Node.js] 유튜브 클론 정리 8장 (1) - 유저 프로필 수정, Middleware 추가

머리글

프로필 수정

우선 프로필을 수정하기 위해 적당히 페이지를 하나 만들어 줍시다.
이미 여러 번 다뤘던 내용이므로 자세한 내용은 생략하고 넘어갑시다.

extends base

block content
    form(method="POST")
        input(placeholder="Name", name="name", type="text", required, value=loggedInUser.name)
        input(placeholder="Email", name="email", type="email", required, value=loggedInUser.email)
        input(placeholder="Username", name="username", type="text", required, value=loggedInUser.username)
        input(placeholder="Location", name="location", type="text", required, value=loggedInUser.location)
        input(type="submit", value="Update Profile")

페이지를 만들어주고

...
userRouter.route("/edit").get(getEdit).post(postEdit);
...

라우터도 만들어주고

export const getEdit = (req, res) => {
  return res.render("edit-profile", { pageTitle: "Edit Profile" });
};
export const postEdit = (req, res) => {
  return res.render("edit-profile");
};

컨트롤러도 만들어줍시다.

그리고 본격적으로 수정하기에 앞서 필요한 Middleware를 생성해 봅시다.

export const protectorMiddleware = (req, res, next) => {
  if (req.session.loggedIn) {
    return next();
  } else {
    return res.redirect("/login");
  }
};

export const publicOnlyMiddleware = (req, res, next) => {
  if (!req.session.loggedIn) {
    return next();
  } else {
    return res.redirect("/");
  }
};

이 미들웨어는 로그인 상태를 확인하여 갈 수 있는 페이지와 그렇지 않은 페이지를 구분합니다.

예를 들어 로그인 상태라면 로그인 페이지로 이동이 불가능해야 할 것이고,
로그인하지 않았다면 자신의 프로필등을 볼 수 없어야 합니다.

이런 식으로 필요한 곳에 라우터를 적용해 주었다면 수정 작업을 이어나가 봅시다.

역시 앞서했던 내용과 크게 차이가 없습니다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      name,
      email,
      username,
      location,
    },
    { new: true }
  );
  req.session.user = updatedUser;
  return res.redirect("/users/edit");
};

이런 식으로 수정 페이지에서 각 정보를 가져와서
findByIdAndUpdate 함수를 사용해서 DB에 있는 내용을 업데이트하게 됩니다.

이때, 프론트엔드에 정보를 즉각 반영하기 위해(세션을 업데이트하기 위해)
new 옵션을 사용해서 정보를 받아옵니다.

findByIdAndUpdate는 기본적으로 업데이트 전의 정보를 return 합니다.
우리는 새로 업데이트된 정보가 필요하므로 new 옵션을 true로 해주면 업데이트 된 정보를 return 합니다.

이 정보를 바탕으로 세션의 유저 정보를 업데이트하면 유저 프로필 수정이 완료됩니다.

마무리

이번 시간에는 유저의 프로필을 업데이트하는 방법을 알아보았습니다.

다음 시간에는 비밀번호를 변경해 보도록 하겠습니다.