[Node.js] 6장 익스프레스 웹 서버 만들기

---

🔍 익스프레스

npm에는 서버를 제작하는 과정에서의 불편함을 해소하고 편의 기능을 추가한 웹 서버 프레임워크가 있는데, 대표적인 것이 익스프레스다.

익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했다.

 

📌 익스프레스 프로젝트 시작하기

1. learn-express 폴더 생성
2. package.json 생성

// package.json
{
  "name": "learn-express",
  "version": "0.0.1",
  "description": "익스프레스를 배우자",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app"
  },
  "author": "seol",
  "license": "MIT",
}

// app.js
const express = require('express');

const app = express();
app.set('port', process.env.PORT || 3000);  // 서버가 실행될 포트 설정

app.get('/', (req, res) => {  // req: 요청 관한 정보 들어있는 객체, res: 응답 관한 정보 들어있는 객체
  res.send('Hello, Express');  // 주소에 대한 GET 요청이 올 때 어떤 동작을 할지
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

 

🔍 미들웨어

📌 미들웨어는 익스프레스의 핵심

요청과 응답 중간에 위치하여 미들웨어라고 불린다. 또한, 뒤에 나오는 라우터와 에러 핸들러 또한 미들웨어의 일종이므로 미들웨어가 익스프레스의 전부라고 해도 과언이 아니다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고 나쁜 요청을 걸러내기도 한다.

미들웨어는 app.use와 함께 사용된다. => app.use(미들웨어)

 

// app.js
...
app.set('port', process.env.PORT || 3000);

app.use((req, res, next => {
  console.log('모든 요청에 다 실행됩니다');
  next();
}));
app.get('/', (req, res, next) => {
  console.log('GET / 요청에서만 실행됩니다.');
  next();
}, (req, res) => {
  throw new Error('에러는 에러 처리 미들웨어로 갑니다.')
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
...

미들웨어는 위에서부터 아래로 순서대로 실행되면서 요청과 응답 사이에 특별한 기능을 추가할 수 있다. next라는 세 번째 매개변수는 다음 미들웨어로 넘어가는 함수다. next를 실행하지 않으면 다음 미들웨어가 실행되지 않는다.

 

app.use(미들웨어)	모든 요청에서 미들웨어 실행
app.use('/abc', 미들웨어)	abc로 시작하는 요청에서 미들웨어 실행
app.post('/abc', 미들웨어)	abc로 시작하는 POST 요청에서 미들웨어 실행

 

app.use나 app.get 같은 라우터에 미들웨어를 여러 개 장착할 수 있다.

에러 처리 미들웨어는 매개변수가 err, req, res, next로 네 개다. 모든 매개변수를 사용하지 않더라도 매개변수는 반드시 네 개여야 한다.

 

📌 morgan

사용법: app.use(morgan('dev'));

요청과 응답에 대한 정보를 콘솔에 기록한다.

dev 모드 기준으로 GET / 500 7.409ms - 50은 각각 [HTTP 메서드] [주소] [HTTP 상태 코드] [응답 속도] - [응답 바이트]를 의미한다. 요청과 응답을 한 눈에 볼 수 있어 편리하다.

dev 외에 combined, common, short, tiny 등을 넣을 수 있다.

 

📌 static

static 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 한다. 기본적으로 제공되기에 따로 설치할 필요는 없다.

app.use('요청 경로', express.static('실제 경로'));

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

 

📌 body-parser

요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어다. 폼 데이터나 AJAX 요청의 데이터를 처리한다. 그러나 멀티파트(이미지, 동영상, 파일) 데이터는 처리하지 못하므로 이런 데이터는 multer 모듈을 사용하면 된다.

app.use(express.json());  // JSON 형식의 데이터 전달 방식
app.use(express.urlencoded({extended: false}));  // 주소 형식으로 데이터를 보내는 방식
// {extended: false}면 querystring 모듈을 사용해 쿼리스트링을 해석하고,
// true면 qs 모듈을 사용하여 쿼리스트링을 해석

 

📌 cookie-parser

cookie-parser는 요청에 동봉된 쿠키를 해석해 req.cookies 객체로 만든다.

해석된 쿠키들은 req.cookie 객체에 들어간다. 만약 name=seol을 보냈다면 req.cookie는 {name: 'seol'}가 된다. 유효기간이 지난 쿠키는 알아서 걸러낸다.

첫 번째 인수로 비밀 키를 넣어줄 수 있는데 쿠키는 클라이언트에서 위조하기 쉬우므로 비밀 키를 통해 만들어낸 서명을 쿠키 값 뒤에 붙인다. name=seol.sign과 같은 형태가 되며, req.signedCookies 객체에 들어있다.

app.use(cookieParser(비밀키));

쿠키를 지우려면 키와 값 외의 옵션도 정확하게 일치해야 쿠키가 지워진다.

 

📌 express-session

세션 관리용 미들웨어다. 로그인 등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 유용하다. 세션은 사용자별로 req.session 객체 안에 유지된다.

app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  name: 'session-cookie',
}));

express-session은 세션 관리 시 클라이언트에 쿠키를 보낸다.

 

📌 multer

이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어다. 멀티파트 형식이란 enctype이 multipart/from-data인 폼을 통해 업로드하는 데이터의 형식을 의미한다.

 

🔍 미들웨어의 특성

• 미들웨어는 req, res, next를 매개변수로 가지는 함수(에러 처리 미들웨어만 예외적으로 err, req, res, next를 가진다.)로서 app.use나 app.get, app.post 등으로 장착한다.
• 특정한 주소의 요청에만 미들웨어가 실행되게 하려면 첫 번째 인수로 주소를 넣으면 된다.
• 동시에 여러 개의 미들웨어를 장착할 수도 있으며, 다음 미들웨어로 넘어가려면 next()를 호출해야 한다.
• 미들웨어는 장착 순서에 따라 어떤 미들웨어는 실행되지 않을 수도 있다.
• 현재 요청이 처리되는 동안 req.data를 통해 미들웨어 간의 데이터를 공유할 수 있고, 새로운 요청이 오면 req.data는 초기화된다.
• 미들웨어 안에 미들웨어를 넣는 방식을 사용할 수 있는데, 이 패턴은 기존 미들웨어의 기능을 확장할 수 있으므로 유용하다.

app.use(morgan('dev'));
또는
app.use((req, res, next) => {
  morgan('dev')(req, res, next);
});

 

🔍 Router

app.get 같은 메서드는 라우터 부분이다. 라우터를 많이 연결하면 코드가 길어지므로 익스프레스는 라우터를 분리할 수 있는 방법을 제공한다.

// routes/index.js
const express = require('express');

const router = express.Router();

// GET / 라우터
router.get('/', (req, res) => {
  res.send('Hello, Express');
});

module.exports = router;


// routes/user.js
const express = require('express');

const router = express.Router();

// GET /user 라우터
router.get('/', (req, res) => {
  res.send('Hello, User');
});

// app.js
...
const indexRouter = require('./routes');
const userRouter = require('./routes/user);
...

app.use('/', indexRouter);
app.use('/user', userRouter);

app.use로 연결할 때는 주소가 합쳐진다.

 

router.get('/user/:id', function(req, res) {
  console.log(req.params, req.query);
});

위의 주소는 자주 쓰이는 패턴이다. 주소에 :id가 있는데, 이 부분에는 다른 값을 넣을 수 있다. /user/1이나 /user/123 등의 요청도 이 라우터가 처리하게 된다. 이 방식의 장점은 :id에 해당하는 1이나 123을 조회할 수 있다는 점이며, req.params 객체 안에 들어 있다. 다만 주의할 점은 일반 라우터보다 뒤에 위치해야 한다는 점이다.

 

🔍 req, res 객체

익스프레스의 req, res 객체는 http 모듈의 req, res 객체를 확장한 것이다. 기존의 http 모듈의 메서드도 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수도 있다.

• req 객체
  • req.app: req 객체를 통해 app 객체에 접근할 수 있다. req.app.get('port')의 형식으로 사용 가능하다.
  • req.body: body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체다.
  • req.cookie: cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체다.
  • req.id: 요청의 ip 주소가 담겨있다.
  • req.params: 라우트 매개변수에 대한 정보가 담긴 객체다.
  • 등등
• res 객체
  • res.app: req.app처럼 res 객체를 통해 app 객체에 접근할 수 있다.
  • res.cookie(키, 값, 옵션): 쿠키를 설정하는 메서드다.
  • res.clearCookie(키, 값, 옵션): 쿠키를 제거하는 메서드다.
  • res.end(): 데이터 없이 응답을 보낸다.
  • res.json(JSON): JSON 형식의 응답을 보낸다.
  • res.send(데이터): 데이터와 함께 응답을 보낸다. 문자열일수도 HTML, 버퍼, 객체, 배열일수도 있다.
  • 등등

 

🔍 템플릿 엔진

템플릿 엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 한다. 따라서 HTML과는 문법이 살짝 다를 수도 있고, 자바스크립트 문법이 들어 있기도 하다.

📌 퍼그(Pug)

문법이 간단해 코드의 양이 줄어들지만, HTML과는 문법이 많이 달라 호불호가 달린다.

 

기존 HTML과는 다르게 화살괄호(<>)와 닫는 태그가 없다. 탭 또는 스페이스로만 태그의 부모 자식 관계를 규명한다.

퍼그	HTML
doctype html html   head     title = title     linke(rel='stylesheet', href='/stylesheets/style.css')	<!DOCTYPE html> <html>   <head>     <title>익스프레스</title>     <link rel="stylesheet" href="/style.css" />   </head> </html>

 

속성 중 아이디와 클래스가 있는 경우에는 아래와 같이 표현하며, div 태그인 경우 div 문자는 생략 가능하다.

퍼그	HTML
#login-button .post-imagee span#highlight p.hidden.full	<div id="login-button"></div> <div class="post-image"></div> <span id="highlight"></span> <p class="hidden full"></p>

 

HTML 텍스트는 아래와 같이 태그 또는 속성 뒤에 한 칸을 띄고 입력한다.

퍼그	HTML
p Welcome to Express button(type='submit') 전송	<p>Welcome to Express</p> <button type="submit">전송</button>

 

에디터에서 텍스트를 여러 줄 입력하고 싶다면 파이프(|)를 넣는다.

퍼그	HTML
p   | 안녕하세요.   | 여러 줄을 입력합니다.   br   | 태그도 중간에 넣을 수 있습니다.	<p>안녕하세요 여러 줄을 입력합니다.   <br />   태그도 중간에 넣을 수 있습니다. </p>

 

style이나 script 태그로 CSS 또는 자바스크립트 코드를 작성하고 싶다면 태그 뒤에 점(.)을 붙인다.

퍼그	HTML
style.   h1 {     font-size: 30px;   } script.   const message = 'Pug';   alert(message);	<style>   h1 {     font-size: 30px;   } </style> <script>   const message = 'Pug';   alert(message); </script>

 

퍼그는 자바스크립트 변수를 템플릿에 렌더링할 수 있다.

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });  // render(템플릿, 변수 객체)
});

 

