'node js' 122건

반복문넌적스에서는 특수한 구문을 {% %} 안에 씁니다. 따라서 반복문도 이 안에 넣으면 됩니다. for in문과 endfor 사이에 위치하면 됩니다. 반복문에서 인덱스를 사용하고 싶다면 loop.index라는 특수한 변수를 사용할 수 있습니다. 조건문조건문은 {% if 변수 %} {% elif %} {% else %} {% endif %}로 이루어져 있습니다. case 문은 없지만 elif(else if 역할)를 통해 처리할 수 있습니다. {{ }} 안에서는 다음과 같이 사용합니다.

res.render 호출 시 보내는 넌적스가 처리합니다. routes/index.js의 코드를 보면 다음 부분이 있습니다.router.get('/', function(req, req, next) { res.render('index', { title: 'Express' });}); {{title}}Welcome to {{title}}전송 넌적스에서 변수는 {{ }}로 감쌉니다.ExpressWelcome to Express전송 내부에 변수를 사용할 수도 있습니다. 변수를 선언할 때는 {%set 변수 = '값' %}를 사용합니다. HTML을 이스케이프하고 싶지 않다면 {{ 변수 | safe }}를 사용합니다.

넌적스(Nunjucks)는 퍼그의 HTML 문법 변화에 적응하기 힘든 분에게 유용한 템플릿 엔진이며, 파이어폭스를 개발한 모질라에서 만들었습니다. HTML 문법을 그대로 사용하되 추가로 자바스크립트 문법을 사용할 수 있으며, 파이썬의 템플릿 엔진인 Twig와 문법이 상당히 유사합니다. 넌적스를 설치합니다.$ npm i nunjucks view engine 퍼그 대신 넌적스로 교체합니다.const express = require("express");const morgan = require("morgan");const cookieParser = require("cookie-parser");const session = require("express-session");const dotenv = require("..

레이아웃울 정할 수 있습니다. 공통되는 레이아웃 부분을 따로 관리할 수 있어 좋습니다. include와도 함께 사용하곤 합니다. 레이아웃이 될 파일에는 공통된 마크업을 넣되, 페이지마다 달라지는 부분을 block으로 비워둡니다. block은 여러 개 만들어도 됩니다. block은 [등록명]으로 선언합니다.block이 되는 파일에서는 extends 키워드로 레이아웃 파일을 지정하고 block 부분을 넣습니다. block 선언보다 한 단계 더 들여쓰기되어 있어야 합니다. 나중에 익스프레스에서 res.render('body')를 사용해 하나의 HTML로 합쳐 렌더링할 수 있습니다. 퍼그 확장자는 생략 가능합니다. block 부분이 서로 합쳐집니다.layout.pugdoctype html html hea..

반복문HTML과 다르게 반복문도 사용할 수 있으며, 반복 가능한 변수인 경우에만 해당됩니더.다음과 같이 each로 반복문을 돌릴 수 있습니다. each 대신 for를 써도 됩니다. 반복문 사용 시 인덱스도 가져올 수 있습니다. 조건문조건문으로 편리하게 분기 처리할 수 있습니다. if, else if, else를 사용할 수 있습니다. 다음은 isLoggedIn 변수로 로그인 여부에 따라 다르게 HTML을 렌더링하는 예시입니다. case문도 가능합니다. include다른 퍼그나 HTML 파일을 넣을 수 있습니다.헤더나 푸터, 내비게이션처럼 웹 제작 시 공통되는 부분을 따로 관리할 수 있어 매 페이지마다 동일한 HTML을 넣어야 하는 번거로움을 없앱니다. include 파일 경로로 사용합니다.

HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링할 수 있습니다. res-render를 호출할 때 보내는 변수를 퍼그가 처리합니다. routes/index.js의 코드를 보면 다음 부분이 있습니다.router.get('/', (req, res, next) => { res.render('index', { title: 'Express' });}); res.render(템플릿, 변수 객체)는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드입니다.index.pug를 HTML로 렌더링하면서 { title: 'Express' }라는 객체를 변수로 집어넣습니다. layout.pug와 index.pug의 title 부분이 모두 Express로 치환됩니다. 즉, HTML에도 변수를 사용할 수 있게 된..

기준 HTML과 다르게 화살괄호()와 닫는 태그가 없습니다. 탭 또는 스페이스로만 태그의 부모 자식 관계를 구명합니다. 탭 한번, 스페이스 두 번 또는 스페이스 네 번 모두 상관없습니다. 모든 파일에 동일한 종류의 들어쓰기를 적용하면 됩니다. 자식 태그는 부모 태그보다 들여쓰기되어 있어야 합니다. 들여쓰기에 오류가 있으면 제대로 렌더링되지 않으니 주의하길 바랍니다. doctype html은 html>과 같습니다. html, head, title 태그에서는 자식 태그일수록 한 단계씩 더 들여쓰기되어 있는 모습을 볼 수 있습니다. 화살괄호가 없으므로 태그의 속성도 조금 다르게 표현합니다. 태그명 뒤에 소괄호로 묶어 적습니다. 속성 중 아이디와 클래스가 있는 경우에는 다음과 같이 표현할 수 있습니다. di..

퍼그(제이드) 문법이 간단해서 코드양이 줄어들기 때문입니다. 루비(Ruby)를 사용해봤다면 문법이 비슷해서 빠르게 적응할 수 있으며, 물론 루비를 잘 모르더라도 문법이 쉬워서 빠르게 배울 수 있습니다. 퍼그를 설치합니다. $ npm i pug 익스프레스와 연결하려면 app.js에 다음과 같이 작성되어야 합니다.const express = require("express");const morgan = require("morgan");const cookieParser = require("cookie-parser");const session = require("express-session");const dotenv = require("dotenv");const path = require("path");dot..

익스프레스의 req, res 객체는 http 모듈의 req, res 객체를 확장한 것입니다. 기존 http 모듈의 메서드도 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수도 있습니다. 예를 들어 res.writeHead, res.write, res.end 메서드를 그대로 사용할 수 있으면서 res.send나 res.sendFile 같은 메서드도 쓸 수 있습니다. 다만, 익스프레스의 메서드가 워낙 편리하므로 기존 http 모듈의 메서드는 잘 쓰이지 않습니다.익스프레스가 많은 속성과 메서드를 추가했지만, 여기서는 자주 쓰이는 것 위주로만 알아보겠습니다. req 객체부터 살펴봅니다.• req.app: req 객체를 통해 app 객체에 접근할 수 있습니다. req.app.get('port')와 ..

이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티퍼트 형식으로 업로드할 때 사용하는 미들웨어입니다. 멀티퍼트 형식이란 다음과 같이 enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식을 의미합니다.다음과 같은 multipart.html이 있다면 멀티퍼트 형식으로 데이터를 업로드할 수 있습니다. 아직 서버 쪽 라우터를 만들지 않았으므로 예제가 실행되지는 않습니다. 업로드 멀티파트 형식으로 업로드하는 데이터는 개발자 도구 Network 탭에서 다음과 같이 보입니다. 이미지 하나를 선택하고 title 인풋에 제목이라고 적어서 업로드하면 다음과 같은 데이터가 전송됩니다. 이러한 폼을 통해 업로드하는 파일은 body-parser로는 처리할 수 없고 직접 파싱(해석)..

미들웨어를 직접 만들어보기도 했고, 다른 사람이 만든 미들웨어 패키지를 설치해 정착해보기도 했습니다.app.use((req, res, next) => { console.log("모든 요청에 다 실행됩니다."); next();}); 미들웨어는 req, res, next을 매개변수로 가지는 함수(에러 처리 미들웨어인 예외적으로 err, req, res, next를 가집니다.) 로서 app.use나 app.get, app.post 등으로 정착합니다. 특정한 주소의 요청에만 미들웨어가 실행되게 하려면 첫 번째 인수로 주소를 넣으면 됩니다.app.use( morgan('dev'), express.static('/', path.join(__dirname, 'public')), express.json(); exp..

세션 관리용 미들웨어입니다. 로그인 등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용합니다. 세션은 사용자별로 req.session 객체 안에 유지됩니다.app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, }, name: "session-cookie", })); express-session 1.5 버전 이전에는 내부적으로 cookie-parser를 사용하고 있어서 cookie-parser 미들웨어보다 뒤에 위치해야 했지만..