๐ŸŒณ๋ชฉํ‘œ

์š”์ฒญ์ด ์˜ค๋”๋ผ๋„ ์„œ๋ฒ„์˜ ํ„ฐ๋ฏธ๋„์—๋Š” ์•„๋ฌด๋Ÿฐ ์ •๋ณด๋„ ๋‚จ์•„ ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์„œ๋ฒ„ ๋กœ๊ทธ๋ฅผ ๊ธฐ๋กํ•˜๋Š” ๋ฏธ๋“ค์›จ์–ด์ธ logger๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ต์Šคํ”„๋ ˆ์ŠคJS ์ง„์˜์˜ morgan๊ณผ ์œ ์‚ฌํ•œ ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.

๐Ÿค์‹ค์Šต - Logger ๋ฏธ๋“ค์›จ์–ด๋ฅผ ๊ตฌํ˜„ํ•ด ๋ณด์„ธ์š”

๋งค ์š”์ฒญ๋งˆ๋‹ค ๋ฉ”์†Œ๋“œ๋ช…๊ณผ URL์„ ํ„ฐ๋ฏธ๋„์— ์ฐ์–ด ๋ณด์„ธ์š”.

๋จผ์ € ์ง€๋‚œ ์‹œ๊ฐ„๊นŒ์ง€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

$ git checkout -f module/logger-spec

ํžŒํŠธ: req ๊ฐ์ฒด๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”

๐Ÿคํ’€์ด

middlewares/logger.js ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.

const logger = () => (req, res, next) => {
  const log = `${req.method} ${req.url}`
  console.log(log)
  next()
}

module.exports = logger

logger๋„ ์š”์ฒญ์—์„œ ์‘๋‹ต ์‚ฌ์ด์— ์‹คํ–‰๋˜๋Š” ๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜์ด๋ฏ€๋กœ (req, res, next) ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งž์ถ”์—ˆ์Šต๋‹ˆ๋‹ค. ๋กœ๊ทธ ๋ฉ”์„ธ์ง€๋ฅผ ๋ฉ”์†Œ๋“œ๋ช…(req.method)๊ณผ URL(req.url)์„ ํ•ฉ์ณ์„œ ์ถœ๋ ฅํ–ˆ๊ณ ์š”.

๋ฏธ๋“ค์›จ์–ด ํ•จ์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ ๋ฏธ๋“ค์›จ์–ด ํ˜ธ์ถœ์„ ์œ„ํ•ด next() ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ app.js์—์„œ ์‚ฌ์šฉํ•ด์•ผ๊ฒ ์ง€์š”.

// ...
const logger = require('./middlewares/logger');

app.use(logger()) // ๋กœ๊ทธ ๋ฏธ๋“ค์›จ์–ด ์ถ”๊ฐ€
app.use(serveStatic())
// ...

๋ฏธ๋“ค์›จ์–ด ๋“ฑ๋กํ•จ์ˆ˜์ธ use() ๋ฉ”์†Œ๋“œ๋กœ logger๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„๋ฅผ ๊ตฌ๋™ํ•˜๊ณ  ์š”์ฒญ์„ ๋ณด๋‚ด๋ณผ๊นŒ์š”?

$ npm start
GET /
GET /css/style.css
GET /js/script.js
GET /imgs/twitter.png
GET /favicon.ico

๋ธŒ๋ผ์šฐ์ ธ์—์„œ index.html์„ ์š”์ฒญํ•œ๋’ค ์ˆœ์ฐจ์ ์œผ๋กœ ์ •์  ํŒŒ์ผ ์š”์ฒญ ๋‚ด์šฉ์ด ๋กœ๊ทธ๋กœ ์ฐํ˜€ ๋‚˜์˜ต๋‹ˆ๋‹ค.

๐Ÿค์‹ค์Šต - ๋ฉ”์†Œ๋“œ๋ช…์— ์ƒ‰์ƒ๋„ ์ถ”๊ฐ€ํ•ด ๋ณด์„ธ์š”

ํžŒํŠธ: debug๋ชจ๋“ˆ ์ฐธ๊ณ 

๐Ÿค ํ’€์ด

debug ๋ชจ๋“ˆ์—์„œ ์ƒ‰์ƒ ์ถœ๋ ฅ์„ ์œ„ํ•ด ์ƒ์‚ญ ๊ฐ’์„ ์‚ฌ์šฉํ–ˆ์ง€์š”? ์ด๋ฒˆ์—๋„ ๋น„์Šทํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์„ธ ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋ˆ ์„œ ํ’€์–ด๋ณผ๊ฒŒ์š”.

const colors = {
  green: '\x1b[32m',
  cyan: '\x1b[36m',
  red: '\x1b[31m',
  yellow: '\x1b[33m',
  reset: '\x1b[0m',
}

์‚ฌ์šฉํ•  ์ปฌ๋Ÿฌ ๊ฐ’์„ ๋งต์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

const methodColorMap = {
  get: colors.green,
  post: colors.cyan,
  put: colors.yellow,
  delete: colors.red
}

๋ฉ”์†Œ๋“œ ์ด๋ฆ„์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ์ƒ‰์ƒ์„ ๋งตํ•‘ํ•˜์—ฌ methodColorMap์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

const logger = () => (req, res, next) => {
  const coloredMethod = (method = '') => {
    return `${methodColorMap[method.toLowerCase()]}${method}${colors.reset}`
  } 

  const log = `${coloredMethod(req.method)} ${req.url}`
  console.log(log);
  next();
}

์ƒ‰์ƒ ์ฝ”๋“œ์™€ ๋ฉ”์†Œ๋“œ ๋ช…์„ ์กฐํ•ฉํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” coloredMethod() ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ์ด์šฉํ•ด ๋ฉ”์†Œ๋“œ ์ด๋ฆ„๋งŒ ์ƒ‰์ƒ์„ ์ค˜์„œ ์ถœ๋ ฅํ•˜๋„๋ก ํ•œ ๊ฒƒ์ด์ฃ .

๊ทธ๋Ÿผ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•ด ๋ณผ๊นŒ์š”?

logger๋Š” ์šฐ์ธก ํ•˜๋‹จ์˜ ์จ๋“œ ํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋ถ„๋ฅ˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ •๋ฆฌ

  • ์š”์ฒญ ์ •๋ณด๋ฅผ ๋กœ๊น…ํ•˜๋Š” logger ๋ฏธ๋“ค์›จ์–ด๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๋ชฉ์ฐจ ๋ฐ”๋กœ๊ฐ€๊ธฐ