본문 바로가기

Programming

(477)
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..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 8 ○ include include를 이용하면 다른 Pug나 HTML 파일을 삽입할 수 있습니다. 헤더, 푸터, 내비게이션처럼 웹 페이지에서 공통되는 부분을 따로 관리할 수 있게 되죠. include 파일 경로 형태로 사용하는데, 아래 예제를 통해서 살펴보겠습니다.  [HTML] Home About 메인 파일 다른 파일 include 푸터  [Pug]// header.pugheader a(href='/') Home a(href='/about') About// footer.pugfooter div 푸터입니다//main.puginclude headermain h1 메인 파일 p 다른 파일을 include할 수 있습니다.include footer
7. 익스프레스 (4) - 템플릿 엔진 : Pug 7 ○ 조건문 Pug에서의 조건문입니다. 역시 if, else if, else를 사용할 수 있습니다. 더불어 case 역시 사용이 가능합니다. 예시에서 isLoggedIn의 T/F 여부에 따라서 HTML을 다르게 렌더링 하는 경우를 살펴보겠습니다.   [HTML]로그인 되었습니다로그인이 필요합니다  [Pug]if isLoggedIn div 로그인 되었습니다.else div 로그인이 필요합니다.   case문도 아래와 같이 적용이 가능합니다.  [HTML]사과입니다.바나나입니다.오렌지입니다.사과도 바나나도 오렌지도 아닙니다.  [Pug]case fruit when 'apple' p 사과입니다. when 'banana' p 바나나입니다. when 'orange..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 6 앞서서 이스케이핑에 대해서도 살펴보았는데, 참고삼아 HTML 엔티티에 대해서도 살펴보겠습니다. 자바스크립트 등에서 특수 문자를 사용했는데 이것을 HTML 태그로 오인해 에러가 발생하는 것을 방지하기 위해서, 특수 문자를 HTML 엔티티 코드로 변환하게 됩니다.  > : >& : &띄어쓰기 :  " : "' : '     ○ 반복문  HTML과 다르게 반복문도 사용 가능합니다(반복 가능한 변수일 경우 해당). each를 사용해 다음과 같이 반복문을 사용이 가능합니다. 물론 for를 대신 사용해도 됩니다.  [HTML] 사과 배 오렌지 바나나 복숭아  [Pug]ul each fruit in ['사과', '배', '오렌지', '바나나', ..