extends와 block
레이아웃을 정할 수 있으며, 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다.
레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block을 선언하는 방법은 {% block [블록명] %}입니다. {% endblock %}로 블록을 종료합니다.
block이 되는 파일에서는 {% extends 경로 %} 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합친 후 렌더링할 수 있습니다. 같은 이름의 block 부분이 서로 합쳐집니다.
이제 넌적스의 문법은 충분히 배웠습니다. views 폴더에 layout.html, index.html, error.html 파일을 만들어봅시다.
layout.html
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
index.html
{% extends 'layout.html' %} {% block content %}
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
{% endblock %}
error.html
{% extends 'layout.html' %} {% block content %}
<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>
{% endblock %}
index.html을 보면 {% extends 'layout.html' %}와 {% block content %}가 있습니다. layout.html의 {% block content %} 부분에 index.html의 {% block content %}를 넣습니다. index.html은 res.render로부터 title이라는 변수를 받아 렌더링합니다.
error.html도 {% block content %} 부분이 layout.html과 연결됩니다. res.render로부터 message와 error 변수를 받아 렌더링합니다.
'프로그래밍 언어 > NODE JS' 카테고리의 다른 글
| MySQL 설치하기 (6) | 2025.08.08 |
|---|---|
| 데이터베이스란? (1) | 2025.08.04 |
| 에러 처리 미들웨어 (2) | 2025.08.01 |
| 넌적스 - 반복문 & 조건문 (0) | 2025.07.29 |
| 넌적스 - 변수 (1) | 2025.07.26 |
