📝 오늘 한 것

1. edit profile / change password

2. 파일 업로드 - multer / req.file / express.static()

3. git restore --staged 에러 해결

📚 배운 것

user profile

1. edit profile

1) userRouter, edit-profile.pug, getEdit 컨트롤러

여태까지 배운 것 복습
github에만 올림

2) loggedInUser is undefined 에러

에러 내용

로그인 하지 않은 user가 직접 주소 창에 localhost:4000/users/edit를 입력해 들어오려고 할 때 화면에는 'undefined의 name 속성을 읽을 수 없다'는 에러가 뜬다.

에러 원인

로그인을 하지 않으면 req.session.user가 undefined 상태라서 res.locals.loggedInUser도 undefined가 된다.
따라서, edit-profile.pug 파일에서 undefined(loggedInUser)의 name 속성을 읽을 수 없다며 에러가 뜨게 되는 것이다.

에러 해결

로그인 하지 않은 user도 edit-profile 페이지에 접근할 수 있도록 localsMiddleware를 수정했다.
user가 로그인 하지 않아 req.session.user가 undefined인 경우에는 res.locals.loggedInUser가 {}(undefined 아님)의 값을 가지도록 함으로써 로그인 하지 않은 user를 포함해 누구든지 edit-profile 페이지를 볼 수 있도록 했다.

// middlewares.js
export const localsMiddleware = (req, res) => {
  res.locals.siteName = "Wetube";
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.loggedInUser = req.session.user || {}; // 수정 ❗
  next();
};

3) route를 보호하는 middleware

※ req.session.loggedIn 대신에 res.locals.loggedIn을 사용할 수도 있다. (req / res 주의!)

(1) protectorMiddleware

로그인 하지 않은 user는 home에서 edit profile 메뉴를 볼 수 없으므로 메뉴를 클릭해 edit profile 페이지에 들어올 수는 없다.
그러나, 로그인 하지 않은 user도 직접 주소 창에 localhost:4000/users/edit을 입력해 들어오려고 할 수 있다.

위에서 이런 경우에도 (user가 로그인 하지 않은 경우에도) loggedInUser의 값이 undefined가 되지 않도록 설정했다.

다만, 실제로 로그인 하지 않은 user는 edit profile 페이지에 들어와서는 안되기 때문에 해당 페이지로 접근 시 login 페이지로 redirect 시켜야 한다.
이를 위해 protectorMiddleware를 만들어야 한다.

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

edit profile 페이지뿐 아니라 logout, upload video, edit video, delete video 페이지에서 또한, controller가 실행되기 전에 protectorMiddleware가 실행되도록 하여, 페이지에 접근을 시도하는 user가 로그인된 user인지 아닌지에 따라 각각 다른 페이지를 보여주도록 해야 한다.

// userRouter.js
import { protectorMiddleware } from "../middlewares";

userRouter.get("logout", protectorMiddleware, logout);
userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);

// videoRouter.js
import { protectorMiddleware } from "../middlewares";

videoRouter.route("/:id([0-9a-f]{24})/edit").all(protectorMiddleware).get(getEdit).post(postEdit);
videoRouter.route("/upload").all(protectorMiddleware).get(getUpload).post(postUpload);
videoRouter.route("/:id([0-9a-f]{24})/delete").all(protectorMiddleware).get(deleteVideo);

※ upload video 메뉴는 로그인 한 user만 볼 수 있도록 base.pug 파일을 수정했다.

(2) publicOnlyMiddleware

한편, 반대로 로그인 되어 있지 않은 user만 접근할 수 있는 페이지도 있다.
이를 위해 publicOnlyMiddleware를 만들어야 한다.

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

github 로그인과 관련된 route(github/start, github/finish)와 join, login 페이지에는 로그인 하지 않은 user만 접근할 수 있도록 해야 한다.

// userRouter.js
import { publicOnlyMiddleware } from "../middlewares";

userRouter.get("/github/start", publicOnlyMiddleware, startGithubLogin);
userRouter.get("/github/finish", publicOnlyMiddleware, finishGithubLogin);

// rootRouter.js
import { publicOnlyMiddleware } from "../middlewares";

rootRouter.route("/join").all(publicOnlyMiddleware).get(getJoin).post(postJoin);
rootRouter.route("/login").all(publicOnlyMiddleware).get(getLogin).post(postLogin);

4) postEdit 컨트롤러

(1) ES6 객체 문법

먼저 req.session.user과 req.body에서 user 정보를 가져와야 한다.
이때 ES6 객체 문법을 사용해 보다 간결하게 표현할 수 있다.

const id = req.session.user._id;
const { name, email, username, location } = req.body;