변수를 텍스트로 사용하고 싶다면 태그 뒤에 =를 붙인 후 변수 입력하고, 텍스트 중간에 변수를 넣으려면 #{변수}를 입력한다.

퍼그	HTML
- const node = 'Node.js' - const js = 'Javascript' p #{node}와 #{js}	<p>Node.js와 Javascript</p>

 

반복문도 사용할 수 있고, 반복 가능한 변수인 경우에만 해당된다. each로 반복문 돌릴 수 있으며, for를 대신 써도 된다.

퍼그	HTML
ul   each fruit in ['사과', '배', '오렌지', '바나나', '복숭아']     li = fruit	<ul>   <li>사과</li>   <li>배</li>   <li>오렌지</li>   <li>바나나</li>   <li>복숭아</li> </ul>

 

반복문 사용시 인덱스도 가져올 수 있다.

퍼그	HTML
ul   each fruit in ['사과', '배', '오렌지', '바나나', '복숭아']     li = (index + 1) + '번째 ' + fruit	<ul>   <li>1번째 사과</li>   <li>2번째 배</li>   <li>3번째 오렌지</li>   <li>4번째 바나나</li>   <li>5번째 복숭아</li> </ul>

 

조건문으로 편하게 분기 처리할 수 있고, if, else if, else 사용 가능하다.

