노마드 코더/유튜브 클론

[JavaScript, Node.js] 유튜브 클론 정리 8장 (4) - 유저 프로필 페이지

LooanCheong 2023. 7. 6. 18:29
반응형

머리글

이번 시간에는 유저의 프로필 페이지를 제작해 보자.
기존에 했던 작업과 큰 차이가 없다.

유저 프로필 페이지

헤더에 프로필 주소로 갈 공간을 만들자.

                        ...
                        li
                            a(href=`/users/${loggedInUser._id}`) My Profile
                        ...

로그인 한 유저의 아이디를 통해서 접근을 하기로 했다.

그리고 유저 프로필 페이지 접근을 위한 컨트롤러를 제작해 보자.

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,
  });
};

params에 있는 유저의 id를 받아오고,
그를 기반으로 유저를 검색한다.

유저가 존재하지 않으면 404 페이지로 리턴해주고
유저가 존재한다면 유저의 프로필 페이지로 렌더링 해준다.
이때, 유저의 정보를 같이 넘겨준다.

라우터도 설정을 해줘야 한다.

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

'/'를 잘 넣어주어 경로 설정에 유의하자.

프로필 페이지는 추후에 작업을 추가적으로 할 예정이다.

마무리

이번 시간에는 유저 프로필 페이지를 제작했다.
기존에 했던 작업을 그대로 했기 때문에 추가적인 설명은 생략했다.

다음 시간에는 비디오의 owner에 대한 작업을 해보자.

반응형