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 페이지를..

머리글 이번 시간에는 쿼리를 검색해 보자. Query 우선 비디오 컨트롤러에 비디오 모델을 import 해주자. import Video from "../models/Video"; 그리고 mongoose의 공식 문서에서 Query와 관련된 자료를 한 번 보자. https://mongoosejs.com/docs/queries.html Mongoose v7.0.3: Queries Mongoose models provide several static helper functions for CRUD operations. Each of these functions returns a mongoose Query object. A mongoose query can be executed in one of two ways. ..

머리글 이번 시간에는 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, }, ]; 그리고 홈페이지에 접속하면 비디오들..

머리글 이번 시간에는 간편하게 CSS 작업을 해주는 MVP.css와 조건문, 반복문, 그리고 Pug의 기능인 Mixin에 대해서 알아보자. MVP.css 아무래도 개발 중인 화면은 늘 못생겼다. 그래서 이를 보완하기 위해 css 작업을 간단하게 도와주는 스크립트를 하나 써보려고 한다. 바로 MVP.css다. https://andybrewer.github.io/mvp/ MVP.css - Minimalist stylesheet for HTML elements A decent MVP in no time More building and less designing with "set and forget" styling. "Uber for X" brainstorming session andybrewer.github...