8.1 Play Pause Functionality 🍔 assets > js > videoPlayer.js 파일을 만든다 그리고 이것을 사용할 수 있도록 main.js에서 videoPlayer.js 파일을 import 해준다. import "../scss/styles.scss"; import "./videoPlayer"; ↑ main.js 🍔 videoBlock.pug에 id를 따로 추가해준다 오직 자바스크립트에서만 사용하고 싶기 때문에 아이디를 추가하는 것이다. mixin videoPlayer(video = {}) .videoPlayer#jsVideoPlayer video(src=`/${video.src}`) .videoPlayer__controls .videoPlayer__column span i.f..

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...

7.0 User Profile 프로필 페이지의 스타일링을 한다. 프로필 수정 버튼과 비밀번호 변경 버튼을 만든다. 7.1 Edit User Profile export const getEditProfile = (req,res) => res.render("editProfile", {pageTitle: "Edit Profile"}); export const postEditProfile = (req, res) => { }; ↑ userController.js userController에서 editProfile을 getEditProfile과 postEditProfile로 만든다. userRouter.get(routes.editProfile, onlyPrivate, getEditProfile); userRouter..

원래 해당 강의에서는 페이스북으로 로그인하는 방법을 알려주지만 페이스북은 보안이 강화되어있어서 여러가지 인증을 하는데 매우 불편하고 어려움이 있다. 우리 사이트는 http인데 페이스북에서는 https 방식의 사이트만 허용하고 있으므로 localtunnel이라는 것을 설치하여 우리의 사이트를 임시로 https처럼 보이게 하더라도 막혀있다. 그래서 카카오로 로그인 방식을 구현했다. Kakao Developers 접속하여 로그인 해주기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 내 애플리케이션 > 애플리케이..

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 깃허..

babel-loader 진보한 자바스크립트를 끼워넣어서 어떻게 될지 시험해보겠다. import "../scss/styles.scss"; const something = async() => { console.log('something'); } ↑ main.js 작성하고 npm run dev:assets로 실행 근데 사실 만들어진 파일은 똑같다. 사실은 조치를 취해야 된다. 즉, 옛날 자바스크립트로 만들어주어야 한다. npm install babel-loader로 바벨로더를 설치한다. webpack.config.js로 가서 rule을 하나 더 추가한다. npm run dev:assets로 실행해본다. 그리고 static 폴더에 있는 main.js를 보면 사실 거의 같지만, 잘 작동한 것이다. 이렇게 하면 문..