[JS][Node.js] express로 웹서버 만들기 - 여러가지 middle ware

미들웨어 Middle Ware

애플리케이션과 다른 도구 혹은 데이터베이스 사이를 연결해주는 소프트웨어이다.

운영시스템과 실행되는 앱 사이에 위치해있으며 데이터를 주고 받는 중개와 조정의 역할을 한다.

 

주고 받아야할 데이터가 

이미지 혹은 비디오처럼 간단한 데이터이거나 은행 거래내역과 같이 복잡한 데이터일 수 있다.

또 다양한 방식으로 저장되거나 다양한 양식을 사용할 수 있다. 

 

여기서 미들웨어는 이런 백엔드 자원(데이터)에 접근하거나 접근권한을 지울 수 있다. 

간단한 객체 접근 프로토콜(SOAP), 상태변환(REST), 자바스크립트 객체 노트(JSON)과 같이

데이터를 변환을 위한 메세지 서비스를 제공한다.

미들웨어 구조

express와 함께 사용하는 미들웨어

미들웨어 함수 : next

요청(req) 응답(res) 주기 중 다음에 올 미들웨어함수에 대한 접근권한을 갖는다.

• 모든코드를 실행한다.
• 요청이나 응답에 대한 변경을 실행한다.
• 요청-응답 주기를 종료한다.
• 스택 내의 다음 미들웨어 함수를 호출한다. next()

express에서 제공하는 미들웨어함수는 애플리케이션 / 라우터 레벨의 미들웨어와 오류처리/ 써드파티 /기본제공되는 미들웨어가 있다.

 

가장 간단한 사용을 살펴보자

const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

• .get : 미들웨어 함수가 적용되는 HTTP 메소드
• '/' : 미들웨어 함수가 적용되는 경로(라우트)
• function(){} : 미들웨어 함수
• req : 미들웨어 함수에 대한 HTTP 요청인수 / res : 응답인수
• next :  미들웨어 함수에대한 콜백인수 

미들웨어 함수를 로드하기 위해서는 app.use()을 호출한다.

 

다양한 미들웨어를 사용해보자

1. morgan()

패키지 설치 후 main.js에 

const morgan =require('morgan') //불러오기

app.use(morgan('dev')) //const app = express()

인수는 format string와 option 이 있다.

predefined	tiny, short, common, dev, combined
predefined tokens	':method :url :status :res[content-length] - :response-time ms'

 

2. static

CSS파일, 이미지, JavaScript와 같은 정적인 파일들을 제공하는 라우터 ,

express 기본제공 express.static()

app.use(express.static('public'));

public 디렉토리에 포함된 파일을 로드할 수 있다.

app.use(express.static('public'));
app.use(express.static('files'));

또한 여러개의 디렉토리를 사용할 수 있는데 작성한 순서대로 파일을 검색한다.

 

가상 경로 접두부를 작성하기 위해서는 마운트경로를 지정한다.

app.use('/static', express.static('public'));

http://localhost:3000/static/파일들

 

express앱을 다른 디렉토리에서 사용하는 경우에는 아래와 같이 절대 경로를 이용하는 것이 안전하다.

app.use('/static', express.static(__dirname + '/public'));

public/image/flower.jpg -> http://localhost:3000/image/flower.jpg로 접근할 수 있다.

실제 서버의 폴더 경로에는 public이 포함되지만 요청주소에는 포함되지 않는다.

 

만일 호환되는 파일이 있다면 다음 미들웨어는 실행되지 않고 중단하고 응답으로 파일을 보내고 next()을 호출하지 않는다.

반대로 호환되는 파일이 없다면 알아서 next()을 호출한다.

 

파일이 있는 경우는 res.send/ res.sendFile등의 메서드로 응답을 보내야한다. 

 

3. body-parser

핸들러 전 미들웨어에서 들어오는 요청(req)의 데이터를 해석해 구문분석하고 req.body 객체로 만들어준다. 

 

req.body은 JSON객체에 접근이 가능하다.

//    {
//        "email":"hello@world.net",
//        "password":"cdk3lf3wk2ld"
//    }

app.post('/login',(req,res)=>{
    console.log(req.body.email);
    console.log(rea.body.password);}
    )

reqp.body은 사용자 입력을 기반으로 하므로 모든 속성과 값을 신뢰할수 없다,따라서 유효성검사가 필요하다.

 

예를들어 req.body.foo.toString()의 foo 속성이 없을 수도 있고 문자열이 아닐수도 있고 toString()이 함수가 아닌 문자열이거나 다른 사용자의 입력값일수가 있다.

 

express의 req 객체는 node의 request객체보다 향상되버전으로 'query string','paraneters','body','HTTPheader'등의 프로퍼티를 갖는다.

 

bodyParser.json/raw/text/urlencoded/ 

json형식 :   {
       "user":"taeyu",
       "major":"exploringdessert"   

}

 

urlencoded 형식 : 

user=taeyu&major=exploringdessert

다양한 옵션들이 있다. 참조 홈페이지를 참조하자

 

raw 형식 : 가공되지않은 데이터로 버터데이터 형식이다.

geeksforgeeks.org

 

text : text형식의 데이터

 

4. cookie-parser

요청의 쿠키를 해석해 req.cookies 객체로 만들어준다.

const cookieParser = require('cookie-parser')

예를들어 user=taeyu&major=exploringdessert의 쿠키를 보냈다면

cookies { user='taeyu', major='exploringdessert' }의 형식의 객체로 만들어준다.

 

cookieParser(secret,options)

secret : 문자열 혹은 배열(array)로 이루어졌으며 선택사항이다.

서명된 쿠키가 있다면 제공한 키를 통해 해당 쿠키가 내 서버가 만든 쿠키임을 검증한다. req.signedCookiees객체에 들어 있다.

options : 쿠키값을 디코딩하는 함수 디코딩

 

5. express-session

세션관리용 미들에어 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 사용

 

세션데이터는 쿠키로저장되지 않고 sessionID로 서버사이드에 저장된다.

기본 서버사이드 세션 저장소인 MemoryStore은 단순히 환경생산을 위해 설계되지않았다.

대부분 조건에서 메모리가 부족하고 과거 싱글브로세스를 스케일하지 않는다. 이는 이버깅과 개발을 위한 것이다.

{ path: '/', httpOnly: true, secure: false, maxAge: null }

app.use(session({
    resace : false,
    saveUninitialized : false,
    secret : process.env.COOKIE_SECRET,//cookie-parser와 같은 키를 이용해야한다.
    cookie:{
        httpOnly : true,
        secure : false,
    },
    name : 'session-cookie' // option이다. 기본값은 connect.sid
    })
)

위 코드로 만들어진 req.session객체에 값을 대입하거나 삭제하여 세션을 변경할 수 있다.

 

 

참조

• https://www.npmjs.com/package/body-parser
• https://expressjs.com/ko/starter/static-files.html
• https://www.npmjs.com/package/morgan
• https://expressjs.com/ko/guide/writing-middleware.html
• https://www.techtarget.com/searchapparchitecture/definition/middleware