실제로 템플릿을 코드에 반영하면 다음과 같습니다. 아직 실습하지 말고 다음 결과만 봐 주세요. 코드가 훨씬 깔끔해졌죠? 여러 행을 읽지 않고도 위쪽이 헤더 영역이고 아래쪽이 푸터 영역임을 알 수 있어 코드의 가독성이 좋아졌습니다.

{{>header}}

    <h1>{{nickname}}님, 다음에 또 만나요!</h1>

{{>footer}}

이렇게 헤더, 푸터 영역을 변수화해 사용하려면 헤더와 푸터 영역을 각각 발췌해 템플릿 파일로 만들어야 합니다.