Looan's 개발 연습장

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

머리글 이번 시간에는 세션 정보를 저장하는 방법을 알아보자. MongoStore 세션 데이터는 기본적으로 쿠키에 저장되지 않고 세션 id만 저장된다. 세션 데이터는 서버 쪽에 저장된다. 서버에 저장되는 default session storage는 MemoryStore인데 실제 사용을 위해 존재하는 것은 아니다. 그래서 우리는 세션을 데이터베이스에 저장하기 위해 session store를 사용한다. 우리는 connect-mongo를 이용해서 세션을 MongoDB에 저장한다. 이렇게 한다면 서버를 재시작해도 세션은 데이터베이스에 있기 때문에 로그인 정보를 잊지 않는다. 우선 설치를 해보자. npm i connect-mongo 그리고 mongoStore를 import 해서 사용할 수 있다. import Mon..

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

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

머리글 오늘은 로그인 과정에 대해서 알아보자. 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'의 경우 저장 전에 미들웨어를..

머리글 이번 시간에는 데이터베이스에 있는 데이터를 수정해 보자. Edit Database 우선 edit 페이지를 처리할 컨트롤러를 생성하자. const getEdit = async(req, res) => { const {id} = req.params; const video = await Video.findById(id); if (!video) { return res.render("404", {pageTitle: "Video not found." }); } return res.render("edit", {pageTitle: `Editing ${video.title}`, video}); }; 비디오가 존재한다면, 비디오의 페이지를 띄워주고 그렇지 않다면 404 페이지를 렌더링 한다. 그리고 edit 페이지를..