위와 아래의 코드는 동일하다.

const {
  session: {
    user: { _id },
  },
  body: { name, email, username, location },
} = req;

(2) DB 업데이트

💡 model.findByIdAndUpdate()

현재 로그인 되어 있는 user object의 _id 속성 값과 user가 form에 입력한 profile 수정 사항들을 받아와서 이를 model.findByIdAndUpdate()를 이용해 데이터베이스를 업데이트 할 수 있다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  await User.findByIdAndUpdate(_id, {
    name,
    email,
    username,
    location,
  });
  return res.render("edit-profile", { pageTitle: "Edit Profile" });
};

💡 문제 발생

그런데 이렇게 작성하면 DB는 업데이트가 되지만, res.render에 의해 다시 돌아간 edit-profile 페이지에는 여전히 수정 전 value 값들이 입력되어 있다.

그 이유는 DB에서 user object는 업데이트가 되었지만, session은 업데이트 되지 않았기 때문이다.

자세히 설명하면, edit-profile 페이지의 form의 value 값들은 loggedInUser의 속성 값들이다.
그런데 req.session.user의 값이 localsMiddleware에 의해 곧 res.locals.loggedInUser의 값이 된다.
req.session.user는 로그인 할 때 postLogin 컨트롤러에서 만들어진 것으로써 user object의 값을 가진다.

그러므로 문제를 해결하기 위해서는 req.session.user에 수정된 user object를 다시 할당해야 한다.
DB에 업데이트한 내용을 session에도 업데이트 함으로써 프론트엔드에도 반영되도록 해야 한다.

(3) session 업데이트

💡 직접 session 업데이트

export const postEdit = async (req ,res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  // DB 업데이트
  await User.findByIdAndUpdate(_id, {
    name,
    email,
    username,
    location,
  });
  // session 업데이트
  req.session.user = {
    ...req.session.user, // 기존의 값들을 전달한 후 수정 사항들만 덮어쓰기
    name,
    email,
    username,
    location,
  };
  // render를 redirect로 수정함
  return res.redirect("/users/edit");
};

마지막에 res.render("edit-profile")을 redirect("/user/edit")으로 수정해야 한다.
session을 업데이트한 후 localsMiddelware를 다시 불러와야 하기 때문이다.
localsMiddleware를 통해 업데이트한 user 정보를 res.locals.loggedInUser에 할당할 수 있다.
locasMiddleware는 route를 찾기 전에 실행되므로 단순히 pug 파일을 렌더링 할 게 아니라 redirect 해야 한다.

💡 updatedUser 생성

기본적으로 model.findByIdAndUpdate()은 update 되기 전의 데이터를 return 한다.
update 된 후의 데이터를 return 하도록 하려면 new: true 설정을 추가해야 한다.

※ User.findByIdAndUpdate()에 3개의 인자를 주고 있다.

• 업데이트 하려는 데이터의 id
• 업데이트 하려는 정보
• 업데이트가 끝난 최신의 데이터를 return 하도록 하는 new 옵션

export const postEdit = async (req ,res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  // DB 업데이트
  const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      name,
      email,
      username,
      location,
    },
    { new: true }, // 추가 ❗
  );
  // session 업데이트
  req.session.user = updatedUser;
  // localsMiddleware가 실행되도록 redirect
  return res.redirect("/users/edit");
};

의도한 대로 잘 작동한다.

그러나 한 가지 고려해야 할 사항이 남아 있다.
수정된 username과 email이 이미 누군가 사용 중이라면 그 값들로 업데이트 되어서는 안된다.

(4) username, email 중복 검사

코드 챌린지

💡 오답

일단은 join에서 사용했던 방법을 써보았다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  // username, email 중복 검사 (추가 ❗)
  const exists = await User.exists({ $or: [{ username }, { email }] });
  if (exists) {
    return res.render("edit-profile", {
      pageTitle: "Edit Profile",
      errorMessage: "This username/email is already taken.",
    });
  }
  // DB 업데이트
  const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      name,
      email,
      username,
      location,
    },
    { new: true }
  );
  // session 업데이트
  req.session.user = updatedUser;
  // localsMiddleware가 실행되도록 redirect
  return res.redirect("/users/edit");
};

그러나 이렇게 작성하면, name이나 location만을 변경하고 username이나 email은 변경하지 않은 경우에도 에러 메시지가 뜨게 되어, name이나 location만을 변경할 수가 없다.

💡 해답

위 방법 대신에 username과 email의 수정 여부를 먼저 확인한 후, 수정되었다면 데이터베이스에 그 수정된 값과 동일한 값이 존재하는지 확인하는 방법을 사용하려고 한다.

