Looan's 개발 연습장

머리글 이번 시간에는 각 영상의 업로더를 표시하는 방법과 본인 영상의 경우 수정이 가능하도록 하는 법을 알아보자. 비디오 업로더 우선 기존에 했던 작업들을 조금씩 수정해주어야 한다. 우선 컨트롤러를 수정하자. const video = await Video.findById(id); -> const video = await Video.findById(id).populate("owner"); ... 우선 아이디를 기반으로 찾았던 비디오를 populate를 통해 검색해 주었다. populate는 Mongoose의 기능이다. 이는 문서의 지정된 경로를 다른 컬렉션의 문서로 자동 교체하는 프로세스이다. 쉽게 풀어서 설명하면 비디오뿐 아니라 비디오 owner의 정보도 같이 넘기겠다는 얘기다. 그리고 비디오의 업로드를..

머리글 이번 시간에는 유저의 프로필 페이지를 제작해 보자. 기존에 했던 작업과 큰 차이가 없다. 유저 프로필 페이지 헤더에 프로필 주소로 갈 공간을 만들자. ... 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..

머리글 이번 시간에는 유저의 비밀번호를 변경하는 방법에 대해서 알아보자. 비밀번호 변경 앞서 유저의 정보를 변경했던 것과 크게 차이가 없다. 일단 페이지를 하나 생성해 주자. extends ../base block content form(method="post") input(placeholder="Old Password") input(placeholder="New Password") input(placeholder="New Password Confirmation") input(value="Change Password", type="submit") 그리고 라우터도 만들어주자. ... userRouter .route("/change-password") .all(protectorMiddleware) .get(..

머리글 프로필 수정 우선 프로필을 수정하기 위해 적당히 페이지를 하나 만들어 줍시다. 이미 여러 번 다뤘던 내용이므로 자세한 내용은 생략하고 넘어갑시다. 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=loggedInUse..

머리글 이번 시간에는 로그아웃에 대해 알아보자. Logout 로그아웃은 굉장히 간단하게 구현이 가능하다. export const logout = (req, res) => { req.session.destroy(); return res.redirect("/"); }; 이런 식으로 session을 destroy 하게 되면 로그아웃이 가능하다. 마무리 로그아웃까지 구현하며 7장에서의 모든 내용을 마무리했다. 계정을 생성하는 방법을 배웠고, 상태 코드에 대해서도 알아보았으며, 로그인을 구현하는 방법도 배웠다. 또한, 세션과 쿠키에 대해서 배웠고 로그인 상태로 만드는 법도 알아보았으며 환경 변수등과 같은 부가적인 요소도 배웠다. 끝으로 이를 종합하여 github의 api를 이용해서 github 로그인도 구현해 보..

머리글 오늘은 라우터를 통해 HTML 페이지를 렌더링 하는 방법을 알아보자. HTML 렌더링 라우터를 통해 Html을 리턴하는 방법에는 2가지가 있다. 1. res.send(HTML 내용) 을 통해 렌더링 하는 방법 const see = (req, res) => res.send("Hi!"); 이런 방식으로 렌더링이 가능하지만, Html의 소스 코드가 복잡해질수록 불편한 방법이 될 것이다. 2. Pug를 사용해서 렌더링 하는 방법 Pug는 템플릿 엔진이다. 템플릿을 통해 view를 만드는 작업을 도와준다. 우선 Pug를 설치하자. npm i pug 그리고 express가 html 헬퍼로 pug를 사용하게 설정해줘야 한다. 서버 파일로 가서 다음 세팅을 해주자. app.set("view engine", "p..

글을 시작하며 우선 노마드 코더와 관련하여 내돈내산으로 진행하는 후기임을 알린다!! 한창 무언가를 해야겠다고 마음은 먹고 무엇을 해야 하는지 감도 안 잡히던 때, 유튜브에서 한 채널을 만나게 된다. https://www.youtube.com/c/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94NomadCoders 노마드 코더 Nomad Coders 한국인 린과 콜롬비아인 니꼴라스의 프로젝트 "노마드 코더" 입니다. 2015년 떠나, 현재까지 원하는 곳에서 일하며, 살고 있습니다. 📌 니콜라스와 무료로 코딩 공부하기 : https://nomadcoders.co www.youtube.com 바로 노마드 코더! 니콜라스라는 프로그래머가 운영하고 있는 유튜브이다. 단순 유튜브만 ..