User Profile

이번에는 사용자 프로필 창을 만들어 본다.

왜냐하면 모든 사용자한테 프로필이 필요하기 때문이다. 그래서 모두가 부여 받는 사용자 프로필 창을 만들어 줄거다.

이 과정에서 많은 것들을 배우게 될거다. 예를 들어 relationships같은 것들이 있다.

사용자의 프로필 창에 들어가면 이름과 아바타 같은 해당 유저의 정보를 볼수 있게 만들거다.

그리고 그 유저가 업로드한 영상들을 볼수 있게 만들거다.

유튜브 채널처럼 만들면 좋을것 같다.

프로필에 들어가면 해당 유저가 올린 영상들을 볼수 있는 거다.

추가적으로 영상을 틀면 누가 그 영상을 올렸는지 확인하게 한다.

또한 해당 영상의 소유자가 아니면 이 두 버튼(Edit Video, Delete Video)을 보이지 않게 만들거다.

영상을 업로드한 사람만이 수정과 삭제 할수 있게 해야 하기 때문이다.

이 말은 video파일을 누가 업로드 했는지 알수 있어야 하고 사용자는 자신이 업로드한 영상들을 볼수 있어야 한다.

현재 DB를 보면 video에는 owner 항목이 없다.

그러니 owner를 video에 추가하고 user에는 video list를 추가해줄 필요가 있다.

{ "_id" : ObjectId("6268bb3f69b51a45c9ad1ae3"), "email" : "pkpanda@naver.com", "socialOnly" : false, "username" : "Cyber Lover", "password" : "$2b$05$R5Yss2htjFd9vSa7TdxVGe4ukAj6wHpJAbip2FG06bcA6nKD.i9LS", "name" : "Mercury1", "location" : "NYC", "__v" : 0, "avatarUrl" : "uploads/597ad456bcec6a0743a383a1653d5499" }

여기 보면 user가 있다. 그런데 이 user가 소유한 video는 하나도 없는것 같다.

그래서 이 둘을 연결해 줄거다. video가 하나의 owner만 가지도록 만들어야 하고
user는 여러 개의 video를 가질수 있도록 만들어야 한다.

model을 수정하기 전에 my profile의 링크를 만들어 준다.

base.pug에 들어가서

body 
        header
            h1=pageTitle
            nav 
                ul 
                    li  
                        a(href="/") Home
                    if loggedIn
                        li 
                            a(href="/videos/upload") Upload Video
                        li 
                            a(href=`/users/${loggedInUser._id}`) My Profile

localsMiddleware가 제공하는 loggedInUser locals가 있다는걸 기억해야 한다.

middleware.js에서

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

이 부분이다. 현재 /users/{로그인한 유저의 _id}로 가는 navigation을 만들고 있다.

새로고침해서 My Profile로 들어가면 링크에 /users/{사용자_id}가 보인다.

나중에 이 URL을 모든 사용자들이 사용 할수 있게 만들어 준다.

URL에 나와 있는 유저의 id를 사용해서 말이다.

My Profile은 로그인된 사용자를 위한 것이니까 로그인한 사용자의 id를 사용했다.

그런데 이 페이지는 공개되어 있다. 아무나 들어갈수 있다.

왜냐면 프로필은 모두가 볼수 있기 때문이다. 첫번째 단계 였다.

다음 단계는 이 오류를 해결할거다. 페이지가 에러가 나고 있다.

Cannot GET /users/$%7BloggedInUser._id%7D

userRouter에 들어가 준다.

userRouter.get("/:id", see);

/를 넣어 주었다. 새로고침 해서 확인해 보면 작동하고 있다. See User라고 나온다.

이제 /users/사용자id로 가면 See User를 볼수 있다.

userController.js에서

export const see = (req, res) => res.send("See User");

아직 수정하지 않은 controller이다. 이제 id를 가져오는거다.

user session에서 id를 가져오지 않을거다. 왜냐하면 이 페이지를 누구나 볼수 있어야 한다.

그래서 URL에 있는 user id를 가져 올거다.

req.session.user._id로 id를 가져오지 않을거다.

public으로 만들어야 하니까 URL에서 가져올거다.

export const see = (req, res) => {
  const { id } = req.params;
  return res.render("profile", { pageTitle: "User Profile" });
};

req.params에서 id를 꺼낸다. pageTitle의 구체적인건 나중에 바꾼다.

새로고침해보면 현재 views 디렉토리에 profile이 없다.

views폴더 안 users폴더에 파일을 추가해주면 된다.

profild.pug에서

extends ../base

block content 
    h1 hello

해주고

userController.js에서는

export const see = (req, res) => {
  const { id } = req.params;
  return res.render("users/profile", { pageTitle: "User Profile" });
};

users/를 추가 해준다. 그러면 새로고침하면 작동한다.

이제 user profile tmeplate을 render하고 있다.

pug template를 만들고 pug template를 base에서 extends 해줬다.

그리고 block content를 썼고 base에도 block content가 있다.

base에서는 pageTitle이란 변수를 사용한다. 그렇기에 render할때 pageTitle도 보내주는 거다.

지금 구현하고자 하는걸 설명하자면 url에 있는 id를 가지고 user를 찾는거다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  return res.render("users/profile", {
    pageTitle: `${user.name} Profile`,
    user,
  });
};

req.params에서 가져온 id를 추가한다. 이제 찾은 user를 template에 보내주기만 하면 된다.

그리고 pageTitle을 user profile로 하지 말고 유저 이름으로 만들어 준다.

${user.}을 쓰고 user에 name이 있는거를 기억한다.

새로고침 하면 현재 로그인한 요저의 프로필이 나온다.

이렇게 수정도 가능하다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

현재 프로필 페이지는 로그아웃 상태여도 접속이 가능하다.

예를 들어 인스타에서 다른 사용자의 프로필을 볼수 있는 거랑 같다.

정보를 받아 DB를 검색하고 render하는 작업은 이제 거의 다 끝났다.

이제 이 페이지에 어떻게 비디오를 추가할지 알아본다.

video를 어떻게 user와 연결 시킬수 있을까?

그전에 DB의 데이터를 전부 지워 준다. DB의 모든 video와 user를 없애준다.

이렇게 하지 않으면 연결을 할수 없다. 그래서 꼭 DB를 비워 줘야 한다.

현재 새로고침하면 에러가 난다. user가 없기 때문이다.

그래서 여기에서 체크를 해줄수 있다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404");
  }
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

만약 user가 없다면 이말은 user를 찾지 못했다는 거다.

res.render("404")를 return할거다. 그리고 status(404)도 추가했다.

404를 적어주는걸 잊지 않는다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found." });
  }
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

pageTitle도 추가해 준다. 이렇게 mongoose를 연습 해 봤다.