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

스택(Stack) LIFO(Last In, First Out) 나중에 들어온 데이터가 먼저 나가는 형식의 자료구조 입구와 출구가 동일한 형태로 스택을 시각화할 수 있음. 대표적인 예시 : 박스 쌓기, 햄버거놀이, 실행취소(ctrl+z) 스택의 구현 방법 1차원배열: 구현이 상대적으로 쉬우나 인풋 사이즈를 미리 알아야 함 리스트: 구현이 상대적으로 어려우나 제한된 사이즈로부터 자유로움 주요 함수 및 프로퍼티 1) push : 데이터를 집어넣는 작업(뒤에서 부터 넣음) 2) pop : 데이터를 꺼내는 작업(뒤에서 부터 꺼냄) 3) peek : 맨 나중에 집어넣은 데이터를 확인 peek 4) top : 맨 나중에 집어넣은 데이터의 위치를 확인 5) size : 총 스택의 사이즈를 확인 6) clear : 스택..

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