export const postEdit = async (req ,res) => {
  // req.session.user과 req.body에서 user 정보를 가져옴
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  // username, email 중복 검사
  if (username !== req.session.user.username) { // form에서 username이 수정되었다면
    const exists = await User.exists({ username }); // DB에 수정된 값과 동일한 값이 있는지 확인
    if (exists) { // 중복된 값이 있다면 에러 메시지 보여주기
      return res.render("edit-profile", { pageTitle: "Edit Profile", errorMessage: "This username is already taken."});
    }
  }
  if (email !=== req.session.user.email) { // form에서 수정되었다면
    const exists = await User.exists({ username }); // DB에 수정된 값과 동일한 값이 있는지 확인
    if (exists) { // 중복된 값이 있다면 에러 메시지 보여주기
      return res.render("edit-profile", { pageTitle: "Edit Profile", errorMessage: "This email is already taken."});
    }
  }
  // 수정된 username 혹은 email이 DB에 있는 값과 중복되지 않음이 확인되면
  // DB 업데이트
  const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      name,
      email,
      username,
      location,
    },
    { new: true },
  );
  // session 업데이트
  req.session.user = updatedUser;
  // localsMiddleware가 실행되도록 redirect
  return res.redirect("/users/edit");
};

5) password 변경

postEdit 컨트롤러에 함께 작성하지 않고 password 변경을 위한 컨트롤러를 따로 만든 이유는
다른 user 정보는 로그인 하지 않은 모든 user들이 변경할 수 없는 반면,
password는 github를 통해 로그인 한 user들까지도 변경할 수 없기 때문이다.
또한, password 변경 시 User.findByIdAndUpdate() 말고 user.save()를 사용하고자 한다.
이러한 차이점들 때문에 password 변경을 위한 페이지를 따로 만들었다.

(1) userRouter, change-password.pug, getChangePassword 컨트롤러

여태까지 한 것 복습
github에만 올림

github를 통해 로그인 한 user는 change password 페이지에 접근할 수 없어야 한다.
github로 로그인 한 user는 'Change Passowrd →'를 볼 수 없도록 edit-profile.pug 파일을 수정한다.

※ password로 로그인한 사람만 접근해야 하는 컨트롤러가 많아진다면, 이를 앞에서 만들었던 protectorMiddleware처럼 middleware를 만들어 처리할 수도 있다.

// change-password.pug

if !loggedInUser.socialOnly
  hr
  a(href="change-password") Change Password →

※ 상대 경로를 사용해봤다. 이는 절대 경로인 a(href="/users/change-password")와 같다.

(2) postChangePassword 컨트롤러

먼저, 현재 비밀번호(oldPassword)가 일치하는지 확인한 후 새로운 비밀번호(newPassword)와 새로운 비밀번호 확인(newPassword2)이 일치하는지 확인한다.

모든 게 문제 없다면 비밀번호를 변경한 후 DB에 저장해야 한다.
비밀번호를 DB에 저장할 때는 password hashing을 위해 pre save middleware를 거쳐야 한다.
그런데 pre save middleware는 'User.create()' 혹은 'user.save()'를 통해서만 실행 가능하다. (User.findByIdAndUpdate() 사용 시에는 pre hook이 작동되지 않는다.)

이 경우에는 user.save()를 사용하기 위해 먼저 user를 찾아야 한다.

export const postChangePassword = async (req, res) => {
  // req.session.user과 req.body에서 user 정보를 가져옴
  const {
    session: {
      user: { _id, password },
    },
    body: { oldPassword, newPassword, newPassword2 },
  } = req;
  // old password 일치 여부
  const ok = await bcrypt.compare(oldPassword, password);
  if (!ok) {
    return res.status(400).render("change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect.",
    });
  }
  // new password 확인 일치 여부
  if (newPassword !== newPassword2) {
    return res.status(400).render("change-password", {
      pageTitle: "Change Password",
      errorMessage: "Password confirmation does not match.",
    });
  }
  // password 변경 - DB 업데이트 ❗
  const user = await User.findById(_id);
  user.password = newPassword;
  await user.save();
  // session 업데이트 ❗
  req.session.user.password = user.password;
  // 로그아웃시킴
  return res.redirect("/users/logout");
};

postChangePassword 컨트롤러에서도 postEdit 컨트롤러에서와 마찬가지로 마지막에 session을 업데이트 해야 한다.

처음 password를 변경할 때는 문제가 없지만, 2번째로 password를 변경할 때부터는 이전에 password를 변경할 때 session을 업데이트 해주지 않았다면 문제가 발생한다.

