<Express.js> Pug-mixin

mixin이란?

반복되는 pug코드를 줄이기 위한 것이라고 생각하면 됩니다. 아니 그렇게 생각하면 partials도 반복되는 pug코드를 줄이기 위한 것 아닌가요? 라고 할 수 있습니다. 맞습니다. 두 가지 모두 반복되는 코드를 줄이기 위한 것이지요. 하지만 mixin이 parital과 구분되는 점은 바로 함수와 유사하다는 것이지요. 바로 변수를 사용해서 경우에 맞게 html 구성 요소가 바뀝니다. 예를 들어서 소셜 로그인 버튼 경우 같은 경우에는 어느 위치에서나 변경될 점이 없습니다. 깃허브면 깃허브 애플이면 애플 모든 위치에서 동일하죠. 만약에 여러 페이지에서 video를 보여주는 것은 어떨까요? 우리가 한가지 동영상을 보려고 유튜브에 접속하진 않습니다. 다양한 정보를 가진 video가 있죠. 그 video를 미리보기 페이지에서도 볼 수 있고 더욱 디테일한 측면에서 볼 수도 있죠. 즉 같은 구조 다른 정보를 가진 경우에 탬플릿을 mixin으로 만들면 좋습니다.

videoBlock

먼저 mixin들을 저장할 폴더를 views안에 만듭니다. 폴더명은 mixins라고 하겠습니다. 폴더안에 videoBlock.pug 파일을 만듭니다. mixin을 만들때는 함수 선언과 비슷하게 mixin 키워드를 붙여주어야 하고 변수도 정의해주어야 합니다.

mixin videoBlock(video={})
	video.videoBlock__thumbnail(src=video.videoFile, controls=true)
	h4.videoBlock__title #{video.title}
	h6.videoBlcok__views #{video.views}
	

video={}는 video default 값을 지정해준겁니다.

정의한 mixin 사용

정의한 mixin을 home.pug에서 사용해보겠습니다.

• include mixin파일 경로
  mixin파일 경로를 적어주어 include
• +mixin명()
  필요한 정보만 보내도 되지만 객체를 그대로 넣어주어도 됩니다. 성능에 관련된 이유가 있을지는 확인 후 수정하겠습니다.

extends layout/main
include mixins/videoBlock

block content
	.videos
		each video in videos
			+videoBlock({
				videoFile: video.videoFile
				title: video.title
				views: video.views
			})

그리고 혹시 videoFile이 재생이 안되면 middleware중에 helmet에 의한 것일 확률이 높으므로 app.use(helmet({contentSecurityPolicy: false});를 해주세요.Helmet 참고