Projects/유튜브 클론코딩(73)
-
[유튜브 클론코딩] 3.0 MongoDB and Mongoose
3.0 MongoDB and Mongoose MongoDB? 데이터베이스는 크게 두 종류의 데이터베이스가 있음 - 1) SQL 2)NoSQL MongoDB는 NoSQL로 구분된다. MongoDB는 더 적은 규칙과 더 적은 절차로 작업이 가능한 데이터베이스이다. 많은 사람들이 MongoDB를 사용하고 있다. 엄청 가볍고 초보자들도 쉽게 다룰 수 있기 때문에, 사용하기 엄청 쉽고 직관적으로 작동한다. MongoDB 설치하기 MongoDB를 윈도우에서 설치하는 방법을 검색해서 설치한다 (MongoDB community Server 설치하고 환경변수 설정하는 법 검색해서 하면 된다) 그리고 VScode를 다시 실행한 후, mongod 라고 쳐보고 mongo라고 쳤을 때 작동하면 된 것이다(나갈땐 exit) Mo..
2021.03.01 -
[유튜브 클론코딩] 2.25 More Controllers
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를 추가로 보..
2021.02.24 -
[유튜브 클론코딩] 2.24 Log In and User Profile Controller
2.24 Log In and User Profile Controller Login 화면 만들기 Login도 비슷한 작업을 해야하므로 이전의 login은 getLogin으로 이름을 바꾸고 postLogin 함수를 만든다. login에는 할 일이 많지는 않다. 로그인을 하면 그냥 로그인 버튼만 클릭하는 것이다. 만약 로그인에 성공했다면 routes.home으로 redirect하면 돼. join의 흐름과 같지. export const getLogin = (req,res) => res.render("login", {pageTitle: "Login"}); export const postLogin = (req,res) => { res.redirect(routes.home); } ↑ userController.js ..
2021.02.24 -
[유튜브 클론코딩] 2.23 Join Controller
2.23 Join Controller search화면 작업하기(home화면과 유사함) 이제 다음으로 search 화면을 작업할 것이다. search도 home 화면과 거의 비슷하다. 일단은 비디오 검색 기능을 구현하지는 않겠다.(데이터베이스를 아직 안했기 때문에) videoController.js에서 search에 videos(데이터베이스)를 전달해준다. search.pug도 똑같이 작업해준다.(mixin을 include해서) export const search = (req, res) => { const {query: { term: searchingBy }} = req; res.render("search", {pageTitle: "Search", searchingBy, videos}); }; ↑ vide..
2021.02.24 -
[유튜브 클론코딩] 2.22 Home Controller Part 2
2.22 Home Controller Part 2 mixin pug에서 데이터만 다르고 반복되는 HTML코드를 여러 템플릿에서 사용하기 위해 mixin을 제공한다. (다른 정보, 같은 구조) 예를 들어, 여기 home 페이지에는 비디오가 한칸으로 보이겠지만 누군가의 profile 페이지에서도 그 비디오를 볼 수 있어야할 것이다. 따라서, HTML을 재활용 할 것이다. footer를 include해서 재활용하는 것처럼, 비디오 블록 html 코드를 만든다. views > mixin>videoBlock.pug 작성하기 views 안에 mixin이라는 폴더를 만들고 videoBlock.pug 파일을 만든다. 여기서부터 조금 다르다. html 코드를 처음부터 작성하지 않을 것이다. mixin이라고 적고 그 다음..
2021.02.23 -
[유튜브 클론코딩] 2.21 Home Controller
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 = [ {..
2021.02.23