[노드 2팀] #7. 익스프레스 웹 서버 만들기

 

🌟키워드: 익스프레스, 미들웨어, 라우팅 분리, rep와 res 객체, 템플릿 엔진

 

---

1. 익스프레스 프로젝트 시작하기

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

 

1. pakage.json 생성

① learn-express 폴더를 만든다.

② 항상 package.json을 제일 먼저 생성한다.

- npm init 명령어로 단계적으로 내용물을 입력하거나

- npm init -y를 입력해 파일을 만든 뒤 내용을 수정한다.

③ versoin, descripition, author, license는 자유로이 수정한다.

 

package.json

{
	"name": "learn-express",
    "version":"0.0.1",
    "description":"익스프레스를 배우자",
    "main":"app.js",
    "scripts":{
    	"start":"nodemon app" //app.js를 nodemon으로 실행
    },
    author: "ZeroCho",
    "license": "MIT"
}

 

콘솔

$ npm i express
$ npm i -D nodemon

 

- script의 start는 꼭 넣어야 한다.

- nodemon 모듈: 서버를 자동으로 재시작

 → nodemon이 서버를 자동으로 재시작+실행되는 콘솔에 rs를 입력해 수동으로 재시작 가능

- nodemon은 개발용으로만 사용 권장

 

2. app.js 생성

app.js

const express = require('express');

const app = express(); //Express 모듈을 실행해 app 변수에 할당 
app.set('port', process.env.PORT || 3000); // 서버로 실행될 포트를 설정

app.get('/', (req, res) => { //GET 요청시 어떤 동작을 할지
  res.send('Hello, Express');
});

app.listen(app.get('port'), () => { //http 웹 서버와 동일, 포트 연결 후 서버 실행
  console.log(app.get('port'), '번 포트에서 대기 중'); // app.get('port')로 포트를 가져옴
});

① Express 모듈을 실행해 app 변수에 할당

- Express 내부에 http 모듈이 내장되어 있다. → 서버의 역할  수행 가능

 

② app.set('port', 포트): 서버가 실행될 포트 설정

-  process.env 객체에 PORT 속성이 있다면 그 값을, 없다면 기본 3000 포트 이용

 

③ app.get(주소, 라우터)

-  GET 요청 시 어떤 동작을 할지

-  req=요청에 대한 정보가 들어있는 객체, res=응답에 관한 정보가 들어있는 객체

- GET 요청 외에도 POST, PUT, PATCH, DELETE, OPTIONS에 대한 라우터를 위한 메서드가 존재한다.

 

④ listen을 하는 부분은 http 웹 서버와 동일

 

콘솔

$ npm start

> learn-express@0.0.1 start
> nodemon app

