NodeJS / pug에서 mixin 사용

pug 란?

• node js 프레임워크인 express에서 view 를 담당하는 템플릿 언어
• JS방식으로 보다 쉽게 html을 만들 수 있다.

---

mixin 란?

• 웹사이트에서 계속 반복되는 코드를 복사+붙여넣기 하지 않고 재활용하는 방법
• 각각 다른 정보를 가지지만 같은 구조를 가지는 템플릿에서 사용

---

mixin 사용

• mixin은 pug의 함수의 일종
• mixin은 함수의 이름이 있고, 인자가 필요

//dbtest.js

export const test = [
  {
    title: 'test title1',
    content: 'test content1'
  },
  {
    title: 'test title2',
    content: 'test content2'
  },
  {
    title: 'test title3',
    content: 'test content3'
  }

1. DB를 직접적으로 연동하지 않았기 때문에 test 배열 객체를 생성 후  export 하여 외부에서 사용할 수 있도록 함

 

 

//testBlock.pug

mixin testBlock(test = {} ) // mixin 선언
    h1.testBlock__title=test.title
    h1.testBlock__content=test.content

1. testBlock.pug 는 mixin을 사용하여 testBlock함수 인자에 값이 들어올 경우 해당하는 객체의 값을 템플릿에 보여질 수 있도록 함

 

// home.pug

include testBlock //testBlock.pug 포함

  each item in test
  	+testBlock({
 	 title: item.title,
  	content: item.content
  	})

1. testBlock(mixin)을 include
2. 아까 export한 가상의 DB데이터 값 (dbtest.js) test 에서 배열의 크기만큼 반복
3. +testBlock( { } )이 test의 배열 크기만큼 mixin한 testBlock 함수 실행