본문 바로가기

분류 전체보기

 (661)
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 7 앞선 넌적스와 관련된 내용을 바탕으로, 종합해서 예제를 작성해 보겠습니다.  [layout.html] {% block content %} {% endblock %}   [index.html]{% extends 'layout.html' %}{% block content %}{{title}}Welcome to {{title}}{% endblock %}  [error.html]{% block content %}{{message}}{{error.status}}{{error.stack}}{% endblock %}  layout.html의 {% block content %} 부분은 index.html {% block content %}가 들어갑니다. 그리고 index...
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 6 ○ extends와 block include와도 함께 사용하며, 레이아웃을 지정하고 공통되는 레이아웃을 따로 관리할 수 있습니다. 일단 아래의 예제처럼, 레이아웃이 되는 파일에 공통되는 마크업을 넣고, 페이지마다 달라지는 부분을 block으로 선언해 둡니다. {% block [블록명] %}으로 block을 선언하고, {% endblock %}으로 블록을 종료합니다.   [HTML] 헤더입니다 {% block content %} {% endblock %} 푸터입니다 {% block script %} {% endblock %} {% extends 'layout.html' %}{% block ..
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 5 ○ include 넌적스에서도 역시 다른 HTML 파일을 삽입할 수 있습니다. 흔히 말하는 헤더나 푸터, 내비게이션과 같이 공통으로 사용되는 부분을 따로 관리할 수 있습니다. 역시 {% include "파일경로" %} 형식으로 사용하게 됩니다.  [HTML] HOME About 메인 파일 다른 파일을 include 할 수 있습니다. 푸터입니다.  [Nunjucks] HOME About 푸터입니다.{% include "header.html" %} 메인 파일 다른 파일을 include 할 수 있습니다.{% include "footer.html" %}
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 4 ○ 조건문 넌적스에서의 조건문은 {% if 변수 %} {% elif %} {% else %} {% endif %}로 이루어졌습니다.  [HTML]로그인 되었습니다.로그인이 필요합니다. [Nunjucks]{% if isLogginIn %}로그인 되었습니다.{% else %}로그인이 필요합니다.{% endif %}      조건문에서는 당연한 수순처럼 분기 처리를 학습하게 되는데, 여기서는 일반적인 case문은 없고 elif문, 즉 else if 역할을 하는 명령문을 통해 분기처리를 진행하게 됩니다.   [HTML]사과입니다.바나나입니다.오렌지입니다.사과도 바나나도 오렌지도 아닙니다  [Nunjucks]{% if fruit === 'apple' %}사과입니다.{% elif fruit === 'banana' ..
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 3 ○ 반복문 기본적으로 넌적스에서는 특수 문을 {% %} 안에 넣어서 사용합니다. 반복문의 경우도 for in문과 endfor 문 사이에 해당 내용을 작성해 사용하면 됩니다.  [HTML] 사과 배 오렌지 바나나 복숭아  [Nunjucks] {% set fruits = ['사과', '배', '오렌지', '바나나', '복숭아'] %} {% for item in fruits %} {{item}} {% endfor %}  만약 위의 반복문 사례에서 인덱스를 사용하고 싶다면, loop.index라는 변수를 사용해주면 됩니다. 예제를 보겠습니다. [HTML] 1번째 사과 2번째 배 3번째 오렌지 4번째 바나나 5번째 복숭아 [Nunjucks..
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 2 ○ 변수 res.render를 호출할 때 보내는 변수를 넌적스를 통해서 처리합니다. 이미 앞서서 작성했던 routes/index.js에서 아래와 같은 부분이 있었습니다. 여기에는 title이라는 변수가 선언되죠. // GET / 라우터router.get('/', (req, res, next) => { res.render('index', { title: 'Express' });});  우선 이를 반영하지 않는 기본적인 포맷의 HTML을 보겠습니다.  [HTML]ExpressWelcome to Express전송  [Nunjucks]{{title}}Welcome to {{title}}전송  위와 같이 라우터를 통하지 않고, 넌적스 파일 내부에서 변수를 선언하고 사용하는 방법도 있습니다. {$ set 변수..
7. 익스프레스 (4) - 템플릿 엔진 : Nunjucks 1 넌적스(Nunjucks)는 Pug와 비교했을 때 상대적으로 HTML의 문법을 거의 그대로 사용해서 적응이 편합니다. 거기에 추가로 자바스크립트의 문법을 사용 가능합니다.  우선 예제를 위해서 npm으로 넌적스를 설치하고, 기존에 작성했던 app.js에서 view engine 선언을 Pug에서 Nunjucks로 변경해야 합니다.  $npm i nunjucks [app.js] const express =require('express');const morgan = require('morgan');const cookieParser = require('cookie-parser');const session = require('express-session');const dotenv = require('dotenv')..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 9 [HTML] 헤더입니다. 내용입니다. 푸터입니다.   [Pug]// layout.pugdoctype htmlhtml head title= title link(re='stylesheet', href='/style.css') block style body header 헤더입니다. block content footer 푸터입니다. block script// body.pugextends layoutblock content main p 내용입니다. block script scr..

티스토리툴바