퍼그	HTML
if isLoggedIn   div 로그인 되었습니다. else   div 로그인이 필요합니다.	<!-- isLoggedIn이 true일 때 --> <div>로그인이 되었습니다.</div> <!-- isLoggedIn이 false일 때 --> <div>로그인이 필요합니다</div>

 

case문도 사용 가능하다.

퍼그	HTML
case fruit   when 'apple'     p 사과입니다.   when 'apple'     p 바나나입니다.   when 'apple'     p 오렌지입니다.   when 'apple'     p 사과도 바나나도 오렌지도 아닙니다.	<!-- fruit이 apple일 때 --> <p>사과입니다.</p> <!-- fruit이 banana일 때 --> <p>바나나입니다.</p> <!-- fruit이 orange일 때 --> <p>오렌지입니다.</p> <!-- 기본값 --> <p>사과도 바나나도 오렌지도 아닙니다.</p>

 

📌 넌적스(Nunjucks)

넌적스는 퍼그의 HTML 문법 변화에 적응하기 힘든 분에게 적합한 템플릿 엔진이며, HTML 문법을 그대로 사용하되 추가로 자바스크립트 문법을 사용할 수 있고, 파이썬의 템플릿 엔진인 Twig와 문법이 상당히 유사하다.

 

res.render 호출 시 보내는 변수를 넌적스가 처리한다.

