[Node.js] 넌적스

오늘 뷰 엔진 종류를 두 가지 알게 되었다. 하나는 퍼그라고 HTML에 아주 간략화한 형태의 엔진이고 하나는 넌적스라고 해서 기본적인 HTML 형식에서 조금 더 발전해서 다양한 기능을 사용할 수 있는 엔진이다.

 

일단 내가 보고 있는 책의 기본적인 예제 진행방식을 넌적스로 잡았기 때문에 넌적스에 관해서 간단하게 포스팅해보겠다.

 

넌적스는 퍼그의 HTML 문법 진화에 적응하기 힘든 사람에게 적합한 엔진으로 파이어폭스를 만든 모질라에서 만들었다.

 

연결

 

const nunjucks = require('nunjucks')

...
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');

nunjucks.configure('view', {
    express: app,
    watch: true,
})
...

 

위의 코드가 넌적스와 자바 스크립트를 연동하는 코드이다. 외부 모듈 선언을 하고 app 객체를 연결하고 watch가 true라면 HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링 하는 방식이다.

 

이 때 html 파일로 저장을 해도 되지만 넌적스 파일과 html 파일을 구분하려면 njk를 사용해야하고 그럴려면 app의 속성인 view engine을 html이 아니라 njk로 바꿔주어야한다.

 

사용

 

router.get('/', function(req, res, next) {
	res.render('index', {title: 'Express'});
    });

 

이렇게 js파일에서 title에 Express를 미리 선언을 해놓으면

 

<h1>{{title}}</h1>
<p>Welcome t o {{title}}</p>
<button class="{{title}}"  type="submit">전송</button>
<input placeholder="{{title}} 연습" />

 

넌적스 코드에서 {{}}을 통해서 적용이 가능하다.

 

{ % set title = 'Express' % }

 

{ % % }를 사용하면 내부 선언도 가능하다.

 

<ul>
    {set % fruits = ['사과', '배', '오렌지, '바나나', '복숭아' ] %}
    {% for item in fruits %}
    <li>{{item}}</li>
    {% endfor %}
</ul>

 

조건문은 {% if 변수 %}형식으로 선언하고 {% else %}로 else 처리한다.

 

{% if isLoggedIn %}
<div>로그인 되었습니다.</div>
{% else %}
<div> 로그인이 필요합니다.</div>
{% endif %}

 

등등 include를 통해서 헤더파일 선언을 해서 다른 HTML 파일을 가져와서 코드의 재사용성을 높이거나 extend를 통해서 레이아웃을 미리 설정해서 큰 틀에 원하는 코드를 넣는다던가 다양한 방식으로 활용이 가능하다.