nunjucks - 템플릿 엔진 확장자

정의 : 자바스크립트로 웹을 만들 때, HTML을 일일이 복사해서 붙여넣는 게 아니라 "필요한 부품을 조립하고 조건에 따라 내용을 바꾸기 위해" 사용하는 도구

예시

 

<header id="header" class="l-header">

{% include "nav/primary.njk" %}

{% if templateClass == "template-home" %}

{% include "heroes/home.njk" %}

{% endif %}


{% if hero %}

{% include "heroes/primary-nav.njk" %}

{% endif %}

</header>


<div class="l-lip c-lip">

<div class="l-lip__hollow c-lip__hollow"></div>

<div class="l-lip__fill c-lip__fill"></div>

</div>

1. 왜 이렇게 생겼나요? (문법 설명)

코드에 보이는 {% ... %} 같은 기호들은 HTML에는 없는 Nunjucks만의 특수 문법입니다.

• {% include "파일명" %} (부품 가져오기):
  • header 안에 네비게이션(primary.njk)이나 히어로 섹션(home.njk)을 통째로 들고 옵니다.
  • 이유: 만약 메뉴가 바뀌었을 때 100개의 페이지를 다 고치는 대신, primary.njk 파일 하나만 고치면 모든 페이지에 적용되기 때문입니다.
• {% if ... %} (조건문):
  • if templateClass == "template-home": "지금 보고 있는 페이지가 홈(메인) 페이지일 때만 이 코드를 보여줘!"라는 뜻입니다.
  • 이유: 페이지마다 보여주고 싶은 구성이 다를 때 유연하게 대처할 수 있습니다.

---

2. Nunjucks의 철학: "부품화 (Modularity)"

Nunjucks를 쓰는 가장 큰 이유는 재사용성입니다. 웹사이트를 하나의 거대한 통짜 HTML로 만드는 게 아니라, 레고 블록처럼 쪼개서 관리하는 것이죠.

1. Nav 부품: nav.njk
2. Footer 부품: footer.njk
3. 내용 부품: post.njk
4. 조립: 메인 설정 파일에서 이 부품들을 include로 모아서 하나의 화면으로 완성합니다.

---

3. 대학원생/개발자에게 njk가 유용한 이유

• 자바스크립트에서는 document.createElement로 일일이 태그를 만들었죠?
• Nunjucks를 사용하면 HTML 구조를 미리 그려두고, 데이터 배열만 던져주면 알아서 <li> 태그들을 반복해서 만들어줍니다. 코드가 훨씬 간결해집니다.

💡 이해를 돕기 위한 비유

• HTML: 이미 인쇄가 끝난 종이 신문 (내용을 바꿀 수 없음)
• Nunjucks (.njk): 틀만 짜여 있는 전광판 (입력되는 데이터나 조건에 따라 글자가 실시간으로 바뀜)