8.2 Mute / UnMute 🍙 이번시간에 해볼 것 : 🔊볼륨 ON(Unmute) / 🔇볼륨OFF(Mute) 참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement HTMLMediaElement - Web APIs | MDN HTMLMediaElement The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video. The HTMLVideoElement and HTMLAudioElement element..

8.0 Starting the Video Player 이번 chapter 8에서는 비디오플레이어에 대한 front-end부분을 해볼 것이다. 원래는 video의 속성으로 autoplay=true, controls=true라고 쓰면 자동으로 비디오플레이어가 될 수 있지만 이걸 직접 구현해보려고 한다! 🍕views > mixins > videoPlayer.pug를 만든다. mixin videoPlayer(video = {}) .videoPlayer video(src=`/${video.src}`) .videoPlayer__controls .videoPlayer__column span i.fas.fa-volume-up span |00:00 / 10:00 .videoPlayer__column span i.fas...

6.9 Recap and User Profile 인증(Authentication)에 대해 정리하기 📌 local 방식(username / password) username과 password를 post 방식으로 전달하고 우리가 설치해준 플러그인인 mongoose가 자동으로 체크를 해준다. 만약 password가 맞으면 passport에게 맞다고 알리고 쿠키를 생성 📌깃허브 방식 .social-login button.social-login--github a(href=routes.gitHub) span i.fab.fa-github |Continue with Github button.social-login--facebook span i.fab.fa-facebook |Continue with Facebook 깃허..

2.25 More Controllers 비디오를 클릭하면 비디오 상세 페이지로 이동하도록 하기 누군가가 비디오를 클릭하면 비디오 상세 페이지로 보이도록 하고 싶다. mixin을 수정한다. mixin videoBlock(video = {}) .videoBlock a(href=routes.videoDetail(video.id)) video.videoBlock__thumbnail(src=video.videoFile, controls=true, autoplay=true) h4.videoBlock__title=video.title h6.videoBlock__views=video.views ↑ videoBlock.pug 이제 videoBlock을 사용하는 곳에서 인자를 입력할 때 id: video.id를 추가로 보..

2.21 Home Controller **userRouter랑 videoRouter에서 각각 users부분이랑 videos부분 지우고 userController랑 videoController에서도 users랑 videos 지운다. 당연히 users.pug랑 videos.pug도 지운다. (필요없어져서 지우는 거임) db.js 만들기(진짜 데이터베이스 전에 임시로 만드는 파일) 이제 form 화면은 다 만들었고, 데이터베이스를 연동하기 전에 가짜로 전체 어플리케이션의 흐름을 만들어보겠다. 우선 home 화면을 보자. 여기에서 video 목록을 보여줘야 한다. 이것을 위해 (가짜 정보를 위한) db.js 파일을 하나 만든다. videos는 video의 배열이다. export const videos = [ {..

2.19 Join : Log In HTML 이번 파트에서는 Join.pug , Login.pug, partials/socialLogin.pug를 만들 것이다. 시작하기 전에 계획을 세워보자. README.md 수정함 home 화면에 .videos를 추가하고, 그 안에 h1 태그에 Video 텍스트로 추가한다. extends layouts/main block content .videos h1 Video ↑ home.pug video 부분은 mongoDB(데이터베이스) 부분 들어가기 전까지는 그냥 테스트 느낌으로 가짜로 두기만 한다. Join.pug 작성하기 extends layouts/main block content .form-container form(action=routes.join, method="..