1. Document 만들기 - schema는 video의 구성요소와 데이터 형태를 갖추고 있음 - 유저가 비디오를 업로드할 때 해당 schema의 데이터들을 전송 - 생성일이나 meta 데이터는 자동으로 생성 - 비디오를 생성하려면 document가 필요함 // upload.pugextends baseblock content form(method="POST") input(placeholder="Title", required, type="text", name="title") input(placeholder="Description", required, type="text", name="description") input(placeholder="Hashtags,..
1. import 정리 - 앞으로 import 할 일이 많아질텐데, server.js가 불필요하게 난잡해질 수 있음 - 그리고 이 것들이 server와는 상관이 없으므로 init.js라는 새로운 파일을 생성하고 모든걸 초기화 - 즉 init.js는 필요한 모든 것들을 import 시키는 역할// init.jsimport "./db";import "./models/Video";import app from "./server";const PORT = 4000;const handleListening = () => console.log(`✅ Server listening on port http://localhost:${PORT}`);app.listen(PORT, handleListening);// server...
1. CRUD - Create, Read, Upload, Delete - 기존 프로젝트에 실제 데이터를 사용하여 업로드 구현 - src/models/Video.js 파일 생성 - 파일명을 대문자를 사용하는 것은 mongoose의 규칙 - model은 데이터가 어떻게 생겨먹었는지를 알려주는 것(schema)// src/models/Video.jsimport mongoose from "mongoose";const videoSchema = new mongoose.Schema({ title: String, description: String, createdAt: Date, hashtags: [{ type: String }], meta: { views: Number, rating: Nu..
1. Mongoose - https://mongoosejs.com/ Mongoose ODM v8.8.0Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose. const mongoose = require('mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/test'); const Cat = mongoose.model('Cat', { name:mongoosejs.com - nodejs와 mongodb를 이어주는 가교 2. 설치 - 프로젝트 내 terminal > npm i mongoose - s..
1. MongoDB - MongoDB를 쓰는 이유는 sql-based(like excel)가 아닌 JSON-like-document - https://www.mongodb.com/ko-kr/docs/manual/ MongoDB란 무엇인가요? - MongoDB 매뉴얼MongoDB Atlas UI에서 무료 클러스터, 자동 확장 클러스터 또는 서버리스 인스턴스를 생성하세요. 자세한 내용은 MongoDB Atlas 문서의 클러스터 유형 선택을 참조하세요.자체 호스팅 배포서버의 경우www.mongodb.com 2. 설치 - 공홈 > 리소스 > 서버 > MongoDB Community > Windows에 설치 > MongoDB 다운로드 센터 - 설치중 다음버튼 누르다보면 Complete- https://ww..
1. POST - 그동안은 router에서 get만 했었지만 backend에 post까지 하는 방법을 배워야함 - 우선 현재의 목표는 db에 있는 모든 것들을 나열 - 이미 home.pug에서 구현이 된 상태 - 유저가 한번에 1개의 영상만 볼 수 있도록 해야함 - 그 다음으로는 영상을 업로드 할 수 있어야 함 - https://github.com/Daniel-Jeon/wetube-loaded/commit/997d75b5d7fa8c0c90b5008f17d92954d2af83ee Study post(1) :) · Daniel-Jeon/wetube-loaded@997d75bbefore study db, study post!github.com // watch.pugextends base.pugblock c..
1. Mixins - 데이터를 받을 수 있으며 스마트 한 partial이 mixin - 기존의 footer.pug은 하단의 고정된 한 조각으로 되었고 데이터를 받을 수 없었음 - 하지만 반복되는 HTML block에서 서로 다른 데이터가 필요한 경우가 있음 - 유튜브를 보면 사이드바, 메인, 인기 동영상 페이지, 각 채널들 등등 - 반복되고 재사용되는 부분들을 최소화 시켜야함 - partial은 단순한 HTML일 뿐이었지만, mixin은 뭔가를 해줘야 함 - https://github.com/Daniel-Jeon/wetube-loaded/commit/0001e632cf4a60a4fb0e6c1f9daee50c86ff0dbd Study Mixins ! · Daniel-Jeon/wetube-loaded@000..
1. Conditional - 특정 상황의 유저에게만 보이게 하기 위해 Template에 작성// base.pugdoctype htmlhtml(lang="ko") head title #{pageTitle} | Wetube link(rel="stylesheet" href="https://unpkg.com/mvp.css") body header h1=pageTitle main block content include partials/footer.pug - h1=pageTitle 과 h1 #{pageTitle} 은 같긴 하지만 여기선 variable을 다른 text와 섞고 싶지 않기 때문임 - ta..
1. Partial - View 파일마다 매번 복붙하여 화면을 통일해도 되지만 고정된 부분들을 따로 관리하고 싶을 때 사용하는 것이 Partial// src/views/partials/footer.pugfooter © #{new Date().getFullYear()} Wetube// home, watch.pug에 include include partials/footer- https://pugjs.org/language/includes.html Includes – PugIncludes Includes allow you to insert the contents of one Pug file into another. //- index.pug doctype html html include includes..
0. Returning HTML - 우리는 지금까지 HTML을 return 할때 controller에서 res.send()를 사용했음 - 한줄 정도의 HTML을 보내는건 상관없으나 한 페이지 전체를 보낼 경우 매번 많은 내용을 작성해야함 - 이 부분을 개선하기 위해 Template Engine을 사용할 것임 1. Pug - Template을 이용하여 View 만들기를 돕는 Engine - https://github.com/pugjs/pug/tree/master/packages/pug#syntax pug/packages/pug at master · pugjs/pugPug – robust, elegant, feature rich template engine for Node.js - pugjs/puggithu..