[Youtube 클론코딩] Pug

Express는 res.send() 메소드로 HTML을 직접 출력할 수 있다.

텍스트를 직접 출력하거나 HTML 문법을 사용할 수 있다.

하지만 이 방식으로는 다음과 같은 여러 문제점이 있다.

1. 내부가 문자열로 인식되므로 하이라이팅이 되지 않아 에러 발견이 어려움

2. 각 페이지마다 공통적으로 적용되는 부분을 전부 일일이 수정해주어야 함.

 

다행히 Express는 view engine을 제공하여 이 문제를 해결하는데, Pug는 View Engine 중 하나이다.

Getting Started – Pug (pugjs.org)

Getting Started – Pug

Pug 설치하기

npm i pug

pug를 설치해 준 뒤, Express에 Pug를 사용할 것이라고 알려주어야 한다.

Express 4.x - API Reference (expressjs.com)

Express 4.x - API Reference

server.js

app.set()을 이용해 server.js에 위와 같이 설정해주면 Express가 View Engine으로 Pug를 사용하기 시작한다.

 

이제 Pug를 사용해 볼 건데, 간단한 구동 원리는 다음과 같다.

1. pug 파일 생성

2. Express가 pug 파일을 일반적인 HTML 파일로 렌더링함

3. 렌더링된 HTML 파일을 브라우저에 출력

 

pug 파일 생성 및 렌더링하기

pug파일을 렌더링 하기 위해선 response 객체의 render() 메소드를 사용한다.

기본적으로 Express는 render 메소드의 인수를 views 라는 폴더에서 찾는다.

그러므로 우리는 pug 파일을 views 폴더 안에 만들어주면 된다.

src/views/watch.pug

그리고 controller에서 res.send() 부분을 res.render()로 바꾸어 준다.

이렇게 실행해보면 다음과 같이 에러가 나온다.

이 에러는 루트 디렉토리에 views폴더가 있지 않고 /src/views/ 에 있기 때문에 발생하는 문제이다.

이를 수정해주기 위해선 views 폴더의 위치를 Express에게 알려주어야 한다.

 

일단, 현재 실행 위치를 알아야 하는데 process.cwd()를 콘솔에 찍어보면

다음과 같이 루트 디렉토리가 나온다.

server.js 파일은 /src/server.js 에 있는데 왜 현재 실행 위치는 src 폴더가 아니고 루트 디렉토리일까?

그 이유는 node js를 실행하는 파일 자체는 package.json이기 때문이다.

package.json에서 babel-node 명령어를 통해 server.js를 구동하고 있으니 실행 위치는 당연히 루트 디렉토리가 된다.

따라서 다음과 같이 views 폴더의 위치를 수정해주면 해결된다.

Includes (partials)

각 페이지마다 반복되는 요소들을 통합적으로 처리할 수 있게 만들어주는 기능.

컴포넌트처럼 사용할 수 있다.

 

사용법은 간단하다. 먼저 컴포넌트 파일 하나를 작성한다.

#{} 는 pug 파일에서 javascript 문법을 사용할 수 있게 해주는 보간법이다.

 

이후 다른 파일에서 컴포넌트를 사용할 위치에 import 해주면 된다.

이 부분을 다음처럼 수정해준다.

Template Inheritance

Template Inheritance – Pug (pugjs.org)

Template Inheritance – Pug

웹 사이트는 같은 형식의 페이지를 사용하는 경우가 많이 있는데, 그럴 때 사용하면 편리한 기능이다.

 

include와 비슷하게 기본적인 틀이 될 파일 하나를 생성한다.

여기서 block은 각 페이지마다 바뀌는 부분을 지정해준다.

그리고 각 페이지 파일에 다음처럼 작성하면 된다.

그런데 제목같은 경우 뒤의 | 이후 부분이 반복된다.

이 부분을 복붙으로 만들면 오타의 위험이 있으므로 다음의 방법을 사용하면 더욱 깔끔해진다.

 

기존에 base 템플릿에 다음처럼 변수가 들어갈 자리를 하나 만들어준다.

그리고 controller 부분에서 pageTitle을 두번째 인자로 넘겨주면 된다.

 

조건문 (Conditionals)

로그인 여부를 구분해서 로그인 버튼과 로그아웃 버튼을 보여줘야 하는 경우에는 조건식을 사용할 수 있다.

Conditionals – Pug (pugjs.org)

Conditionals – Pug

videoController.js

가짜 유저 객체를 만들어서 home.pug에 넘겨준 뒤 다음처럼 조건식을 설정해본다.

fakeUser의 loggedIn 변수와 if - else 문을 이용해 log out 버튼과 log in 버튼을 표현하는 구문이다.

fakeUser.loggedIn 변수가 true이기 때문에 log out 버튼이 렌더링 될 것으로 예상된다.

if, else if, else 문과 unless, if 문으로 사용할 수 있다.

반복문 (iterations)

반복문은 다른 프로그래밍 언어와는 달리 each와 while로 사용한다.

객체 배열을 생성해서 home으로 보낸다음 home.pug에서 다음처럼 작성한다.

파이썬 문법의 for와 같은 방식으로 사용해주면 된다.

여기서 주목할 점은 videos에 element가 없는 빈 배열이 오게 된다면, else문을 통해 예외 처리를 해줄 수 있다는 것이다.

 

만약 배열 자체가 오지 않았거나 하면 다음의 에러 메세지가 뜬다.

이는 failArray 에 length 속성이 없다는 의미로,

배열에는 배열의 길이를 나타내는 length 속성이 있는데 없으므로 배열이 아니라는 뜻이다.

 

Mixin

이건 partials와 유사한 기능인데, partials는 정적인 구조를 여러 페이지에서 참조하는 형식이라면

Mixin은 동적인 구조를 참조하는 방법이다.

먼저 /src/views/mixins/video.pug 를 생성한다.

그 뒤 사용할 페이지에서 다음처럼 참조한다.

1. 해당 mixin 파일을 상단에 include 해준다.

2. 사용할 위치에 +와 함께 해당 mixin파일에 정의한 함수를 사용한다.(매개변수 이름은 자율)

보간법

위에서 설명했듯이, pug에서 중간에 #{}를 해주면 자바스크립트 문법을 사용할 수 있게 된다고 했었다.

그와 비슷하게 = 을 이용해서도 변수를 태그에 할당할 수 있는데

여기서 보면, h4=item.title 이라고 돼 있는 것을 볼 수 있다.

이는 h4 #{item.title} 과 동일한 결과를 도출하는데 한 가지 차이점은

#{}을 사용하면 뒤에 다른 요소가 추가로 올 수 있지만

=을 사용하면 해당 태그에는 그 변수만이 존재한다는 것을 의미한다.

따라서 사용하기 편한 방법으로 사용하면 된다.