Gulp NJK 문법 - by. UXKM

4.2.1. 변수(set)

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

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

4.2.2. 조건문(if)

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

4.2.3. 반복문(for)

json data와 연동하여 메뉴 링크를 반복해서 만들어 보겠습니다.
아래 예제는 json의 data를 이용하여 반복문을 만들었지만 위 '변수 선언' 예제에서 적용한 것처럼 배열로 만들어진 변수로도 반복문을 만들 수 있습니다.
data.json 파일이 연결되어 있고 아래와 같은 코드로 메뉴에 대한 정보가 있다고 가정해 봅니다.

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

빌드 후 아래처럼 반복문이 3개의 a 태그를 생성하고 href와 링크 텍스트도 삽입합니다.

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

4.2.4. 함수(macro)

재사용 가능한 콘텐츠를 함수의 형태로 정의할 수 있습니다. react의 컴포넌트와 비슷한 개념입니다.
아래처럼 _macro.njk 파일에 input, figure 매크로를 작성합니다.

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

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

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

4.2.5. include

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

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

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

4.2.6. layout template

기준이 되는 레이아웃 템플릿.njk를 만든 후 호출하고, 개별 페이지는 각각의 콘텐츠만 퍼블리싱 할 수 있습니다.

위 템플릿을 보면 콘텐츠 영역은 block content으로 지정되어 있습니다. 여기서 content는 해당 block의 이름을 임의로 지정한 것이며 사용 용도에 따라 자유롭게 이름을 지정할 수 있습니다.
아래는 개별 페이지에서 템플릿을 호출하고 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. 불필요한 공백 제어

layout을 호출하거나 include, 변수 선언 또는 기타 javascript 문법을 사용하고 빌드 했을 경우 불필요한 공백이 발생합니다.
예를 들어 아래 코드에서 변수를 선언하면 빌드 되는 html에는 변수 자체가 없어지기 때문에 변수를 선언한 빈 공간만 남게 됩니다.

위의 경우 minus 기호(-)를 활용하여 빈 공간을 없앨 수 있습니다.

한 가지 예를 더 들어보겠습니다.
_layout.njk에서 block content를 만든 후 html 페이지에서 content를 적용하고 빌드 하면 아래처럼 block을 선언한 라인이 공백으로 남아있게 됩니다.

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