Looan's 개발 연습장

머리글 오늘은 로그인 과정에 대해서 알아보자. 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 페이지를..

머리글 이번 시간에는 데이터베이스를 생성해 보자. DataBase 우선 기존에 작성했던 form을 조금 수정해서 비디오 스키마에 맞는 정보를 입력받을 수 있게 해 보자. ... block content form(method="POST") input(placeholder="Title", required, type="text", name="title") input(placeholder="Description", required, type="text", name="description") input(placeholder="Hashtags", required, type="text", name="hashtags") input(type="submit", value="Upload Video") 그리고 라우터를 수정해..

머리글 이번 시간에는 CRUD에 대해 알아보고, Schema와 Model에 대해서 알아보자. CRUD 1. C(Create) 생성 2. R(Read) 읽기 3. U(Update) 수정 4. D(Delete) 삭제 이 4가지를 의미하는 단어를 CRUD라고 한다. 이는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능을 묶은 것이다. 우선 기능을 만들기 전에 Model을 하나 생성해 보자. Model, Schema 우리는 mongoose를 통해 DB와 소통하고 있다. 따라서 mongoose에게 우리의 애플리케이션에 있는 데이터의 형태를 알려줄 필요가 있다. 구체적인 값을 지정하는 것이 아닌 어떤 타입을 가지는지 알려주면 된다. 이때, model의 생김새를 Schema라고 한다. 그럼 비디오 모델..

머리글 이번 시간에는 MongoDB에 대해서 알아보고 연결까지 해보도록 하자. MongoDB? https://www.mongodb.com/ MongoDB: The Developer Data Platform Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy. www.mongodb.com MongoDB는 다목적의 document 기반의 분산 데이터베이스다. 일반적으로 많은 데이터베이스는 sql 기반이다. 즉, 엑셀과 비슷한 형태의 행 기반 데이터베이스다. 하지만 MongoDB는 문서 기반의 데이터베이스다. Mong..

머리글 이번 시간에는 데이터베이스에 접근하는 방법을 알아보자. How? 우선은 앞서 만들었던 가짜 비디오 데이터베이스를 다시 사용하자. const videos = [ { title: "First Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, { title: "Second Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, { title: "Third Video", rating: 5, comments: 2, createdAt: "2 mins ago", views: 59, id: 1, }, ]; 그리고 홈페이지에 접속하면 비디오들..