Gulp NJK 문법 - by. UXKM

  • Gulp
  • HTML 편집 (Gulp NJK)
  • Gulp NJK 문법

요약 설명

njk는 JavaScript의 대부분의 문법을 사용할 수 있을 정도로 강력한 템플릿 엔진입니다. 기능이 매우 다양하지만, 이 페이지에서는 자주 사용되는 핵심 문법 위주로 설명합니다.
본 커리큘럼에서 소개하는 문법만 잘 활용해도 웹사이트를 보다 편리하고 효율적으로 제작할 수 있습니다.

njk의 전체 문법은 'Nunjucks 템플릿' 페이지에서 확인할 수 있습니다.

Nunjucks 템플릿 바로가기

4.2.1. 변수(set)

javscript의 변수와 같습니다. 다만 var, let, const 가 아닌 set 으로 변수를 선언합니다.
변수의 값이 String(문자열)일 경우 반드시 큰따옴표(") 또는 작은따옴표(')로 감싸야 합니다.

문자 배열을 활용하여 여러 개의 변수를 선언하고 활용할 수 있습니다.

4.2.2. 조건문(if)

javscript의 if 문과 같습니다. 일반적인 if, else, else if가 가능하며 삼항 연산자도 가능합니다.
단, njk에서는 닫는 if도 필수로 선언되어야 합니다.

일반 조건문

&& (and), || (or) 도 시용할 수 있습니다. 다만 njk에서는 기호가 아닌 영문으로 사용합니다.

삼항 연산자

javascript의 삼항 연산자와 다르게 else는 선택 사항입니다.

4.2.3. 반복문(for)

json 데이타를 활용한 반복문

_gnb.json 파일에 담긴 데이터를 기반으로 반복문을 구성한 것입니다.
이 전 페이지에서 세팅한 것처럼 _gnb.json 파일이 연결되어 있다고 가정해 봅니다.

위 json을 이용하여 반복문을 선언합니다.

빌드가 진행되면 아래처럼 3개의 <a> 태그가 생성되고, href와 링크 텍스트가 삽입됩니다.

만약 아이템의 index 값을 추출하고 싶다면 {{ loop.index }}를 사용하면 됩니다. javascript에서는 index가 0부터 시작하지만 njk는 1부터 시작합니다.

변수(set)를 활용한 반복문

JSON 데이터를 사용하지 않고, 변수를 활용한 간단한 반복문입니다.

빌드가 진행되면 아래처럼 3개의 <a> 태그가 생성되고, href와 링크 텍스트가 삽입됩니다.

4.2.4. 함수(macro)

재사용 가능한 콘텐츠를 함수의 형태로 정의할 수 있습니다. react의 컴포넌트와 비슷한 개념입니다.

매개변수(파라미터)와 인수 값의 이해

njk의 macro는 JavaScript의 함수와 비슷하게 동작합니다. 매크로를 정의할 때 매개변수(파라미터)를 선언하고, 호출할 때 인수(아규먼트)를 전달하여 값에 따라 다른 결과를 만들어낼 수 있습니다.
따라서 실제로 매크로를 작성하기 전에 함수의 기본 개념(매개변수/인수 개념)을 이해하는 것이 도움이 됩니다.

macro sayHello(name)
여기서 name은 매개변수(파라미터) 입니다.
즉, 이 매크로가 어떤 값을 받을지 정의한 변수입니다.
sayHello("홍길동")
"홍길동"은 인수 값(Argument) 입니다.
매크로를 호출할 때 name 자리에 넘겨주는 실제 값입니다.

위 매크로가 빌드되면 '안녕하세요. 홍길동님!'이라는 결과가 출력됩니다.

macro 정의

아래처럼 _macro.njk 파일에 input, figure 매크로를 정의합니다.

Nunjucks의 macro에서 매개변수를 정의할 때 기본값(default value)을 설정할 수 있습니다.
이렇게 기본값이 지정된 매개변수는 매크로 호출 시 해당 인수를 생략하면 자동으로 기본값이 사용됩니다.
따라서 매개변수의 값을 매번 전달하지 않아도 되고, 필요한 경우에만 일부 인수만 전달할 수 있습니다.

input macro의 type과 figure macro의 height의 기본 값이 미리 선언되어 있습니다.
input macro를 적용할 때 type의 값을 선언하지 않으면 text input으로 빌드 되며,
figure macro를 적용할 때 height의 값을 선언하지 않으면 height="auto"로 빌드 됩니다.

macro 호출

_macro.njk 파일을 호출한 후 필요한 인수 값을 적용하여 macro를 작성합니다.

위치 기반 인수 전달 (일반 호출)

매개변수 순서대로 인수 값을 적용하는 방법입니다.

이름 기반 인수 전달 (명시적 호출)

ES6처럼 이름 기반으로 인수 값을 전달하는 방법입니다.
적용해야 할 인수가 많을 때 추천되는 방식으로, 인수의 순서가 헷갈릴 때 특히 유용합니다.

macro 빌드

빌드 시 아래와 같이 인수 값이 반영되어 태그가 생성됩니다.

4.2.5. include

반복되는 콘텐츠를 별도 파일로 분리해 include 할 수 있습니다.

필요한 페이지에서 _header.njk 파일을 include 합니다.

빌드 시 아래처럼 _header.njk의 콘텐츠가 병합된 상태로 빌드 됩니다.

4.2.6. layout template

njk에서는 기준이 되는 레이아웃 템플릿(.njk 파일)을 먼저 만들어 두고, 각 개별 페이지에서는 이 레이아웃을 확장(extend)하여 필요한 콘텐츠만 정의해서 사용할 수 있습니다.
이렇게 하면 모든 페이지가 동일한 레이아웃 구조를 공유하면서도 페이지마다 다른 내용만 퍼블리싱(출력)할 수 있습니다.

위 템플릿에서 콘텐츠 영역은 block content로 지정되어 있습니다. 여기서 content는 해당 블록의 이름으로, 용도에 따라 자유롭게 이름을 지정할 수 있습니다.
아래는 개별 페이지에서 템플릿을 호출하고, 해당 block 영역에 콘텐츠를 삽입하는 방법입니다.

index.njk를 빌드 하면 아래처럼 _layout.njk와 index.njk를 병합하여 index.html로 빌드 됩니다.

4.2.7. template 상속

일반적으로, 호출하는 템플릿의 콘텐츠 영역에 새롭게 내용을 채워 넣을 수 있으며, {{ super() }}를 이용하면 기존 내용을 유지한 상태로 새로운 내용을 추가할 수도 있습니다. 예를 들어, _content.njk 파일에 아래와 같은 코드가 있다고 가정해 보겠습니다.

intro.njk에서 위 템플릿을 호출한 후 block content에 새로운 내용을 채우면, 기존의 <p>안녕하세요 UXKM 입니다.</p>는 사라지고 새로 작성한 내용으로 대체됩니다

{{ super() }}를 사용하면 <p>안녕하세요 UXKM 입니다.</p>가 유지되면서 새로 작성한 내용이 추가된 상태로 빌드됩니다.

4.2.8. 불필요한 공백 제어

njk 같은 템플릿 엔진에서는 layout 호출(extends), include, 변수 선언, 그리고 일부 제어문(set, if, for 등)을 사용할 때, 이 자체가 브라우저에 출력되는 HTML에 직접적으로 렌더링되지 않습니다.
특히 set으로 변수를 선언하면, 렌더링 결과에는 변수 선언이 나타나지 않고, 해당 부분은 빈 줄 또는 공백으로 남을 수 있습니다.
이러한 공백은 빌드된 HTML에서 의도하지 않은 빈 줄, 들여쓰기, 공백 라인을 만들어 HTML 소스가 지저분해지거나 용량이 커지는 원인이 되기도 합니다.

불필요한 빈 줄 또는 공백을 minus 기호(-)를 활용하여 없앨 수 있습니다.

한 가지 예를 더 들어보겠습니다.
_layout.njk에서 block content를 선언한 후, 콘텐츠 페이지에서 해당 content를 적용하고 빌드하면, block을 선언한 부분에 공백이 남게 됩니다.

이때 block content를 이용하는 index.njk에서 minus 기호(-)를 사용하여 공백 라인을 제거할 수 있습니다.