router.get('/', function(req, res, next) {
  res.render('index', {title: 'Express'});
});

 

넌적스에서 변수는 {{ }}로 감싼다.

넌적스	HTML
<h1>{{title}}</h1> <p>Welcome to {{title}}</p> <button class="{{title}}" type	<h1>Express</h1> <p>Welcome to Express</p> <button class="Express" type="submit">전송</button> <input placeholder="Express 연습" />

 

내부에 변수를 사용할 수도 있다. 변수를 선언할 때는 {% set 변수 = '값' %}를 사용한다.

넌적스	HTML
{% set node = 'Node.js' %} {% set js = 'Javascript' %} <p>{{node}}와 {{js}}</p>	<p>Node.js와 Javascript</p>

 

HTML을 이스케이프하고 싶지 않다면 {{변수 | safe}}를 사용합니다.

넌적스	HTML
<p>{{'<strong>이스케이프</strong>'}}</p> <p>{{'<strong>이스케이프하지 않음</strong>' | safe}}</p>	<p>&lt;strong&gt;이스케이프&lt;/strong&gt;</p> <p><strong>이스케이프하지 않음</strong></p>

 

넌적스에서는 특수한 구문을 {% %} 안에 쓴다. 따라서 반복문도 이 안에 넣으면 된다. for in문과 endfor 사이에 위치하면 된다.

넌적스	HTML
<ul>   {% set fruits = ['사과', '배', '오렌지', '바나나', '복숭아'] %}   {% for item in fruits %}   <li>{{item}}</li>   {% endfor %} </ul>	<ul>   <li>사과</li>   <li>배</li>   <li>오렌지</li>   <li>바나나</li>   <li>복숭아</li> </ul>

 

반복문에서 인덱스를 사용하고 싶다면 loop.index라는 특수한 변수를 사용할 수 있다.

넌적스	HTML
<ul>   {% set fruits = ['사과', '배', '오렌지', '바나나', '복숭아'] %}   {% for item in fruits %}   <li>{{loop.index}}번째 {{item}}</li>   {% endfor %} </ul>	<ul>   <li>1번째 사과</li>   <li>2번째 배</li>   <li>3번째 오렌지</li>   <li>4번째 바나나</li>   <li>5번째 복숭아</li> <ul>

 

조건문은 {% if 변수 %} {% elif %} {% endif %}로 이루어져 있다.

넌적스	HTML
{% if isLoggedIn %} <div>로그인 되었습니다.</div> {% else %} <div>로그인이 필요합니다.<div> {% endif %}	<!-- isLoggedIn이 true일 때 --> <div>로그인 되었습니다.</div> <!-- isLoggedIn이 false일 때 --> <div>로그인이 필요합니다.</div>

 

case문 없지만 elif(else if 역할)를 통해 분기 처리할 수 있다.

넌적스	HTML
{% if fruit === 'apple' %} <p>사과입니다.</p> {% elif fruit === 'banana' %} <p>바나나입니다.</p> {% elif fruit === 'banana' %} <p>오렌지입니다.</p> {% else %} <p>사과도 바나나도 오렌지도 아닙니다.</p> {% endif %}	<!-- fruit가 apple일 때 --> <p>사과입니다.</p> <!-- fruit가 banana일 때 --> <p>바나나입니다.</p> <!-- fruit가 orange일 때 --> <p>오렌지입니다.</p> <!-- 기본값 --> <p>사과도 바나나도 오렌지도 아닙니다.</p>