[Pug] mixin pug 파일 html로 변환하는 방법 pug.compile 메서드

Pug의 renderFile 함수 동작 테스트와 mixin 컴포넌트 렌더링 문제 해결 🚀

Pug 템플릿엔진을 활용해서 프로젝트를 하고 있었는데, pug의 renderFile 함수가 원하는 대로 작동하지 않아서 가능한 대안을 찾기 위해 이것저것 시도해본 문제 해결 과정이다. 

원래 의도했던 것은 pug로 작성된 템플릿 파일을 renderFile 메서드로 HTML로 변환한 뒤에 클라이언트에 전달하는 것을 의도했다. 그러나 mixin 키워드가 포함되지 않은 일반적인 퍼그 파일은 잘 렌더링이 되는데, mixin을 쓰는 퍼그 파일은 렌더링이 잘 되지 않고 빈 문자열 "" 만 반환하는 문제를 만났다.

renderFile 함수 테스트 코드 작성 🧪

먼저 renderFile 함수의 동작을 테스트하기 위한 jest 코드를 작성했다. 이 과정에서 render 함수와 renderFile 함수의 동작을 비교 검증했다.

const pug = require("pug");
const path = require("path");
const fs = require("fs/promises");
describe("pug 관련 테스트", () => {
  beforeAll(async () => {
    await fs.writeFile("./__test__/test.pug", "p hello");
  });
  test("render 함수 테스트", () => {
    expect(pug.render("p hello world")).toEqual("<p>hello world</p>");
  });
  test("renderFile 함수 테스트", () => {
    const html = pug.renderFile(path.join(".", "__test__", "test.pug"), {
      id: 1,
      title: "Hello World",
      content: "어이",
      author: "나",
    });
    expect(html).toEqual("<p>hello</p>");
  });
  afterAll(async () => {
    await fs.unlink(path.join(".", "__test__", "test.pug"));
  });
});

 

테스트 결과, render 함수와  renderFile 함수는 문제없이 작동하는 것을 알 수 있었다.

mixin 컴포넌트와 renderFile 함수의 한계 🚧

하지만 mixin을 사용하는 Pug 파일에서 새로운 문제가 발생했다. 간단한 p hello 같은 Pug 파일은 정상 작동했지만, mixin a()와 같은 mixin 컴포넌트를 포함한 파일에서는 renderFile 메서드가 제대로 작동하지 않았다.

이를 통해 Pug의 renderFile 메서드가 mixin 컴포넌트를 지원하지 않는다는 것을 확인할 수 있었다.

compile 함수를 활용한 해결책 💡

mixin 컴포넌트를 HTML로 변환하기 위해 compile 함수를 사용하는 방법을 찾아냈다. 이 함수는 Pug 템플릿의 문자열을 HTML로 변환해주는 기능을 한다. 

mixin 으로 작성된 퍼그 파일은 일종의 함수처럼 작동한다고 한다. 그래서 컴파일이 제대로 되려면 아래 예시 코드와 같이 template 문자열 아래에 +item(title, content)로 퍼그 컴포넌트를 호출하는 코드를 더 해줘야했다.

// cardEdit.pug 파일 읽기
const pugPath = path.join("views", "components", "items", "item.pug");
const template = await fs.readFile(pugPath, "utf-8");
// 바뀐 문자열 아래에 +item(매개변수들)로 mixin 함수를 호출해준다.
const templateString = template + "\n\n+item(title, content)";
// 템플릿 컴파일
const compiledFunction = pug.compile(templateString, {
  filename: pugPath, 
  compileDebug: false,
  debug: false,
  pretty: false,
});
// 컴파일된 함수 실행
let html = compiledFunction({ title, content });
// html이 제대로 나온다
// "html": "<p>hello</p>"

mixin 내부 참조 문제 해결 🔧

마지막으로, mixin 컴포넌트 내부에서 다른 mixin 컴포넌트를 참조하는 경우 Object.pug_interp 오류가 발생할 수 있다. 이 문제는 참조하는 mixin 컴포넌트 내부에 include 키워드로 import 시켜줌으로써 해결할 수 있다.

mixin item(title, content)
  include ../common/button

 

참고 자료

https://pugjs.org/api/getting-started.html

Getting Started – Pug