Profile

서론

  사용자가 로그인을 하면 자신의 profile을 볼 수 있는 페이지를 만들 것이다.

본론

  navigator를 보면 loggedUser에 따라 Join & Login과 Upload & Profile & Logout을 보여준다. loggedUser 변수는 아직 선언하지 않았다. 이 변수는 middleware를 통해서 전달한다.

header.pug

localMiddleware

  업로드 된 아바타를 불러오기 위해서 app.js에 다음과 같이 uploads를 추가해주자. express.static은 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공한다. 인자로는 디렉토리 이름을 전달한다.

app.js

 

Router

globalRouter.js에 다음 코드를 추가한다. getMe는 userController.js의 함수다.

globalRouter.get(routes.me, getMe);

 

View

userDetail.pug

자신의 profile을 보는 것은 userDetail을 참조한다. 단 다른 사람이 나의 profile을 볼 때는 수정 기능을 넣지 않는다.

if loggedUser && loggedUser.id === user.id로 로그인 유저가 보인의 profile을 보는지를 확인한다. 본인일 때만 'Edit Profile' or 'Change Password' 기능을 제공한다.

Controller

export const getMe = async (req, res) => {
  const {
    user: { id },
  } = req;
  try {
    const user = await User.findById(id);
    res.render('userDetail', { pageTitle: user.name, user });
  } catch (error) {
    console.log(error);
    res.redirect(routes.home);
  }
};

로그인한 사용자의 id 값을 받아 온다. req.user는 passport가 제공하는 객체다. 해당 id 값을 참조하여 users에 있는 데이터를 가져온다. 그리고 userDetail과 함께 랜더링한다.

참고 자료

• 노마드 코더의 유튜브 클론 강의
• express.static

소스 코드

https://github.com/zpskek/wetube-v3/commit/2ac168b2dd0b78a67bd82db1498f6585c9fe3dbb