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

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가 클래스명인..

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

2.13 Installing Pug(퍼그 설치) Pug란? Pug는 view 엔진을 말함 pug 설치하기 콘솔에 npm install pug 로 설치한다. set함수로 application 설정하기 - app.set("view engine", "pug"); https://expressjs.com/ko/4x/api.html#app.set expressjs 공식 홈페이지> API 참조 > application> app.set() set 함수: application의 설정을 하는 함수 name과 value가 필요하다. 우리는 view engine 설정을 바꿀것이다. view engine 설정의 기본 값은 undefined인데 이것을 pug로 바꿀것이다. app.js에 다음과 같은 코드를 추가한다. app.se..