Projects/유튜브 클론코딩(73)
-
[유튜브 클론코딩] 2.20 Change Profile HTML
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..
2021.02.22 -
[유튜브 클론코딩] 2.19 Join : Log In HTML
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="..
2021.02.22 -
[유튜브 클론코딩] 2.18 Search Controller
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..
2021.02.22 -
[유튜브 클론코딩] 2.17 Template Variables in Pug
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..
2021.02.18 -
[유튜브 클론코딩] 2.16 Local Variables in Pug (local 변수를 global 변수로 사용하도록 해주는 미들웨어 만들기
2.16 Local Variables in Pug 미들웨어는 레이어 같은 구조 템플릿에 정보를 추가할 시간이다. 컨트롤러에 있는 정보를 템플릿에 추가하는 법에 대한 것이다. 한 템플릿에만 추가하거나 전체 템플릿에 추가할 수 있다. 템플릿 전체에 추가하는 방법부터 설명하겠다. 헤더가 라우트 객체에 접근하도록 하고 싶다. 미들웨어를 사용해야 한다. 알겠지만, 미들웨어는 레이어 같은 것이다. 위에서 밑으로 한단계씩 내려간다. (top-bottom 구조) 처음에 view engine을 pug로 설정했다. cookie를 파싱하고, body에 담긴 정보를 파싱한다. 그리고 helmet, morgan이 있다. 그 후에 컨트롤러, 라우트들이 있다. helmet을 가장 위에 두도록 하자. localsMiddleware ..
2021.02.17 -
[유튜브 클론코딩] 2.15 Partials with Pug (pug의 일부분을 만들어서 include 하기)
2.15 Partials with Pug views폴더> partials폴더> header.pug, footer.pug 파일 만들기 partials는 페이지의 일부분이다. 조직적인 목적으로만 만들어진다. views 폴더 아래에 partials 폴더를 만들고 header.pug , footer.pug라는 파일을 만든다. footer.pug 만들기 footer 파일에는 footer 태그를 추가하자. 이 안에는 유튜브 아이콘이 들어갈 것이다. fontawesome에서 아이콘을 추가한다. footer 태그에 footer라는 클래스를 추가하고, div에는 footer_icon이라는 클래스를 추가한다. (div는 div라고 안적어주고 클래스이름만 적어줘도 된다) icon 다음에는 footer__text가 클래스명인..
2021.02.17