postChangePassword 컨트롤러의 앞 부분에서 기존의 password를 req.session.user.password와 비교하고 있기 때문에 바뀐 password를 session에 업데이트 해주지 않으면 await bcrypt.compare(oldPassword, password)의 값은 false가 되는 것이다.

따라서, 다른 user 정보를 변경할 때와 마찬가지로 password를 변경할 때도 db를 업데이트 한 후에 session도 같이 꼭 업데이트 해줘야 한다.

+혹은 아래와 같이 작성한다면 session을 업데이트 해주지 않아도 된다.
처음부터 DB에서 user를 불러와 password를 비교할 때도 session이 아니라 DB에서 불러오는 것이다.

export const postChangePassword = async (req, res) => {
  // req.session.user과 req.body에서 user 정보를 가져옴
  const {
    session: {
      user: { _id }, // 수정 ❗
    },
    body: { oldPassword, newPassword, newPassword2 },
  } = req;
  // old password 일치 여부
  const user = await User.findById(_id); // 위치 수정 ❗
  const ok = await bcrypt.compare(oldPassword, user.password); // 수정 ❗
  if (!ok) {
    return res.status(400).render("change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect.",
    });
  }
  // new password 확인 일치 여부
  if (newPassword !== newPassword2) {
    return res.status(400).render("change-password", {
      pageTitle: "Change Password",
      errorMessage: "Password confirmation does not match.",
    });
  }
  // password 변경 - DB 업데이트
  user.password = newPassword;
  await user.save();
  // 로그아웃시킴
  return res.redirect("/users/logout");
};

2. 파일 업로드

github로 로그인하지 않고 password를 입력해 계정을 만든 user도 avatar를 업로드할 수 있고
password를 입력해 계정을 만들지 않고 github로 로그인한 user도 avatar를 수정할 수 있도록 할 것이다.

어떻게 백엔드에 파일을 보낼 수 있는가

1) input(type="file")

edit-profile.pug 파일에 label과 input(type="file") 태그를 추가한다.

//- edit-profile.pug

extends base

if errorMessage
  span=errorMessage
form(method="POST")
  label(for="avatar") avatar
  input(name="avatar", type="file", accept="image/*", id="avatar")
//- 이하 생략

2) multer middleware

multer란 파일을 다운로드 할 수 있도록 도와주는 middleware를 말한다.

(1) 설치 및 사용

Multer 참고

npm을 이용해 multer를 설치한다.

$ npm i multer 

multer를 이용해 파일을 업로드 하기 위해서는(파일을 백엔드로 보내기 위해서는) form을 multipart form으로 만들어야 한다.
form 태그에 enctype="multipart/form-data" 속성을 추가한다.

//- edit-profile.pug

form(method="POST", enctype="multipart/form-data")
  label(for="avatar") avatar
  input(name="avatar", type="file", accept="image/*", id="avatar")
//- 이하 생략

middlewares.js 파일에 user가 보낸 파일을 서버의 uploads 폴더에 저장하는 multer middleware를 만들었다.

multer middleware에는 옵션들을 담은 객체를 넣을 수 있다.
dest는 destination으로서 파일이 저장될 위치를 말한다.
지금은 서버의 uploads 폴더 즉, 하드 드라이브에 저장하지만 나중에 바꿀 것이다.
프로젝트 폴더에 uploads 폴더를 생성한 후 .gitignore 파일에 추가한다.

// middlewares.js
export const uploadFiles = multer({ dest: "uploads/" });

uploadFiles middleware는 avatar 사진을 upload 할 때 사용되므로 postEdit 컨트롤러 앞에서 사용되어야 한다.
userRouter.js 파일을 수정한다.

// userRouter.js
userRouter.route(/edit) // url
  .all(protectorMiddleware)
  .get(getEdit)
  .post(uploadFiles.single("avatar"), postEdit);
  // (multer middleware.multer 메서드("form에서 받아올 파일의 name"), controller)

multer middleware는 user가 해당 url로 파일을 보내면 input에서 파일을 받아서 uploads 폴더에 저장한 후 그 파일 정보를 postEdit controller에 전달한다.

(2) req.file

이미지 파일을 업로드 하면 uploadFiles.single("avatar")가 실행되면서 다음과 같은 req.file이 만들어진다.
이 중 avatarUrl을 위해 필요한 것은 path이다.

{
  fieldname: 'avatar',
  originalname: 'dd.gif',
  encoding: '7bit',
  mimetype: 'image/gif',
  destination: 'uploads/',
  filename: '2987fe268e63abe892b0a1c5932f6ee9',
  path: 'uploads/2987fe268e63abe892b0a1c5932f6ee9',
  size: 5075180
}

