Looan's 개발 연습장

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

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

머리글 오늘은 로그인 과정에 대해서 알아보자. Login 우선 로그인 템플릿을 생성해 보자. extends base block content if errorMessage span=errorMessage form(method="POST") input(placeholder="Username", name="username", type="text", required) input(placeholder="Password", name="password", type="password", required) input(type="submit", value="Login") hr div span Don't have an account? a(href="/join") Create one now → 우선 POST 형식의 form을..

머리글 이번 시간에는 중복 ID의 생성을 방지해 보자. Validation 우선 계정을 아무거나 하나 생성해 준다. 그리고 unique로 지정한 항목의 내용을 똑같이 해서 하나를 더 생성해 보자. 그럼 에러를 만나게 된다. 이 에러는 이미 존재하는 데이터를 저장할 때, 발생한다. unique로 지정한 항목은 하나만 저장이 가능한데, 이를 여러 개 저장하려고 해서 발생한 문제이다. 그러면 계정을 생성할 때, 미리 이를 방지해주어야 한다. 계정을 생성하는 컨트롤러를 조금 수정해서 해결이 가능하다. export const postJoin = async (req, res) => { const { name, username, email, password, password2, location } = req.body..

머리글 이번 시간에는 계정 생성을 해보자. 유저 스키마 생성 우선 유저의 정보를 담은 스키마를 생성하자. import mongoose from "mongoose"; const userSchema = new mongoose.Schema({ email: { type: String, required: true, unique: true }, username: { type: String, required: true, unique: true }, password: { type: String, required: true }, name: { type: String, required: true }, location: String, }); const User = mongoose.model("User", userSchema..

머리글 이번 시간에는 데이터 베이스 삭제하는 방법과 검색하는 방법에 대해서 알아보자. Delete Database 우선 적당히 delete 페이지로 이어질 링크를 하나 생성해 주자. a(href=`{video.id}/delete`) Delete Video 없는 라우터를 사용했으므로, 라우터도 하나 생성해 주자. import { ... deleteVideo, } from "../controllers/videoController"; ... videoRouter.route("/:id([0-9a-f]{24})/delete").get(deleteVideo); 이제 컨트롤러도 생성해 보자. export const deleteVideo = async (req, res) => { const { id } = req.pa..

머리글 이번 시간에는 Middleware에 대해서 알아보자. Middleware 이미 express에서 한 번 사용을 했던 적이 있다. 무언가를 하기 전에 작업을 하고 next() 함수를 호출하여 다음 작업으로 넘어간다. Mongoose에서도 비슷하게 작동한다. 비디오 스키마에 저장을 하기 전에 작동할 미들웨어를 하나 생성해 보도록 하겠다. videoSchema.pre("save", async function () { this.hashtags = this.hashtags[0] .split(",") .map((word) => (word.startsWith("#") ? word : `#${word}`)); }); 우선 "save"의 경우 우리가 save 할 때, 그리고 'pre'의 경우 저장 전에 미들웨어를..