[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node app.js`
3000 번 포트에서 대기 중

 

→ http://localhost:3000으로 접속하면 다음과 같은 페이지가 표시된다.

 

※ HTML로 응답하고 싶다면 파일의 경로를 path 모듈을 사용해 지정한 뒤 res.senFile 메서드를 사용한다.

 

2. 자주 사용하는 미들웨어

- 미들웨어(middleware): 요청과 응답의 중간에 위치하는 익스프레스의 핵심

- 미들웨어는 위에서부터 아래로 순서대로 실행된다.

- 미들웨어는 요청과 응답을 조작해 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다.

 

1. 익스프레스 서버에 미들웨어 연결 

app.js

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

app.use((req, res, next) => { //app.use(미들웨어) 꼴로 사용
  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'), () => {
...

 

① app.use(미들웨어) 꼴로 사용

- app.use에 매개변수가 req, res, next인 함수를 넣는다.

- next를 실행하지 않으면 다음 미들웨어가 실행되지 않는다.

- 주소를 첫 번째 인수로 넣지 않는다면 모든 요청에서 실행된다.

 

② 에러 처리 미들웨어

- 에러 처리 미들웨어는 err, req, res, next로 네 개의 매개변수를 갖는다.

- 모든 매개변수를 사용하지 않더라도 매개변수가 반드시 네 개여야 한다.

- res.status로 HTTP 상태 코드를 지정, 기본값은 200 (성공)

- 에러 처리 미들웨어를 직접 연결하지 않아도 익스프레스가 기본적으로 에러를 처리하지만, 실무에서는 직접 연결해 주는 것이 좋다.

 

2. 실무에서 많이 쓰이는 패키지 설치

콘솔

$ npm i morgan cookie-parser express-session dotenv

 

app.js

const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');

dotenv.config();
const app = express();
app.set('port', process.env.PORT || 3000);

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
  name: 'session-cookie',
}));
app.use((req, res, next) => {
  console.log('모든 요청에 다 실행됩니다.');
  next();
});
...

.env

COOKIE_SECRET=cookiesecret

 

자세한 내용은 책 참조...

 

3. 각각의 미들웨어 살펴보기

① morgan: 연결 후 localhost:3000에 다시 접속하면 추가적인 로그를 볼 수 있다.

app.use(morgan('dev' | 'combined' | 'short' | 'tiny')); // 괄호 속 하나의 요소만 작성

 

② static: 정적인 파일을 제공하는 라우터 역할을 한다.

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

 

③ body-parser: 요청의 본문에 있는 데이터를 해석해 req.body 객체로 만들어준다.

app.use(express.json());

app.use(express.urlenconded({extended: false}));

 

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

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

 

⑤ express-session: 세션관리용 미들웨어, 세션 구현이나 데이터를 임시저장할 때 유용하다.

 

⑥ 미들웨어의 특성 활용하기

(1) rep, res, next를 매개변수로 갖는 함수로 app.use, app.post등으로 장착한다. 

(2) 특정 주소의 요청에만 실행되게 하려면 첫 번째 인수로 주소를 넣는다. 

(3) 여러 개의 미들웨어를 장착할 수 있고, 다음 미들웨어로 넘어가려면 next 함수를 호출해야 한다.

 

※ 미들웨어 장착 순서에 따라 어떤 미들웨어는 실행되지 않을 수도 있다.

※ next(err)를 통해 라우터에서 에러가 발생할 때 에러 처리 미들웨어로 넘긴다. 

 

⑦ 미들웨어 사용 시 유용한 패턴: 미들웨어 안에 미들웨어 넣기

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

- 기존 미들웨어의 기능을 확장할 수 있다. (ex) 분기 처리

 

⑧ multer: 이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드 시 사용하는 미들웨어

const multer = require('multer');

const upload = multer({
  storage: multer.diskStorage({ //storage: 어디에(destination), 어떤 이름으로(filename) 저장할지
    destination(req, file, done) { //req: 요청에 대한 정보, file: 업로드한 파일의 정보, done: 함수
      done(null, 'uploads/'); 
    },
    filename(req, file, done) { //req: 요청에 대한 정보, file: 업로드한 파일의 정보, done: 함수
      const ext = path.extname(file.originalname);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext); //Date.now(): 파일명의 중복 방지
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 }, //업로드에 대한 제한 사항 설정: fileSize는 5MB
});

- uploads 폴더가 서버에 꼭 존재해야 한다. 

- upload 변수가 생긴 뒤, 다양한 종류의 미들웨어를 사용한다.

• single 미들웨어: 하나의 파일만 업로드하는 경우

• array 미들웨어: 여러 파일을 업로드하는 경우

• fileds 미들웨어: 여러 파일을 업로드하지만, input 태그나 폼 데이터의 키가 다른 경우

• none 미들웨어: 파일을 업로드하지 않고도 멀티파트 형식으로 업로드하는 경우

 

 

3. Router 객체로 라우팅 분리하기

- 라우터를 많이 연결하면 app.js 코드가 매우 길어진다.

→ 익스프레스에서 라우터를 분리하는 방법을 제공한다.

 

1. app.use로 연결하기

- routes 폴더를 만들고 그 안에 index.js와 user.js를 작성한다.

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');
});

module.exports = router;

 

- app.use를 이용해 index.js와 user.js를 app.js에 연결한다.

app.js

...
const path = require('path');

dotenv.config();
const indexRouter = require('./routes'); //index.js는 생략 가능 
const userRouter = require('./routes/user'); //user.js는 다른 주소의 라우터 역할 
...
  name: 'session-cookie',
}));

app.use('/', indexRouter); //index.js 연결
app.use('/user', userRouter); //user.js 연결

app.use((req, res, next) => {
  res.status(404).send('Not Found');
}); //에러 처리 미들웨어 위에 404 상태 코드를 응답하는 미들웨어 추가

app.use((err, req, res, next) => { //에러 처리 미들웨어
...

 

2. next('route')

- next('route'): 라우터에 연결된 나머지 미들웨어들을 건너뛰고 싶을 때 사용한다.

router.get('/', (req, res, next) => {
  next('route'); // 두, 세번째 미들웨어는 실행하지 않고, 주소와 일치하는 다음 라우터로 이동
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  next();
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  next();
});
router.get('/', (req, res) => {
  console.log('실행됩니다');
  res.send('Hello, Express');
});

- 여러 개의 라우터가 있어도 next()를 호출하면 다음 미들웨어가 실행된다. 

 

3. 라우트 매개변수 패턴

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

★ 다양한 라우터를 아우르는 와일드카드 역할을 하므로 일반 라우터보다 뒤에 위치해야 한다.

- 주소에 쿼리스트링을 쓰는 경우도 있다. (쿼리스트링의 키-값 정보는 req.query 객체 안에 저장된다.)

 

 

4. req, res 객체 살펴보기

- 익스프레스의 req, res 객체는 http 모듈의 req, res 객체를 확장한 것

→ http 모듈의 메서드와 익스프레스가 추가한 메서드나 속성을 사용할 수 있다.

 

- 자주 쓰이는 rep 객체의 메서드 

• req.app: req 객체를 통해 app 객체에 접근할 수 있다. req.app.get('port')와 같이 사용할 수 있다.

• req.body: body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체이다.

• req.cookies: cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체이다.

• req.ip: 요청의 ip 주소가 담겨 있다.

• req.params: 라우트 매개변수에 대한 정보가 담긴 객체이다.

• req.query: 쿼리스트링에 대한 정보가 담긴 객체이다.

• req.signedCookies: 서명된 쿠키들은 req.cookies 대신 여기에 담겨있다.

• req.get(헤더 이름): 헤더의 값을 가져오고 싶을 때 사용하는 메서드이다.

 

- 자주 쓰이는 res 객체의 메서드 

• res.app: res 객체를 통해 app 객체에 접근할 수 있다.

• res.cookie(키, 값, 옵션): 쿠키를 설정하는 메서드이다.

• res.clearCookie(키, 값, 옵션): 쿠키를 제거하는 메서드이다.

• res.end(): 데이터 없이 응답을 보낸다.

• res.json(JSON): JSON 형식의 응답을 보낸다.

• res.locals: 하나의 요청 안에서 미들웨어 간에 데이터를 전달하고 싶을 때 사용하는 객체이다.

• res.redirect(주소): 리다이렉트 할 주소와 함께 응답을 보낸다.

• res.render(뷰, 데이터): 다음 절에서 다룰 템플릿 엔진을 렌더링 해서 응답할 때 사용하는 메서드이다.

• res.send(데이터): 데이터와 함께 응답을 보냅니다. 데이터는 문자열일 수도, HTML일 수도, 버퍼일 수도, 객체나 배열일 수도 있다.

• res.sendFile(경로): 경로에 위치한 파일을 응답한다.

• res.set(헤더, 값): 응답의 헤더를 설정한다.

• res.status(코드): 응답 시의 HTTP 상태 코드를 지정한다.

5. 템플릿 엔진 사용하기

- 템플릿 엔진: 자바스크립트를 사용해 HTML을 간단하게 처리해 렌더링 할 수 있게 한다.

 

1. 퍼그(제이드)

① HTML과 퍼그의 차이점

- 화살괄호(<>) 와 닫는 태그가 없다.

- 탭 또는 스페이스로만 태그의 부모 자식 관계를 규명한다.

- 태그명 뒤에 소괄호로 묶어 적는다.

- div 문자는 생략 가능하다.

- HTML 텍스트는 태그 또는 속성 뒤에 한 칸을 띄고 입력한다.

- 여러 줄의 텍스트 입력 시 파이프 (|)를 넣는다.

- style, script 태그는 태그 뒤에 점(.)을 붙인다. 

퍼그	HTML
doctype html html     head         title=title;         link(rel='stylesheet', href='/stylesheets/style.css')	<!DOCTYPE html> <html>     <head>         <title>익스프레스</title>         <link rel="stylesheet" href="/style.css" />     </head> </html>
#login-button .post-image	<div id="logint-button"></div> <div class="post-image"></div>
p Welcome to Express p    | 안녕하세요   | 여러 줄을 입력합니다   br   | 태그도 중간에 넣을 수 있습니다	<p> Welcome to Express </p> <p>   안녕하세요. 여러 줄을 입력합니다.   <br />   태그도 중간에 넣을 수 있습니다.  </p>
style.   h1{...} script.  ...	<style>   h1{...} </style> <script>   ... </script>

 

 

② 변수

- HTML과 다르게 자바스크립트 변수를 템플릿에 렌더링할 수 있다.

- res.render(템플릿, 변수 객체): 익스프레스가 res 객체에 추가한 템플릿 렌더링을 위한 메서드

router.get('/', (req, res, next) => {
  res.locals.title = 'Express';
  res.render('index');
});

- res.render의 변수 객체에 res.locals 객체를 사용한 변수를 넣으면 다른 미들웨어에서도 객체에 접근할 수 있다.

→ 다른 미들웨어에서 템플릿 엔진용 변수를 미리 넣을 수 있다.

 

- 텍스트 중간에 변수를 넣으려면 #{변수}를 사용한다.

- 퍼그는 기본적으로 특수문자를 HTML 엔티티로 이스케이프 하므로, 이스케이프를 원하지 않으면 !=을 사용한다.

 

③ 반복문

- 반복문을 사용할 수 있고, each와 for로 반복문을 돌릴 수 있다.

 

④ 조건문

- 조건문으로 분기처리를 할 수 있고, if, else if, else와 case문을 사용할 수 있다.

 

⑤ include

- 다른 퍼그나 HTML 파일을 넣을 수 있다.

- 웹 제작 시 공통되는 부분을 따로 관리할 수 있어 페이지마다 동일한 HTML을 넣어야 하는 번거로움을 없앤다.

- include 파일 경로와 같은 형태로 사용한다. 

 

⑥ extends와 block

- 레이아웃을 정할 수 있고, 공통되는 레이아웃 부분을 따로 관리할 수 있다.

- block으로 페이지마다 달라지는 부분을 비워둔다. 

 

2. 넌적스

- HTML 문법을 그대로 사용하되, 추가로 자바스크립트 문법을 사용할 수 있다. 

 

① 변수

- 변수는 { { } }로 감싼다. (ex) { {title} }

- 내부에 변수를 사용하려면 { %set 변수= '값' %}을 사용한다

- 이스케이프 하고 싶지 않다면 { {변수| safe} }를 사용한다. 

 

② 반복문

- 특수한 문을 {% %} 안에 쓰므로 반복문도 이 안에 쓴다.

- for in문과 endfor 사이에 위치한다.

...
{% for item in fruits %}
<li>{{item}}</li>
{%endfor}
...

- loop.index라는 특수한 변수로 인덱스를 사용할 수 있다.

...
{% for item in fruits %}
<li>{{loop.index}}번째 {{item}}</li>
{%endfor}
...

 

③ 조건문

- {% if 변수 %} {% elif %} {% else %} {% endif %}로 이뤄져 있다.

- case문은 없지만 elif를 통해 분기 처리가 가능하다.

- { { } } 안에서는 다음과 같이 사용한다.

<div>{{'참' if isLoggedIn}}</div>
<div>{{'참' if isLoggedIn else '거짓'}}</div>

 

④ include

- 다른 퍼그나 HTML 파일을 넣을 수 있다.

- 웹 제작 시 공통되는 부분을 따로 관리할 수 있어 페이지마다 동일한 HTML을 넣어야 하는 번거로움을 없앤다.

- include 파일 경로와 같은 형태로 사용한다. 

 

⑤ extends와 block

- 레이아웃을 정할 수 있고, 공통되는 레이아웃 부분을 따로 관리할 수 있다.

- block으로 페이지마다 달라지는 부분을 비워둔다. 

- {% block [블록명] %}으로 선언한다.

- {% endblock %}로 블록을 종료한다. 

 

3. 에러 처리 미들웨어

app.js

...
app.use((req, res, next) => {
  const error =  new Error(`${req.method} ${req.url} 라우터가 없습니다.`); 
  error.status = 404;
  next(error);
});

app.use((err, req, res, next) => {
  res.locals.message = err.message; 
  //404 에러 발생 시 res.locals.message는 '${req.method} ${req.url} 라우터가 없습니다'가 된다.
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});
...

 

- error 객체의 스택 트레이스는 시스템 환경이 배포환경(production)이 아닌 경우 표시되고, 배포 환경인 경우 에러메시지만 표시된다.

- 스택 트레이스를 통해 서버 폴더 구조를 유추할 수 있으므로 배포 환경에서는 숨긴다.

 

6. 함께 보면 좋은 자료

• Express 공식 홈페이지: http://expressjs.com

• 퍼그 공식 홈페이지: https://pugjs.org

• 넌적스 공식 홈페이지: https://mozilla.github.io/nunjucks

• morgan: https://github.com/expressjs/morgan

• body-parser: https://github.com/expressjs/body-parser

• cookie-parser: https://github.com/expressjs/cookie-parser

• static: https://github.com/expressjs/serve-static

• express-session: https://github.com/expressjs/session

• multer: https://github.com/expressjs/multer

• dotenv: https://github.com/motdotla/dotenv

 

 

---

quiz

1. http 모듈의 요청과 응답 객체에 추가 기능을 부여한 것은 (     )라 한다.  

2. 요청과 응답의 중간에 위치하는 익스프레스의 핵심을 (    )라 한다.

3. 에러 처리 미들웨어는 (    ), (    ), (    ), (    )로 네 개의 매개변수를 갖는다.

4. 라우터에 연결된 나머지 미들웨어를 건너뛰고 싶다면 (      )를 사용한다.

5. 익스프레스의 res, req 객체는 (     )모듈의 req, res 객체를 확장한 것이다.  

6. (      )을 이용하면 자바스크립트를 사용해 HTML을 간단히 처리해 렌더링할 수 있다.

7. 에러 처리 미들웨어에서 스택 트레이스는 시스템 환경이 (      )이 아닌 경우 표시된다.

programming quiz

8. 다음은 익스프레스 모듈을 이용해 서버를 구축하는 코드이다. 빈칸을 채우시오.

const express = require('________'); // 1. Express 모듈을 불러오기

const app = _________; // 2. Express 모듈을 실행해 app 변수에 할당
app.set('port', process.env.______ || 3000); // 3. 서버가 실행될 포트를 설정

app.______('/', (req, res) => { // 4. GET 요청 시 수행할 동작 정의
  ________________ // 5. 응답으로 'Hello, Express' 메시지 전송
});

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

 

9.

router.____('/', (req, res, next) => { //1. 적절한 메서드 추가
  next('______'); // 2. 두 번째와 세 번째 미들웨어를 건너뛰고, 주소와 일치하는 다음 라우터로 이동
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  ________; // 3. 다음 미들웨어로 이동
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  ________; // 4. 다음 미들웨어로 이동
});

router.____('/', (req, res) => { //5. 적절한 메서드 추가
  console.log('실행됩니다'); // 
  _________________; // 6. 클라이언트에게 응답으로 'Hello, Express' 메시지 전송
});

 

 

---

Answer

1. 익스프레스

2. 미들웨어

3. err, req, res, next

4. next('route')

5. http

6. 템플릿 엔진

7. 배포 환경 (production)

8.

const express = require('express'); // 1. Express 모듈을 불러오기

const app = express(); // 2. Express 모듈을 실행해 app 변수에 할당
app.set('port', process.env.PORT || 3000); // 3. 서버가 실행될 포트를 설정

app.get('/', (req, res) => { // 4. GET 요청 시 수행할 동작 정의
  res.send('Hello, Express'); // 5. 응답으로 'Hello, Express' 메시지 전송
});

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

9.

router.get('/', (req, res, next) => {
  next('route');
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  next();
}, (req, res, next) => {
  console.log('실행되지 않습니다');
  next();
});

router.get('/', (req, res) => {
  console.log('실행됩니다');
  res.send('Hello, Express');
});

 

 

 

출처) 조현정, 「Node.js 교과서 개정 3판」, 길벗(2022), 6장

 

Corner node.js 2팀

Editor : Sullivan