express에 대하여

셋업을 다 했으면 express를 통하여 서버를 만들어 보자 

공식문서를 참고해 본다 . 5버젼은 beta버젼이라 4.x으로 서술하겠다.

 

https://expressjs.com/en/4x/api.html

Express 4.x - API Reference

 

공식문서의 서버설정 코드이다. 

하나하나 정리해보자.

1. Server : request and response

1. 서버 초기 코드

import express from "express";

const app = express();

const PORT = 4000;

const handleListen = () => console.log(`Server listening -> http://localhost:${PORT}`);

app.listen(PORT, handleListen);

import express from "express"

Babel을 사용하기 때문에 이렇게 신문법을 사용해도 된다. 

일반적인 4000포트를 할당하고 공식문서처럼 코딩을 하였다. 

 

2. 이제 get 요청을 해보자 

import express from "express";
const app = express();
const PORT = 4000;
///////////////////////////////////////////////////////////////
app.get("/", ()=> console.log("this is callback"));

///////////////////////////////////////////////////////////////
const handleListen = () => console.log(`Server listening -> http://localhost:${PORT}`);
app.listen(PORT, handleListen);

HTTP protocol을 사용하여 브라우저가 웹서버에게 get요청을 한 내용이다. 

하지만 응답하는 내용이 없어서 브라우저는 로드를 유지하고 서버의 응답을 기다리게 된다. 

 

3. 그럼 response를 만들어 보자. 어떻게? 

  간단하다. request와 response를 가진 컨트롤러를 만들면 되겠지...

 

import express from "express";
const app = express();
const PORT = 4000;
///////////////////////////////////////////////////////////////
const controllerHome = (req, res) =>{
	return res.send("this is home");
}
const controllerLogin = (req, res) =>{
	return res.send("this is login page");
}

app.get("/", controllerHome);
app.get("/login", controllerLogin);

///////////////////////////////////////////////////////////////
const handleListen = () => console.log(`Server listening -> http://localhost:${PORT}`);
app.listen(PORT, handleListen);

이렇게 하면 서버는 응답하여 페이지에 this is home이라고 메세지를 띄워 준다. 

 

4. 공식문서 request, response 참고하여 필요시마다 properties를 찾아서 구현하면 되겠다. 

    일단은 send만 알아두자.

 

    공식문서에 써있다..

    Sends the HTTP response.

    The body parameter can be a Buffer object, a String, an object, Boolean, or an Array.

 

https://expressjs.com/en/4x/api.html#res.send

Express 4.x - API Reference

2. middleware

미들웨어는 서버로의 요청부터 응답이 오는 사이클 중간에 목적에 맞게 처리를 하는지, 소위말하자면 중간에 거처가는 함수들이라고 보면 되겠다. 

따라서 모든 핸들러는 미들웨어이고, 모든 컨트롤러는 미들웨어이며 형태는 3가지 arguments로 이루어져 있다. 

req, res, next

모든 핸들러에 next만 삽입하면 미들웨어가 된다. 관습적으로 마지막에 동작하는 컨트롤러는 next를 사용하지 않는다. 

 

 

import express from "express";
const app = express();
const PORT = 4000;
///////////////////////////////////////////////////////////////
const middlewareone = (req, res, next) =>{
	next();
}
const middlewaretwo = (req, res, next) =>{
	next()
}
const controllerHome = (req, res) => res.send("this is last handling");

app.get("/", middlewareone, middlewaretwo, controllerHome);


///////////////////////////////////////////////////////////////
const handleListen = () => console.log(`Server listening -> http://localhost:${PORT}`);
app.listen(PORT, handleListen);

페이지 별로 미들웨어를 설정하고 싶지 않으면 즉 중복코드를 피하고 싶으면,

app.use(middlewareone, middlewaretwon) 를 적용하고 싶은 get호출 위에 바로 삽입하면 된다. 

 

3. 외부 미들웨어

대표적으로 많이 사용하는 미들웨어 모듈은 morgan이다.

https://www.npmjs.com/package/morgan

morgan

위 공식 사이트를 참고하자.

 

그밖에 자주 사용하는 미들웨어는 다음에 정리 되어 있으니 살펴보도록하자 필요할때 읽어보고 찾아오면 될것 같다.

https://velog.io/@eogns1208/Express-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4

Express - 자주 사용하는 미들웨어