끄적끄적

0. building the backend 1. nodemon.json 의 init.js 를 일반적인 javascript코드로 바꿔야 함 Babel CLI사용할거 npm install --save-dve @babel/core @babel/cli npm run build:server >> build/ 생김 >> src에있던 파일들 일반js로바뀜 client폴더는 안바껴야함 > start 추가후, npm start view 폴더는 안들어가있음 >> copy필요 >> 근데 server.js 에 views폴더위치가 세팅되어있어서 괜찮다고 함 ㅇㅅㅇ [package.json] "scripts": { "start": "node build/init.js", "buil..

노마드/유튜브 2022. 9. 8. 16:12

1. intro 2. comment Models model 만들기 [Comment.js] import mongoose from "mongoose"; const commentSchema = new mongoose.Schema({ text: { type: String, required: true }, owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" }, video: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "Video" }, createdAt: { type: Date, required: true, default: Date.now }, }); const Co..

노마드/유튜브 2022. 9. 5. 15:22

1. installation middleware >> publicOnlyMiddlewares 사용시 알림뜨도록 템플릿에 사용자에게 메시지보내는 기능 >> session근거라 한 사용자만 볼 수 있음 npm i express-flash npm i connect-flash [server.js] import flash from "express-flash"; app.use(flash()); ========================== [middlewares.js] export const protectorMiddleware = (req, res, next) => { if (req.session.loggedIn) { next(); } else { req.flash("error", "Not authorized")..

노마드/유튜브 2022. 9. 5. 14:24

0. intro 다운받은 영상 문제들 수정할거 FFmpeg 로 webm >> mp4변환, 비디오썸네일 추출 무료로 하기위해 webAssembly쓸거 >>프론트에서 매우빠른 코드를 실행하게 해줌 ffmpeg.wasm > 비디오변환위해 사용자의 컴퓨터(브라우저) 사용함 (우리의 서버가 아닌) 1. transcode video 만들어진 binaryData :: 밑에코드에서 만들어진 event.data 이거임. blob recorder.ondataavailable = (event) => { videoFile = URL.createObjectURL(event.data); // blob:http://localhost:4000/938d5a5f-4b94-4bf8-ae62-75f4cb083194 // >> 브라우저 메모..

노마드/유튜브 2022. 9. 2. 15:37

0. recorder setup getUserMedia 사용할거 [upload.pug] block scripts script(src="/static/js/recorder.js") ======================================= [webpack.config.js] module.exports = { entry: { .. recorder: "./src/client/js/recorder.js", }, ========================== [src/js/recorder.js] const startBtn = document.getElementById("startBtn"); const handleStart = async () => { const stream = await naviga..

노마드/유튜브 2022. 9. 1. 14:44

1. register view controller 영상 조회수 템블릿 렌더링않하는 view >> api view router/apiRouter.js 뒤에 렌더링없이 status만 할꺼면 sendStatus() 로 써야함 [apiRouter.js] import express from "express"; import { registerView } from "../controllers/videoController"; const apiRouter = express.Router(); apiRouter.post("/videos/:id([0-9a-f]{24})/view", registerView); export default apiRouter; ======================== [videoControlle..

노마드/유튜브 2022. 9. 1. 13:45

1. TimeLine 시간조정바 [watch.pug] div input(type="range",value=0 step="1", min="0")#timeline =============== [videoPlayer.js] const timeline = document.getElementById("timeline"); const handleLoadedMetadata = () => { ... timeline.max = Math.floor(video.duration); }; const handleTimeUpdate = () => { ... timeline.value = Math.floor(video.currentTime); }; const handleTimelineChange = (event) => { const..

노마드/유튜브 2022. 8. 31. 21:59

1. intro font-awesome 복붙 적용 [base.pug] head title #{pageTitle} | Wetube link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css") src/client/scss/components, screens 폴더 추가 components>> headers, footers등 용 screens >> home, search ... url용 2. styles

노마드/유튜브 2022. 8. 30. 17:26

1. play setup 기존 base.pug >> main.js 말고 따로 videoPlayer.js 만들어서 비디오페이지에 가면 그 때 그 비디오페이지 자바스크립트를 로드할거임 >> 웹팩 entry를 추가해야함 module.exports = { entry: { main: "./src/client/js/main.js", // 변경할 src code위치 videoPlayer: "./src/client/js/videoPlayer.js", }, output: { filename: "js/[name].js", // 결과물 어디다 넣을건지 ~~ }, 2. play pause 기본셋팅 [watch.pug] extends base.pug block content video(src="/"+video.fileUrl, ..

노마드/유튜브 2022. 8. 30. 17:04

1. intro font-awesome 복붙 적용 [base.pug] head title #{pageTitle} | Wetube link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css") src/client/scss/components, screens 폴더 추가 components>> headers, footers등 용 screens >> home, search ... url용 2. styles

노마드/유튜브 2022. 8. 30. 15:39

1. intro 백엔드js 는 babel-node로 처리, 프론트는 webpack으로 처리 일반css말고 scss사용할거 >> 이걸 css로 바꿔주는과정 필요 이런거 다 webpack 이 함 실무에서 웹팩을 직접쓸일은 없을거임. 이미 웹팩내장된 다른걸씀 gulp >> webpack 쉬운 대체버전 (but 그만큼 유용하진 않음) 2. webpack config jpg 용량줄이기,.. 코드를 압축, 변형, 최소화 시킴 entry : src code [comandLine] npm i webpack webpack-cli --save-dev (== -D) ======================= src/client/js/[main.js] 생성 const hello = async () => { alert("hi ..

노마드/유튜브 2022. 8. 29. 14:38

1. user profile 내영상 리스트 보는기능 추가 db - videos에 owner추가필요, user가 video목록가지도록 추가필요(차후) [base.pug] li a(href=`/users/${loggedInUser._id}`) My Profile ====================== [userRouter.js] userRouter.get("/:id", see); ====================== [userController.js] export const see = async (req, res) => { const { id } = req.params; const user = await User.findById(id); if (!user) { return res.status(404)...

노마드/유튜브 2022. 8. 29. 00:53

1. uploads 1. mpi i Multer Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency. 1. edit-profile에 file input 추가, image만 되도록 설정 form(method="POST") label(for="avatar") Avatar input(type="file", id="avatar", name="avatar", accept="image/*") 2. form (enctype="multipart/form-data" )>> encod..

노마드/유튜브 2022. 8. 27. 22:59