본문 바로가기

Programming

(477)
7. 익스프레스 (4) - 템플릿 엔진 : Pug 5 Pug에서의 변수 사용에 대해서 이어서 좀 더 살펴보겠습니다. 앞서서 라우터에서 변수 객체를 선언하고( { title: 'Express' } ) 변수를 사용할 때 =를 사용하거나(h1= title) #{ }를 사용하는 방식을 설명했습니다.  이와 다르게 직접 Pug 내부에서 변수를 선언할 수도 있습니다. 빼기( - )를 먼저 입력하면 이어서 자바스크립트 구문을 입력할 수 있고, 여기에 변수를 선언한 다음 다음 줄부터 해당 변수를 사용할 수도 있습니다.  [HTML]Node.js와 Javascript  [Pug]- const node = 'Node.js'- const js = 'Javascript'p #{node}와 #{js}     Pug는 기본적으로 변수에 있는 특수 문자를 HTML 엔티티로 이스케이핑..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 4 ○ 변수  Pug에서는 기본 HTML과 다르게 JS 변수를 템플릿에 렌더링할 수 있습니다. res.render 호출 과정에서 보내는 변수를 Pug가 처리하게 되죠. 아래와 같이 routes/index.js의 코드 예제가 있다고 가정해 봅시다.router.get('/', (req, res, next) => { res.render('index', { title: 'Express'});}); 위와 같이 res.render(템플릿, 변수 객체) 형태는 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드를 의미합니다. 즉, index.pug를 HTML로 렌더링 하면서 { title: 'Express' } 라는 객체를 변수로 할당하게 됩니다. 이런 방식으로 HTML에서 변수를 사용할 수 있게 만들어..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 3 앞선 아티클에서 이어서 살펴보도록 하겠습니다.    중요한 것은 모든 파일에 동일한 방식을 사용해야 한다는 점입니다. - ''를 사용하" data-og-host="nozeroslope.tistory.com" data-og-source-url="https://nozeroslope.tistory.com/624" data-og-url="https://nozeroslope.tistory.com/624" data-og-image="https://blog.kakaocdn.net/dna/qT7Sn/hyW6EdqLhF/AAAAAAAAAAAAAAAAAAAAAFFik6o67bsw7Fy7tvXKnv5L4A89Agyv54y4NvGr_8TA/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=Fl2CjqCBFWbz1AlearxeitmYBkk%3D
7. 익스프레스 (4) - 템플릿 엔진 : Pug 2 ○ Pug에서 HTML 표현하기 - 기본적으로 Pug는 ''가 없습니다. - 하이어라키는 탭, 스페이스로만 구분합니다.   > 중요한 것은 모든 파일에 동일한 방식을 사용해야 한다는 점입니다. - ''를 사용하지 않기에 태그 별 속성 표시도 다르게 합니다.   > 태그 명 뒤에 소괄호로 묶어서 표현합니다.  [HTML]   [PUG]doctype htmlhtml head title= title link(rel='stylesheet', href='/stylesheets/style.css')     - 속성 중 아이디는 #, 클래스는 .(점)으로 표현합니다.- 단, div 태그의 경우 div는 생략이 가능합니다.  [HTML]  [PUG]#login-button.post-images..
7. 익스프레스 (4) - 템플릿 엔진 : Pug 1 기본적으로 템플릿 엔진, 정적인 언어인 HTML의 한계를 극복하기 위해서 지원하는 엔진입니다. 반복적인 데이터 처리나 복잡한 과정을 처리하기 위해 자바스크립트를 기반으로 HTML을 렌더링할 수 있게 해주는 엔진이지요. 그래서 HTML 문법과의 차이가 있을수도 있고, 자바스크립트 문법을 사용하기도 합니다.  여기서는 퍼그(Pug), 넌적스(Nunjucks)를 살펴볼 예정이며 향후에는 넌적스를 기반으로 예제를 살펴보겠습니다.      ○ Pug 사용 준비 - 우선, 아래와 같은 방식으로 패키지를 설치합니다. $ npm i pug  - app.js에서의 설정은 다음과 같습니다. // ...app.set('port', process.env.PORT || 3000);app.set('views', path.join..
7. 익스프레스 (3) - req, res 객체 알아보기 익스프레스에서의 req, res 객체는 http 모듈의 req, res 객체를 확장한 버전이죠. 그래서 기존 http 모듈의 메서드 뿐만 아니라 익스프레스가 추가한 메서드나 속성을 사용할수도 있습니다(익스프레스 메서드가 편해서 http를 잘 사용하지 않게되는 형식) res.writeHead, res.write, res.end 메서드를 그대로 사용하면서도, res.send, res.sendFile 같은 메서드를 사용할 수 있습니다. 익스프레스에서 사용하는 메서드 중 자주 사용하는 것들을 중심으로 살펴보겠습니다.    ○ reqreq.app : req 객체를 통해서 app 객체에 접근한다. req.app.get('port')와 같은 방식req.body: body-parser 미들웨어가 만드는 요청의 본문을 ..
7. 익스프레스 (2) - Router 객체를 통한 라우팅 4 라우팅 마무리입니다. app.js를 다시 살펴보면, 에러 처리용 미들위에 404 관련 미들웨어가 있습니다. [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');dotenv.config();const indexRouter = require('./routes');const userRouter = require('./routes/user');const app =..
7. 익스프레스 (2) - Router 객체를 통한 라우팅 3 앞선 아티클에서 살펴본 라우터 매개변수 패턴을 이어서 살펴보도록 하겠습니다.    ○ 라우터 매개변수 패턴 라우터 패턴 중 라우트 매개변수 패턴을 살펴보겠습니다. 여러 패턴 중 자주 쓰이는 패턴입니다. 아래 형식을 예제로 보겠습니다.  router.get('/user/:id', (req, res) => { console.log(req.params, req.query);});  위의 주소 :id는 문자 ':id'를 의미하는 것이 아니라 다른 값을 넣을 수 있는 파라미터를 의미합니다. 예를 들어서 /user/1, 또는/user/123의 요청도 이 라우터가 처리하게 됩니다.  이 방식을 사용하게 되면 :id에 해당하는 1이나 123을 조회할 수 있는데, 이는 req.params 객체에 들어있습니다. 만일..