[node.js] Express_구조 와 미들웨어

익스프레스 프레임워크는 이것 외에도 다양한 패키지를 필요로 한다. 기본 generate가 있으니 이것을 이용하여 설치하면 좋다. 

 

먼저 익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여한다. 기존 메서드들로 계속 사용할 수 있으며 편리한 일부 메서드들을 추가하여 기능을 분리하였다.

 

npm i -g express-generator 명령어로 전역설치하고 해당 폴더에 새로운 express 프로젝트를 생성하려면

express [프로젝트 명] --view=pug  라고 입력한다.

--view는 템플릿 엔진중 Pug로 사용한다는 뜻이다. Pug와 EJS가 있다.

 

 

이렇게 기본 generator가 설치되고 그안에 폴더구조로 app.js route view 등의 폴더구조들이 있다.

 

app.js가 핵심 서버 역할을 하며 bin 폴더의 www 파일은 서버를 실행하는 스크립트이다. public은 외부(브라우저 등의 클라이언트)에서 접근 가능한 파일들을 모아둔 것이고 이미지, CSS, JS 파일들이 들어 있다. routes는 주소별 라우터를 모아둔 곳이고 view는 템플릿 파일을 모아둔 곳이다.

 

서버의 로직은 모두 routes 폴더안에 작성할 것이다. 화면부분은 view이고 db는 따로 폴더를 만들어 사용할 것이다. 여기까지 했다면 바로 npm start 명령어로 해당 로컬 서버에 접속해볼 수 있다.

 

이 express의 구조를 살펴보자

 

app.js

express 패키지를 호출하여 app 변수 객체를 만드는 것, 이 변수에 각종 기능들을 연결할 것이다.

 

이 후, 이 코드 아래부터 app.set과 app.use로시작할텐데 app.set 메서드로 익스프레스 앱을 설정 할 수 있다. app.ues 메서드는 미들웨어를 연결하는 부분이다. 

 

마지막의 위 코드는 app 객체를 모듈로 만들게 된다.  이것이 bin/www 에서 사용된 app모듈이다.

 

미들웨어

미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간에 위치하여 이것들을 조작하여 기능을 추가하거나 나쁜 요청을 걸러낼 수 있다. 

 

미들웨어는 위에서 말한 app.use와 함께 사용이 된다. 코드의 일부분만 보자.

 

 

app.use 메서드의 인자로 들어 있는 함수가 미들웨어이다. 미들웨어는 use 메서드로 app에 장착하며 첫 번째 라인의 logger('dev')부터 시작하여 미들웨어를 순차적으로 거친 후 라우터에서 클라이언트로 응답을 보낸다.

 

이때까지 살펴본 내용을 그림으로 표현하면 다음과 같다.

 

간단한 실습을 통해 어떻게 흐르는지 살펴보자. 아래 코드를 위의 코드 윗부분에 작성하여 테스트를 해보자. 작성후 npm start로 실행시켜 로컬 웹 서버(포트번호 : 3000) 으로 접속한다.

URL에 localhost:3000 으로 접속할 수 있다.

 

 

 

다음과 같은 값이 나올 것이다. 요청 GET /와 GET /style....   이 서버로 전달된 것이다. 이렇게 서버가 받은 요청은 미들웨어를 타고 라우터까지 전달된다.

 

미들웨어에서는 next()가 중요한데 이것을 호출해야 다음 미들웨어로 넘어갈 수 있다. 내부적으로 가지고 있지 않을 경우 꼭 사용해야 한다. next()를 주석처리하면 어떻게 되는지 확인해 보면 좋을 거 같다.

 

이 외에 다른 미들웨어를 몇가지 살펴보자

 

morgan

위의 콘솔에 나오는 GET / 200 ~~~~ 와 같은 로그는 모두 이 미들웨어에서 나오는 것이다. 요청에 대한 정보를 콘솔에 기록한다. 

var logger = require('morgan')      app.use(logger('dev')) 이 라인들이다.

dev는 개발자모드고 short, common 등 있으며 콘솔의 내용에은 HTTP요청(GET) 주소(/) HTTP상태코드(304) 응답속도(1358.159ms) - 응답 바이트(-) 이다.

 

 

body-parser

요청의 본문을 해석해주는 미들웨어이다. form데이터나 AJAX 요청의 데이터를 처리한다. 

이 부분인데 일부 기능이 익스프레스에 내장되어 있어 따로 패키지를 설치하지 않아도 된다. urlencoded 메서드에서 옵션이 false라면 노드의 querystring모듈로 쿼리스트링을 해석하고 true면 qs 모듈을 사용하여 해석한다. qs모듈은 npm 패키지이다. 

 

이 body-parser를 사용하면 내부적으로 본문을 해석해 req.body에 추가한다. 즉 JSON 형식으로

{name : '1', cook : '22' } 를 본문으로 보내면 req.body에 그대로 들어간다. URL-encoded 역시 동일하다.

 

cookie-parser

요청에 동봉된 쿠기를 해석해준다. 해석된 쿠키들은 res.cookies 객체에 들어가며 제공한 문자열로 서명된 쿠키가 된다.

 

Static

정적인 파일들을 제공한다. 실제 서버의 폴더 경로에는 public이 들어있지만, 요청 주소에는 public이 들어 있지 않다. 즉 public/xxx/yy.css 는 http://localhost:3000/xxx/yy.css 로 접근할 수 있다.

 

 

express-session

세션 관리용 미들웨어이다. 해당 패키지를 npm 명령어로 직접 설치해야 한다. 이 부분은 코드와 주석의 내용으로 대체한다.

express-session은 req 객체 안에 req.session 객체를 만들며 이 객체에 값을 대입하거나 삭제해서 세션을 변경할 수 있다. 현재 세션의 아이디는 req.sessionID로 확인할 수 있다.