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

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를 보면 사실 거의 같지만, 잘 작동한 것이다. 이렇게 하면 문..

3.12 Searching Videos 정규표현식을 사용하여 Search 구현하기 이제 검색 화면을 수정할 것이다. 정규 표현식 이라는 것이 있다. 이것은 string으로부터 무언가를 가져오는 것이다. 우리가 정규 표현식으로 하고 싶은건 handsome을 찾던 Handsome을 찾던 대소문자를 구별하지 않고 찾도록 하면서 내가 찾는 단어가 포함된 모든 걸 찾는 것이다. export const search = async(req, res) => { const {query: { term: searchingBy }} = req; let videos = []; try{ videos = await Video.find({title: {$regex: searchingBy, $options: "i"}}); }catch(..

3.11 Installing ESLint ESLint의 필요성? 일단 지금 search를 해보면 videos가 정의되어있지 않다고 뜬다. export const search = (req, res) => { const {query: { term: searchingBy }} = req; // const searchingBy = req.query.term 과 같은 코드 res.render("search", {pageTitle: "Search", searchingBy, videos}); // searchingBy = searchingBy 인 경우 하나로 줄여쓸 수 있음 }; ↑ videoController.js 여기 나는 videos라는 variable 이름을 가지고 있지만 videos는 variable로나 g..

3.10 Deleting a Video 이번시간에는 비디오를 삭제하는 것을 해볼 것이다. 비디오 추가(upload), 비디오 수정(editVideo), 비디오 시청(videoDetail)은 했으니 비디오 삭제(deleteVideo)를 할 시간이다. 비디오 삭제 만들기(deleteVideo) 누군가 비디오 삭제를 누른다면 URL로 가서 이 부분의 URL을 가져와서 해당하는 비디오를 삭제할 것이다. 그러기 위해서는 URL에서 id를 받아와야 하므로 routes.js에서 deleteVideo도 함수 형식으로 바꾸어 주어야 한다. deleteVideo: (id) => { if(id){ return `/videos/${id}/delete`; }else{ return DELETE_VIDEO; } } ↑ routes..