본문 바로가기

분류 전체보기

(662)
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 객체에 들어있습니다. 만일..
7. 익스프레스 (2) - Router 객체를 통한 라우팅 2 앞선 아티클에서 next 함수를 사용하게 되면, 다음 라우터로 넘어가게 된다는 기능이 있다고 설명했습니다. 이는 정확히 next('route') 기능입니다. 이를 사용하게 되면, 라우터에 연결된 나머지 미들웨어들을 건너뛰게 됩니다. 아래 예시를 보겠습니다.  router.get('/', (req, res, next) => { next('route');}, (req, res, next) => { console.log('실행 안됨'); next();}, (req, res, next) => { console.log('실행 안됨'); next();});router.get('/', (req, res) => { console.log('실행됨'); res.send('Hello E..
7. 익스프레스 (2) - Router 객체를 통한 라우팅 1 앞선 아티클에서 우리는 RESTful 서버를 구현하면서 요청 메서드, 그리고 주소별로 분기 처리를 하는 예제를 살펴보았습니다.    5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [6]앞선 아티클에서 여러가지 파일 코드를 작성했습니다. 특히 핵심인 [restServer.js]의 일부를 작성했는데요, 그 나머지 부분을 작성해 보겠습니다.   [restServer.js]const http = require('http');const fs = requirnozeroslope.tistory.com  보시다시피 if문을 기반으로 라우팅 처리를 진행해서 꽤나 코드가 길고 복잡하다는 것을 알 수 있습니다. 우리가 익스프레를 사용하는 큰 이유 중 하나가 바로 이 라우팅을 간결하게 관리할 수 있다는 점입니..
7. 익스프레스 (1) - 미들웨어 [10] : multer 4 마지막으로 특수한 경우를  살펴보겠습니다. 바ㅍ로, 파일을 업로드하지 않고도 멀티 파트 형식으로 업로드하는 경우입니다. 이럴 때는 none 미들웨어를 사용하게 됩니다.   [multipart.html]  업로드   app.post('/upload', upload.none(), (req, res) => { console.log(req.body); res.send('ok');});  사실 이 경우는 파일을 업로드하지 않았으므로 req.body만 존재하게 됩니다.      지금까지 파일 업로드 타입에 따라서 미들웨어가 달라지는 경우를 하나씩 살펴보았는데, 요약하면 다음과 같습니다.  (1) multer → single : 이미지 하나는 req.file로 / 나머지 정보는 req.body..
7. 익스프레스 (1) - 미들웨어 [10] : multer 3 multer 사용 방법에 대해서, 앞선 아티클에 이어서 살펴보겠습니다.   7. 익스프레스 (1) - 미들웨어 [10] : multer 2앞서서 살펴본 multer 미들웨어 사용에 대한 내용을 이어서 살펴보겠습니다. const multer = require('multer');const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads/'); }, filename(rnozeroslope.tistory.com  이번에는 여러 개의 파일을 업로드하는 경우 입니다. 우선 HTML 파일에서 input 태그에 multiple을 작성합니다. [multipart.html] ..