Webpack이란 - 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러 - 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구 ** 즉, 프로젝트 작업을 하다보면 HTML CSS Javascript Image 등 파일 수가 엄청 많아지는데 이를 하나로 묶어주는 도구를 말하는 것이다. ★ 노마드코더 강의가 현 기준으로 몇 년 된 강의라서 웹팩도 바뀐 점이 많아 강의를 그대로 따라하면 안되는 부분이 많았다. 다행히 덧글에 천사😇분들께서 해결방법을 알려주셔서 그대로 따라했다!,,,, 1. extract-text-webpack-plugin가 webpack이 4버전으로 넘어..

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

3.9 Editing a Video 이번 시간에는 비디오 수정할 수 있는 버튼 만들기(edit video)를 할 것이다. 비디오를 수정할 수 있는 버튼을 만들어서, 일단은 모든 사람이 수정할 수 있도록 하고 나중에 유저부분에서 해당 버튼은 비디오를 업로드한 사람에게만 보일 수 있도록 수정할 것이다. routes.js에서 editVideo도 함수 형식으로 바꾸기 editVideo: (id) => { if(id){ return `/videos/${id}/edit` }else{ return EDIT_VIDEO; } }, ↑ routes.js routes.js로 가서 editVideo 부분을 바꾼다. editVideo도 id를 받아와야 하기 때문에 함수 형식으로 바꾸는 것이다. videoDetail.pug에서 ..

3.8 Getting Video by ID 이번 시간에는 비디오 링크를 클릭하면 해당 비디오의 상세정보 페이지로 이동하게 하는 것을 할 것이다. (즉 videoDetail 화면을 수정할 것) videoDetail 수정하기(controller) 비디오 링크를 클릭하면 해당 비디오의 상세정보 페이지로 이동하도록 하기 위해서는 해당 비디오의 id를 받아와야 한다. 이것은 req.params로 받을 수 있다. search에 req.query에서 term을 받은 것처럼 video id를 받는 것이다. export const videoDetail = (req, res) => { console.log(req.params); res.render("videoDetail", {pageTitle: "Video Detail"..