퍼그(3)
-
[유튜브 클론코딩] 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 -
[유튜브 클론코딩] 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.14 Layouts with Pug
2.14 Layouts with Pug Pug를 사용하는 이유 html과 css만으로 작업을 할 때에는 똑같은 것들을 반복하는 경우가 많기 때문에 별로 좋지 않다. html과 css는 프로그래밍 언어가 아니고, 논리적인 작업들을 할 수 없다. 계속 복사-붙여넣기 하는 건 고통스럽다. pug와 같은 것들로 작업을 하면, html을 생성하기 하는 javascript의 위력을 사용할 수 있다. views 폴더 아래에 layouts 라는 이름으로 새 폴더를 만들기 이 폴더 안에 layout 파일들을 만들 것이다. main 레이아웃 먼저 main.pug로 만든다. 이제 여기에 HTML 작성을 시작할 것이다. 이 파일은 모든 페이지들의 토대가 되는 파일이 될 것이다. 예를 들어, 모든 페이지는 header와 foo..
2021.02.17