반응형

express 의 대한 내용을 그전에 설치법과 같이 포스팅을 하였지만 조금더 추가 설명하기 위해 포스팅을 시작한다.

◎ express의 라우팅 기본형식

▼ 내용

express 를 사용하여 라우팅을 할경우 기본방식으로 아래와 같이 쓴다.

const app = express(); app.get('/',(request,response) => { response.writeHead(200); response.end("응답하라 1997"); }); app.listen(포트번호);

◎ express 동적URL

▼ 내용

URL 경로를 동적으로 path를 파라미터로 가져올경우

요청주소 http://localhost:3000/id/asd/pass/password

app.get('/id/:id2/pass/:pw',(request,response) => { console.log(request.params); //{ id2: 'asd', pw: 'password' } }); //위의 경로중 : 붙은건 변수라 생각하면된다 어떤값이들어와도 된다

◎ express get 파라미터

▼ 내용

URL 주소를 get 방식으로 파라미터를 가져올경우

http://localhost:3000/page?id=abcd

app.get('/page',(request,response) => { console.log(request.query); //{ id: 'abcd' } });

여기서 get방식으로 http://localhost:포트번호/id?id=undefined


◎ res.send 와 res.end 차이

▼ res.send

res.send ([body])

express의 코어에서 작동되며 HTTP 응답 헤더 필드를 자동으로 지정하고 자동 HEAD 및 HTTP 캐시 최신 상태 지원을 제공합니다. 즉 http 헤더를 설정하지않으면 body의 객체에 따라 자동으로 헤더가 설정된다.

▼ res.send

res.send ([데이터],[인코딩])

node의 http.ServerResponse 의 response.end() 메소드를 사용합니다.응답을 신속하게 종료할때 사용됩니다.

▼ HTTP 헤더 설정

아래 소스코드와 같이 res.end 는 http 의 헤더를 writeHead로 작성하고

response.writeHead(300) response.end(template2);

아래 소스코드와 같이 res.send 는 http 의 헤더를 set로 작성한다

response.set(300); response.send(template2);


반응형
반응형

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(함수명) 을 써주면 어느곳에서나 #{변수명} 을 적어주면 된다.

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



반응형

+ Recent posts