Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정

middleware 란?

요청 url 의 response를 받기 전에

실행할 함수들? 그런걸

middleware 라고 한다.

java spring의 intecepter 와 똑같은 역할

​

​

◎ middleware 의 예제

▼ 내용

아래 소스 처럼 between hom 을 출력하는 함수를 하나 만들어주고

그걸 express의 라우팅 함수의 가운대 인자로 함수를 집어 넣고

함수의 next() 를 넣어주면 handlehome 의 요청 함수로 가기전에

betweenhome 을 실행 시킬수 있다.

이걸로 로그인정보, 파일다운로드 등등 중간에 인터셉터해서 사용할수있다.

안에 middleware는 많은 갯수제한없이 많이 넣을수 있다.

middleware 의 함수에 next() 를 넣어줘야 다음함수로 진행이된다 안넣으면 에러.

만약 middleware 에 next() 를 안넣고 res.send로 다른걸 받아서 연결을 끊을 수도 있다.

const app = express(); const betweenHome = (req,res,next) => { console.log("between hom") next(); }; const handlehome = (req,res) => res.send("Hello From Home"); } app.get('/',betweenHome,handlehome); //요청 url / 에 들어갈떄마다 betweenhome 함수가 실행된다 .

​

◎ middleware 의 또다른 예제

▼ 내용

middleware 는 app.get 또는 app.post의 인자로 넣어줄수도 있지만

app.use 로 .use 라는 메소드를 통해 모든 요청 url에 대하여 설정해줄수도 있습니다.

라우팅 메소드 전에 써줘야 그 라우팅에 대헤서만 작동하고

app.use 이전에 쓴 라우팅 메소드들에 대헤선 동작하지 않는다

app.get('/profile',handleProfile); app.use(betweenHome); app.get('/',handlehome); // 이럴 경우 /profile 로 들어온건 app.use 가 동작하지 않는다

​

---

◎ middleware 의 라이브러리1 (morgan)

▼ 내용

morgan 은 logging 할때 유용한 패키지 이다.

application 에서 발생하는 모든일을 logging (콘솔출력) 해준다

npm install morgan

설치후 사용방법은 app.use(morgan("")); 다

import morgan from "morgan"; app.use(morgan("tiny"))

morgan 의 인자로는 combined , common , dev , short , tiny 를 사용할수 있다.​

tiny : 접속종류(get/post) , http상태코드 , 로딩시간 을 알 수 있다. (ex GET /profile 304 - - 0.397 ms)

combined : 접속종류(get/post) , 브라우저 종류 , 접속날짜 등등

common : 접속날짜 , 접속종류 , 상태코드 등

dev : 상태코드 , 접속종류 , 로딩시간 등

short : 상태코드 접속종류 로딩시간 등

---

◎ middleware 의 라이브러리2 (helmet)

▼ 내용

node.js 앱의 보안에 도움이되는 라이브러리. 앱을 안전하게 해준다

nosniff , nocache , ieNoOpen , xssFilter 등등 을 지원해준다

​

설치법

npm install helmet

​

사용법

import helmet from "helmet"; app.use(helmet());

​기본적으로 해놓는것이 좋다.

---

​

◎ middleware 의 라이브러리3 (cookie parser)

▼ 내용

cookie 를 전달받아서 사용할 수 있도록 만들어주는 미들웨어

사용자 인증 같은 곳에서 쿠키를 검사할때 사용

​

​설치법

npm install cookie-parser

​

사용법

import cookieParser from "cookie-parser";

​기본적으로 해놓는것이 좋다.

---

​

◎ middleware 의 라이브러리4 (body parser)

▼ 내용

사용자가 웹사이트로 전달하는 정보들을 검사하는 미들웨어 request 에서 form 이나 json 형태로 된 정보를 접근하는 미들웨어 cookie-parser 와 같이 작동해서 세션에 정보를 담을수 있다.

​

설치법

npm install body-parser

​

사용법

import bodyParser from "body-parser"; app.use(bodyParser.json()); 또는 app.use(bodyParser.urlencoded({extended:true})); //중첩객체허용 app.post('/create_process',(request,response) => { console.log(request.body); } //{ title: 'abcd', description: 'efgh' }

위처럼 app.use 를 설정하면 get,post로 들어온 request의 값들을 body 프로퍼티를 추가해 위처럼자동으로 객체화 시켜준다. 사용할땐 request.body를 쓰면된다.

​

▼ [extended 옵션]

extended 는 중첩된 객체표현을 허용할지 말지를 정하는 것이다. 객체 안에 객체를 파싱할 수 있게하려면 true. 내부적으로 true 를 하면 qs 모듈을 사용하고, false 면 query-string 모듈을 사용한다. 이 두 모듈간의 차이에서 중첩객체 파싱여부가 갈린다. querystring.parse는 object를 상속받지 않는다. 따라서 toString()와 hasOwnProperty() 등이 사용불가능해진다

​

▼

express 자체에도 있어서 구지 설치할 필요는 없다. 아래는 express의 body parser 사용하는 방법

app.use (express.urlencoded ({extended : true})); app.use (express.json ());

---

​

◎ express 의 url 추가맵핑

▼ 내용

app.use로 중간에 인터셉터해서 함수를 실행할수 있다고 말했다.

이걸 이용해서 abc/index , abc/abcd , abc/correction 이렇게

url 앞에 맵핑하는법을 설명하겠다.

​

router.js

import express from "express"; export const userRouter = express.Router(); userRouter.get("/",(req,res) => res.send('user index')); userRouter.get("/edit",(req,res) => res.send('user edit')); userRouter.get("/password",(req,res) => res.send('user password'));

app.js

import { userRouter } from "./router"; app.use('/user',userRouter);

이렇게 import,export 로 모듈화시켜서 app.use 에 모듈을 집어 넣으면

모듈에 정의된 함수가 /user/* 이렇게 정의된대로 url 맵핑이 된다.

추가로 URL의 :URL 이렇게 적으면 :URL 은 변수 URL 로 인식한다 (express 에서)

---

◎ 뷰템플릿 글로벌변수

▼ 내용

app.use를 활용하여 .pug에 변수를 사용할수 있다.

즉 app.use에 할당된 함수의 지역변수를 뷰템플릿 어디서나 사용할수있도록 하기 위함이다.

설명은 너무기니 소스를 참고하면 된다

​

app.js

import { localsMiddleware } from "./middlewares"; app.use(localsMiddleware);

middlewares.js

export const localsMiddleware = (req,res,next) => { res.locals.siteName = "WeTube"; res.locals.routes.login = "/login"; next(); }

footer.pug

a(href=routes.login) Login span.footer__text #{siteName}

이렇게 middlewares.js의 req,res,next 를 받아서 함수로 작성하고

(함수안에 마지막엔 next(); 를 꼮써야 한다.

res.locals 는 express에서 지원해주는객체로 rex.locals.xxx <-- 여기에 변수명을 준다.

그리고 그 변수를 export 해준다음 app.js 에 import 해서

app.use(함수명) 을 써주면 어느곳에서나 #{변수명} 을 적어주면 된다.

태그의 속성 () 안에 있는 경우엔 =변수명 이렇게 쓰면된다

---

​