푸키키키

개요

보통 자주 사용하는 body-parser나 morgan등 예제 코드를 통해

app.use( ... ) 

...에 적용할 미들웨어를 넣으면 이렇게 body-parser나 morgan 같은 라이브러리가 적용되는 마법같은 것으로 알고 있었다. 이번에 공부를 해서 마법이 아니라 기술로 만들어 보고자 한다.
(모르면 마법, 알면 기술 - 이고잉)

미들웨어의 매우 간단한 의미

만약 만든 서버에서 접속을 하면 반드시 A기능과 B기능을 실행해야 한다고 가정하자.

미들웨어를 사용하지 않으면

app.get('/', (req, res) => {
  console.log("A 기능 실행");
  console.log("B 기능 실행");
  console.log("다음 동작");
})

app.get('/hello', (req, res) => {
  console.log("A 기능 실행");
  console.log("B 기능 실행");
  console.log("다음 동작 hello");
})

...

모든 라우터마다 위와 같이 A기능과 B기능을 실행하는 코드를 위에 적어줘야 한다.

미들웨어를 사용하면

app.use((req, res, next) => {
  console.log("A 기능 실행");
  next();
})

app.use((req, res, next) => {
  console.log("B 기능 실행");
  next();
})

app.get('/', (req, res) => {
  console.log("다음 동작");
})

app.get('/hello', (req, res) => {
  console.log("다음 동작 hello");
})

위와 같이 app.use를 통해 app.get ... 라우터 실행 전에 수행해야할 동작을 미리 지정해 두어 훨씬 깔끔하게 코드 작성이 가능해진다.

좀 더 구체적인 미들웨어

참고 : https://expressjs.com/en/guide/using-middleware.html

미들웨어는 총 5가지 타입으로 나뉜다.

• Application-level middleware
• Router-level middleware
• Error-handling middleware
• Built-in middleware
• Third-party middleware

폴더 구조

node.js의 웹 프레임워크인 Express를 Express답게 쓰기 위해 조사했다. Express Reference에서는 Express generator를 사용해서 빠르게 앱 스켈레톤을 구성할 수 있게 해준다. 위의 사진은 Express generator를 통해 생성한 스켈레톤 앱의 구조이다.

npm install -g express-generator

명령어를 통해 설치한 후

express —view=pug myapp (pug는 템플릿 엔진. ejs를 사용할 수도 있다)

를 통해 스켈레톤 앱을 생성한다.

빌드

빌드는 npm start 명령어를 통해 빌드한다.
package.json파일의 "script"키 값으로 "start" 명령시 빌드 명령어가 앱 생성과정에서 함께 들어가있다.

"scripts": {
  "start": "node ./bin/www"
},

bin폴더

// bin/www
const app = require('../app');
const http = require('http');
const port = 3000;
app.set('port', port);

const server = http.createServer(app);
server.listen(port);

www파일을 요약하면 위와 같다. 서버가 실행되는 코드가 들어있다.

app.js

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

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

app.set('view engine', 'pug');
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(express.static(path.join(__dirname, 'public')));

module.exports = app;

app.js파일을 요약하면 위와 같다. 미들웨어들을 연결하고 exports해서 www에서 실행시킬 수 있도록 한다.

routes폴더

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

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

module.exports = router;

routes폴더 내에 있는 파일들을 요약하면 위와 같다. 해당하는 URL이 들어올 때 처리할 동작을 기술할 수 있다. res.render('index', ... ) 에서 index는 views폴더 내의 index.pug파일을 의미한다.

views폴더

//index.pug
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= title
    p Welcome to #{title}

views폴더 내에 있는 파일을 요약하면 위와 같다. 보여질 html파일을 기술한다. 이번엔 템플릿 엔진으로 pug를 사용해서 pug파일이 있고 ejs를 사용할 수도 있다.

public폴더

public폴더에는 정적인 파일을 두고 가져다 쓸 수 있는 폴더이다. app.js 파일에 app.use(express.static(path.join(__dirname, 'public')));
코드를 통해서 정적인 파일을 가져다 쓸 수 있도록 해두어서 사용 가능하다.