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..

머리글 이번 시간에는 비디오를 업로드해보자. 비디오 업로드 우선 파일 업로드와 마찬가지로 업로드할 자리를 만들어주자. form(method="POST", enctype="multipart/form-data") label(for="video") Video File input(type="file", accept="video/*", required, id="video", name="video") 모든 형식의 비디오를 accept 했고, required 옵션으로 필수로 넣게 지정했다. 그리고 multer를 사용하기 위해 enctype를 설정해 주었다. 그리고 미들웨어를 생성해 주자. 기존의 아바타와 같은 미들웨어를 사용해도 상관은 없지만, 파일 사이즈의 제한을 위해서 하나 더 생성해 보자. export cons..

머리글 이번 시간에는 유저의 아바타 기능을 위해 파일 업로드 하는 방법을 알아보자. 파일 업로드 우선 업로드를 위해선 업로드할 공간을 만들어줘야 한다. 프로필 수정 페이지를 변경해 주자. form(method="POST", enctype="multipart/form-data") label(for="avatar") Avatar input(type="file", id="avatar", name="avatar", accept="image/*") ... label과 아바타 파일을 업로드하기 위한 input을 만들어주었다. 그리고 이미지 형식만 선택할 수 있게 accept 항목을 정해주었다. 그리고 미들웨어를 사용해야 하는데 이를 설치해 보자. npm i multer Multer는 파일을 업로드할 수 있게 해 준..

머리글 이번 시간에는 유저의 비밀번호를 변경하는 방법에 대해서 알아보자. 비밀번호 변경 앞서 유저의 정보를 변경했던 것과 크게 차이가 없다. 일단 페이지를 하나 생성해 주자. 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..

머리글 이번 시간에는 깃허브 로그인을 구현해 보자. Github Login 우선 흐름을 간단히 살펴보자. 우선 사용자를 깃허브(로그인하려 하는 사이트)로 보낸다. 그러면 사용자는 해당 사이트에 로그인을 한다. 우리의 사이트에 대한 정보 접근 권한을 승인하고 깃허브는 우리에게 사용자를 돌려보낸다. 이 단계에서 token을 같이 redirect 해준다. 이 token을 통해 사용자의 정보를 받아올 수 있다. 우선 기본적으로 설정을 진행해 보자. 깃허브의 세팅으로 들어가 준다. 그리고 목록의 Developer settings에 들어가 준다. 그리고 OAuth Apps를 클릭하자. 그리고 New OAuth App을 클릭하면 다음과 같이 뜬다. 이름은 아무거나 넣어주고, URL은 'http://localhost:..

머리글 이번 시간에는 쿠키에 대해 조금 더 자세히 알아보고 env 파일에 대해서도 알아보자. Cookie 쿠키에는 다양한 프로퍼티가 존재한다. 우선 Secret이다. secret는 우리가 쿠키에 사인할 때 사용하는 string이다. 쿠키에 사인을 하는 이유는 backend가 쿠키를 줬다는 것을 보여주기 위함이다. 또한 session hijack이라는 공격 방지를 위함이다. 따라서 Secret는 길고 강력하고 무작위성을 지녀야 한다. 다음은 Domain이다. domain은 말 그대로 이 쿠키를 만든 backend가 누구인지 알려준다. 우리가 인터넷 사이트를 도메인이라고 하는 것과 같은 이치다. 쿠키는 domain에 있는 백엔드로만 전송된다. 예를 들어 지금 우리 사이트의 domain은 localhost 이..

머리글 이번 시간에는 세션과 쿠키를 바탕으로 유저의 로그인 상태를 구현해 보자. Logged In 기존에 로그인 자체는 구현했지만 로그인 상태를 구현을 하지 않아 로그인이 제대로 진행되지 않았었는데, 이 부분을 세션과 쿠키를 통해 해결해 보자. 서버는 유저를 기억하는 것이 아니라 유저가 올바른 접근 권한(쿠키)을 가져오면 알맞은 정보를 제공해 주는 방식이다. 우선 이를 위해 유저 컨트롤러에서 유저의 로그인 과정에 추가해야 할 것이 있다. ... req.session.loggedIn = true; req.session.user = user; ... 유저마다 서로 다른 쿠키를 가지고 있기 때문에, 서로 다른 session을 가지고 있다. 따라서 유저의 session에 로그인했다는 정보를 보내주자. 그리고 유..

머리글 이번 시간에는 세션과 쿠키에 대해서 알아보자. Session, Cookie 세션이랑 백엔드와 브라우저 간에 어떤 활동을 했는지 기억하는 것을 말한다. 즉, 브라우저와 백엔드 사이의 memory, history와 같은 개념이다. 만약 어떤 사이트에 로그인되어 있다면, 현재 사용하고 있는 브라우저와 그 사이트의 백엔드 사이에 세션이 존재한다는 것이다. 세션에는 보통 2주정도의 유효기간이 존재한다. 만약 기간이 지난다면 로그인을 다시 해주어야 한다. 세션이 작동하려면 백엔드와 브라우저가 서로에 대한 정보를 가지고 있어야 한다. 일반적으로 HTTP 요청을 보내고 처리가 완료되면 그 연결은 종료된다. 연결에 지속성이 없다. 이러한 것을 Stateless 라고 한다. 이 상태에서는 서버와 브라우저 양쪽 모두..