이를 바탕으로 postEdit 컨트롤러를 수정할 때 고려해야 할 사항이 두 가지 있다.

1. 만약 user가 profile을 수정할 때 avatar 파일을 업로드하지 않는다면, file 변수의 값이 undefined가 되어 path를 찾을 수 없어 에러가 발생하므로 path를 변수로 만들지 말고 file을 변수로 만들어야 한다.

2. 기존에 avatar가 있는 user가 profile을 수정할 때 avatar 파일을 업로드하지 않았어도 원래 있던 avatar가 사라져서는 안된다. (있었는데 없는 걸로 덮어쓰기 되면 안된다.)

// userController.js
export const postEdit = (req, res) => {
  const {
    session: {
      user: { _id, avatarUrl }, // avatarUrl을 추가로 가져온다.
    },
    body: { name, email, username, location },
    file, // file: { path } 라고 쓰면 1번 에러가 발생한다.
  } = req;
  // 중략
  await User.findByIdAndUpdate(
    _id,
    {
      avatarUrl: file ? file.path : avatarUrl,
      // 그냥 file.path라고 쓰면 2번 에러가 발생한다.
      name,
      email,
      username,
      location,
    },
    { new: true }
  );
};

💡 중요한 것은 데이터베이스에는 파일을 저장하지 않는다는 것이다!
데이터베이스에는 파일의 위치만 저장한다.

(3) avatar 이미지 보여주기

// edit-profile.pug

extends base

block content
  if errorMessage
    span=errorMessage
  img(src="/" + loggedInUser.avatarUrl, width="100", heigh="100")
  form(method="POST", enctype="multipart/form-data")
  label(for="avatar") avatar
  input(name="avatar", type="file", accept="image/*", id="avatar")
//- 이하 생략

💡 절대 경로 사용하기

edit profile 페이지에 img 태그를 추가했다.
src 속성의 값은, "/"를 쓰지 않으면 자동으로 상대 경로(/users/uploads/블라블라)로 변환되므로 앞에 "/"를 붙여줘야 한다.
위 코드의 결과 src 값은 /uploads/ds3jdksfj3kdflsfla2222kl 와 같은 값을 가지게 된다.

💡 express.static("브라우저에 노출시킬 폴더 이름")

그러나, 위와 같이 작성해도 화면에는 avatar 이미지가 뜨지 않는다.
이는 express가 uploads라는 경로가 추가되었음을 모르고, 브라우저가 uploads 폴더에 있는 파일을 볼 수 없기 때문이다.

문제를 해결하기 위해서는 sever.js에서 파일에서 /uploads 경로를 추가하고, 브라우저가 어떤 폴더를 볼 수 있을지 설정해야 한다. (static files serving)
express.static()을 이용해 폴더 내의 모든 파일을 브라우저에 노출시킬 수 있다.

// server.js
app.use("/uploads", express.static("uploads"));

누군가 /uploads로 가려고 하면, uploads 폴더의 모든 내용을 보여주도록 한다.
이제 edit profile 페이지에 avatar 사진이 뜨는 것을 확인할 수 있다.

(4) 파일 저장 위치를 변경해야 함

지금은 파일을 서버의 uploads 폴더에 저장하고 있다.
그러나, 파일을 서버에 저장해서는 안된다.
이전 서버를 종료하고 새로운 서버를 만들거나 서버가 죽어버리면, 서버에 저장되어 있던 파일들은 전부 잃게 되기 때문이다.

따라서, 파일을 안전하게 저장하기 위해서는 파일을 서버가 아닌 다른 곳에 저장해야 한다.
이는 실제 서버에 앱을 배포할 때 진행해볼 것이다.

한편, user가 업로드를 통해 avatar 사진을 바꿀 때마다 업로드 한 모든 파일들이 uploads 폴더에 저장되고 있다.
이 또한 뒤에서 해결해볼 것이다.

💡 실제 파일은 Amazon의 하드 드라이브 등에 저장하고, 데이터베이스에는 파일의 url을 저장해야 한다!

3. git

1) git restore --staged

git add를 잘못 해서 다시 unstaged area로 내리기 위해 git restore --staged [파일 이름]을 입력했는데 아래와 같은 에러가 떴다.

error: pathspec '파일 이름' did not match any file(s) known to git

2) 에러 해결

터미널에서 해당 파일이 있는 폴더로 가서 git fetch를 입력한다.
(주의! 프로젝트 폴더가 아니라 '해당 파일이 있는 폴더'이다.)

✨ 내일 할 것

1. 강의 계속 듣기