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.20 Change Profile HTML 이번 파트에서는 editProfile.pug , changePassword.pug, upload.pug, editVideo.pug를 만들 것이다. (form으로 된 페이지 몰아서 만드는 거임) join과 login은 했고 User Detail은 form 페이지가 아님 Edit Profile은 form 페이지야. --> 이거 작업하기 editProfile.pug 작성하기 join에서 사용한 것과 같은 클래스 그대로 쓴다. .form__container 이걸 모든 곳에 그대로 쓸 것이다. 그리고 이 안에 form 태그를 추가한다. extends layouts/main block content .form-container form(action=`/users${rou..

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

2.18 Search Controller partials/header.pug에서 Search 검색창 만들기 partials/header 파일을 조금 바꾸겠다. 칼럼을 하나 더 추가하고, 여기에 form을 하나 추가한다. action은 routes_search으로, method는 get으로 한다. url에 입력한 내용을 보고 싶기 때문에 get으로 한다. header.header .header__column a(href=routes.home) i.fab.fa-youtube .header__column form(action=routes.search, method="get") input(type="text", placeholder="Search by term...") .header__column ul li a..

2.17 Template Variables in Pug locals를 이용해 전역 범위에 변수를 추가하는 방법을 배웠다. 한 템플릿에만 변수를 추가하려면 어떻게 해야 할까? 템플릿마다 다른 정보를 가질 수도 있을 테니까. 어떤 템플릿에는 비디오, 다른 템플릿에는 사용자, 이렇게 다를 수 있다. (siteName의 경우, 어떤 페이지는 join, login,users,videos 이런식으로 이름이 달라질 것이다.) doctype html html head link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.15.2/css/all.css", integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZM..

2.16 Local Variables in Pug 미들웨어는 레이어 같은 구조 템플릿에 정보를 추가할 시간이다. 컨트롤러에 있는 정보를 템플릿에 추가하는 법에 대한 것이다. 한 템플릿에만 추가하거나 전체 템플릿에 추가할 수 있다. 템플릿 전체에 추가하는 방법부터 설명하겠다. 헤더가 라우트 객체에 접근하도록 하고 싶다. 미들웨어를 사용해야 한다. 알겠지만, 미들웨어는 레이어 같은 것이다. 위에서 밑으로 한단계씩 내려간다. (top-bottom 구조) 처음에 view engine을 pug로 설정했다. cookie를 파싱하고, body에 담긴 정보를 파싱한다. 그리고 helmet, morgan이 있다. 그 후에 컨트롤러, 라우트들이 있다. helmet을 가장 위에 두도록 하자. localsMiddleware ..