ChatterBox - Local Server ๋งŒ๋“ค๊ธฐ

๐Ÿง™๐Ÿปโ€โ™€๏ธChatterbox - ๋กœ์ปฌ ์„œ๋ฒ„ ๋งŒ๋“ค๊ธฐ ๊ณผ์ •

im-sprint-chatterbox-server git fork ๋ฐ git clone

ํ•ด๋‹น ๋””๋ ‰ํ† ๋ฆฌ code . ๋กœ ์—ด๊ณ  npm install ์ง„ํ–‰ํ•˜๊ธฐ

package.json ๋‚ด์šฉ์„ ์ˆ˜์ •

๋จผ์ € nodemon ์„ ์„ค์น˜ํ•ด์•ผ ํ•œ๋‹ค.

npm install --save nodemon

(-g ๋กœ ๊ธ€๋กœ๋ฒŒ ์„ค์น˜๋Š” ์•ˆํ•ด๋ดค๋Š”๋ฐ.. โ€”save ๋ฅผ ํ†ตํ•ด package.json ์˜ dependencies ์— ์„ค์น˜ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค. ๋™๋ฃŒ์™€์˜ ๋ถˆํ™”๋ฅผ ์˜ˆ๋ฐฉ..)

"scripts": {
  "start": "nodemon server/basic-server.js",
  "test": "jest",
  "submit": "node .travis/submit.js"
},

npm start ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์–ด๋–ค ๋‚ด์šฉ์„ ์‹คํ–‰ํ•˜๊ฒŒ ํ•  ๊ฑด์ง€ ์ง€์ •ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

node server/basic-server.js ๋ฅผ ํ†ตํ•ด์„œ๋„ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ์ด ๊ฒฝ์šฐ์—๋Š” ๋ณ€๋™์‚ฌํ•ญ์ด ์ ์šฉ๋˜์—ˆ์„ ๋•Œ ๋Œ€์‘์„ ์œ„ํ•ด์„œ๋Š” ๋งค๋ฒˆ ์„œ๋ฒ„ ์‹คํ–‰์„ ๊ป๋‹ค๊ฐ€ ๋‹ค์‹œ ์ผœ์•ผ ํ•˜๋Š” ๋ถˆํŽธํ•จ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค.

๐Ÿˆbasic-server.js ๋„Œ ๋Œ€์ฒด ๋ญ๋ƒฅ

์ด์ œ npm start ๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ์ง€๋งŒ ๋ญ”๊ฐ€ ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค.

์ด๋Š” basic-server.js ๋‚ด์—์„œ requestHandler ๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ง€ ๋ชปํ•ด์„œ ์ธ๋ฐ,

๊ธฐ์กด ํŒŒ์ผ์—์„œ ํ•œ ๋‘๋ฒˆ์งธ ์ค„์—๋‹ค๊ฐ€ requestHandler.js ํŒŒ์ผ์„ (๋ชจ๋“ˆ์„) ๋ถˆ๋Ÿฌ์˜ค๊ฒŒ ํ•˜์˜€๋‹ค.

// ๋์— ํŒŒ์ผ ํ™•์žฅ์ž js ๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•˜๋‹ค.
const requestHandler = require('./request-handler')

์•„ ํŒŒ์ผ ์ž์ฒด ์ฝ”๋“œ๋ฅผ ๋‹ค ๊ฐ€์ ธ์™€ ๋ณด์ž. (์ด๋Ÿฌ๋ฉด ๋‚˜์ค‘์— ๋‹ค ๊นŒ๋จน์–ด..)

const http = require('http') // Node.js ์˜ Http ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ถˆ๋Ÿฌ์™”๋‹ค.
const requestHandler = require('./request-handler')

const port = 3000 // Port (์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ฐ›๊ธฐ ์œ„ํ•œ ์•„ํŒŒํŠธ ํ˜ธ์ˆ˜ ์„ค์ •)
const ip = '127.0.0.1' // Local basic ip address
// const ip = "localhost";

const server = http.createServer(requestHandler)
// http.createServer ๋กœ ์ƒ์„ฑ๋œ ์„œ๋ฒ„๋Š” ๋ชจ๋“  incoming requests๋ฅผ ์ฒ˜๋ฆฌํ•  ๊ฒƒ์ด๋‹ค.
console.log('Listening on http://' + ip + ':' + port)
server.listen(port, ip) // node ์„œ๋ฒ„๊ฐ€ ๊ณ„์†ํ•ด์„œ ๋Œ๋„๋ก ํ”„๋กœ์„ธ์Šค๋ฅผ ์œ ์ง€ํ•œ๋‹ค.

module.exports = server

Full IM 00 200JH 8:27 PM

module.exports๋Š” ๋‹ค๋ฅธํŒŒ์ผ์—์„œ ํ•ด๋‹น ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•˜๊ธฐ์œ„ํ•œ ์ค€๋น„๋‹จ๊ณ„?๊ฐ™์€๊ฑฐ๋ผ ์“ด๊ฑฐ์ฃ . ์ •ํ™•ํžˆ ์–ด๋”˜์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‹ค๋ฅธํŒŒ์ผ์—์„œ server๋ชจ๋“ˆ์„ require()๋ฅผ ์จ์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์ด ์žˆ๊ฒ ์ฃ ?

Full IM 00 XXX 8:27 PM

์•„์•„ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ใ… ใ… 

Full IM 00 200JH 8:27 PM

requestHandler๋„ ๋™์ผํ•˜๊ฒŒ ์“ฐ์…จ์œผ๋‹ˆ ์ดํ•ดํ•˜์…จ์„๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹น

Full IM 00 XXX 8:27 PM

๊ทธ๋Ÿผ ์ € server ๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ๋‹ค๋ฅธ ํŒŒ์ผ์—์„œ ์“ธ์ˆ˜ ์ž‡๋‹ค๋Š” ์˜๋ฏธ์ธ๊ฑฐ๊ฐ™์•„์š”:)

๐Ÿ‘ฉ๐Ÿฟโ€๐Ÿฆฐrequest-handler.js ์ž‘์„ฑํ•˜๊ธฐ

basic-server.js ๋‚ด์—์„œ requestHandler ๋ผ๋Š” ์™ธ๋ถ€ ํŒŒ์ผ์˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ๊ทธ ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์„ ๋ฐ”๋กœ

request-handler.js ํŒŒ์ผ์—์„œ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด์˜€๋‹ค.

reuqestHandler ํ•จ์ˆ˜๋Š” ์ด๋ฏธ basic-server.js ํŒŒ์ผ์—์„œ ์‚ฌ์šฉ ํ–ˆ์ง€๋งŒ, ์•„์ง ์ž‘๋™ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—

requestHandler ํ•จ์ˆ˜๋ฅผ export ํ•˜์—ฌ basic-server.js ์—์„œ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์•ผ ํ•œ๋‹ค.

module.exports = requestHandler

request-handler.js ํŒŒ์ผ ๋งจ ์•„๋ž˜์— ์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด ์ฃผ์—ˆ๋‹ค.

๊ทผ๋ฐ ๋ญ ์–ด๋–ป๊ฒŒ ํ•˜๋ผ๊ตฌ.. ใ… ใ… ์—‰์—‰..๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ๐Ÿ˜ญ

๐Ÿ‘ฉ๐Ÿฟโ€๐Ÿฆฐrequest, response, ๊ทธ๋ฆฌ๊ณ  GET

const requestHandler = function(request, response) {
  // node server ์˜ requestHandler๋Š” ํ•ญ์ƒ request, response๋ฅผ ์ธ์ž๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค.
  // ๋˜ํ•œ http ์š”์ฒญ์€ ํ•ญ์ƒ ์š”์ฒญ๊ณผ ์‘๋‹ต์ด ๋™๋ฐ˜ ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  // ์ด๊ฒƒ๋“ค์€ ์š”์ฒญ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค๋ฉด, ์š”์ฒญ url๊ณผ method ๋“ฑ์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  // ์•„๋ž˜๋Š” ๋ชจ๋“  ๋ฆฌํ€˜์ŠคํŠธ์˜ ๋ฉ”์†Œ๋“œ์™€ url์„ ๋กœ๊น… ํ•ด์ค๋‹ˆ๋‹ค.
  console.log(
    'Serving request type ' + request.method + ' for url ' + request.url
  )
  // ์ด ์œ„๋Š” ์›๋ž˜ ์žˆ์—ˆ๋˜ ์ฝ”๋“œ.
}

์ด์ œ GET ๋ฐฉ์‹์œผ๋กœ, ์ฆ‰ ํด๋ผ์ด์–ธํŠธ๊ฐ€ (๊ตฌ๊ธ€ ํฌ๋กฌ) ๋‚ด ๋กœ์ปฌ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ChatterBox ์ฑ„ํŒ… ๋‚ด์—ญ์„ โ€œ์กฐํšŒโ€ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด ์ค˜์•ผ ํ•œ๋‹ค!

let body ๋ฅผ ํ†ตํ•ด, ์ผ๋‹จ ๋ชฉ์—… ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ์ฒด ๋‚ด์— (์ž„์‹œ ์„œ๋ฒ„๋ผ ์น˜์ž) ๋„ฃ์–ด๋‘์—ˆ๋‹ค.

์ด์ œ ์„œ๋ฒ„ (body) ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋ƒ๋Š” ๊ฑฐ๋‹ค. GET!

let body = {
  results: [
    {
      username: '๊ด€๋ฆฌ์ž',
      roomname: '์ฝ”๋“œ์Šคํ…Œ์ด์ธ ',
      date: '2020-11-16T03:44:53.221Z',
      text: '์ด๋จธ์‹œ๋ธŒ ์—ฌ๋Ÿฌ๋ถ„๋“ค ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค',
    },
    {
      username: '๊ด€๋ฆฌ์ž',
      roomname: '์ฝ”๋“œ์Šคํ…Œ์ด์ธ ',
      date: '2020-11-16T03:44:53.221Z',
      text: 'chatterbox client ์Šคํ”„๋ฆฐํŠธ๋ฅผ ์œ„ํ•œ ์„œ๋ฒ„์ž…๋‹ˆ๋‹ค',
    },
    {
      username: '๊ด€๋ฆฌ์ž',
      roomname: '์ฝ”๋“œ์Šคํ…Œ์ด์ธ ',
      date: '2020-11-16T03:44:53.221Z',
      text: '์•„์ž ์•„์ž ํ™”์ดํŒ…!!!',
    },
  ],
}

const requestHandler = function(request, response) {
  // node server ์˜ requestHandler๋Š” ํ•ญ์ƒ request, response๋ฅผ ์ธ์ž๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค.
  // ๋˜ํ•œ http ์š”์ฒญ์€ ํ•ญ์ƒ ์š”์ฒญ๊ณผ ์‘๋‹ต์ด ๋™๋ฐ˜ ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  // ์ด๊ฒƒ๋“ค์€ ์š”์ฒญ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค๋ฉด, ์š”์ฒญ url๊ณผ method ๋“ฑ์„ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  // ์•„๋ž˜๋Š” ๋ชจ๋“  ๋ฆฌํ€˜์ŠคํŠธ์˜ ๋ฉ”์†Œ๋“œ์™€ url์„ ๋กœ๊น… ํ•ด์ค๋‹ˆ๋‹ค.
  console.log(
    'Serving request type ' + request.method + ' for url ' + request.url
  )
  // ์ด ์œ„๋Š” ์›๋ž˜ ์žˆ์—ˆ๋˜ ์ฝ”๋“œ. ์•„๋ž˜๋ถ€ํ„ฐ ์‹œ์ž‘
  if (request.method === 'GET' && request.url === '/messages') {
    request
      .on('data', chunk => {
        let str = new String(chunk, 'UTF-8')
        body = str
      })
      .on('end', () => {
        response.writeHead(200, defaultCorsHeaders)
        response.end(JSON.stringify(body))
      })
  } else if (request.method === 'OPTIONS') {
    response.writeHead(201, defaultCorsHeaders)
    response.end()
  } else if (request.method === 'POST' && request.url === '/messages') {
    let body2 = ''
    request
      .on('data', chunk => {
        body2 = body2 + chunk
      })
      .on('end', () => {
        const data = JSON.parse(body2)
        body.results.push(data)
        response.writeHead(201, defaultCorsHeaders)
        response.end(JSON.stringify(data))
      })
  } else {
    response.writeHead(404, defaultCorsHeaders)
    response.end()
  }
  // ๊ธฐ๋ณธ CORS ์„ค์ •์ด ๋˜์–ด์žˆ๋Š” ์ฝ”๋“œ ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์— ์žˆ์Šต๋‹ˆ๋‹ค.
  // console.log(request);
  // CORS์— ๋Œ€ํ•ด์„œ๋Š” ์กฐ๊ธˆ๋” ์•Œ์•„๋ณด์„ธ์š”.
  const headers = defaultCorsHeaders
  // ์‘๋‹ต ํ—ค๋”์— ์‘๋‹ตํ•˜๋Š” ์ปจํ…์ธ ์˜ ์ž๋ฃŒ ํƒ€์ž…์„ ํ—ค๋”์— ๊ธฐ๋ก ํ•ฉ๋‹ˆ๋‹ค.
  headers['Content-Type'] = 'text/plain'

  // .writeHead() ๋ฉ”์†Œ๋“œ์˜ ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ๋Š” ์‘๋‹ต ํ—ค๋”์™€ ํ‚ค์™€ ๊ฐ’์„ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ ์–ด์ค๋‹ˆ๋‹ค.
  // response.writeHead(200, headers);

  // ๋…ธ๋“œ ์„œ๋ฒ„์— ๋Œ€ํ•œ ๋ชจ๋“  ์š”์ฒญ์€ ์‘๋‹ต์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. response.end ๋ฉ”์†Œ๋“œ๋Š” ์š”์ฒญ์— ๋Œ€ํ•œ ์‘๋‹ต์„ ๋ณด๋‚ด์ค๋‹ˆ๋‹ค.
  // response.end("Hello, World!");
}

const defaultCorsHeaders = {
  'access-control-allow-origin': '*',
  'access-control-allow-methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'access-control-allow-headers': 'content-type, accept',
  'access-control-max-age': 10, // Seconds.
}

module.exports = requestHandler

โ€< Buffer 22 61 62 63 64 22 >โ€ ์™€ ๊ฐ™์ด ์ฒ˜๋ฆฌ ๋˜๋Š” ๋ถ€๋ถ„์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ ์œ„ํ•ด ์œ„์™€ ๊ฐ™์€ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ–ˆ๋‹ค.

request ๋Š” on ์œผ๋กœ ๋“ค์–ด์˜ค๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์™€ ์—ฐ๊ฒฐ๋˜๋Š” ๋“ฏ ํ•˜๋‹ค. (์ž‘๋™์›๋ฆฌ๋Š” ๋ชจ๋ฅธ๋‹ค)

JSON.stringify()๋Š” ๊ฐ’์„ JSON ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.

์ฝ”๋“œ๋ฅผ ์„ธ์„ธํžˆ ํ•ด๋ถ€ํ•˜๋ ค๋Š” ์ƒ๊ฐ์€ ์ „ํ˜€ ์—†์ง€๋งŒ ๊ทธ๋ž˜๋„ ๊ฐ์ด ์ž˜ ์•ˆ์™€์„œ ๋ญ”๊ฐ€ ๋” ์ฝ์–ด๋ณด๊ณ  ์ •๋ฆฌ๋ฅผ ํ•ด์•ผ ํ•  ๊ฑฐ ๊ฐ™๋‹ค.

๋ญ”๊ฐ€ ํ˜„์žฌ๋กœ์„œ๋Š” ์™œ ์ด๋ž˜์•ผ ๋˜๋Š”์ง€ ๋‚ฉ๋“์ด ๋˜์งˆ ์•Š์•„์„œ์ด๋‹ค.


Written by@[DotoriMook]
ํ”„๋ก ํŠธ์—”๋“œ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ๋„ํ† ๋ฆฌ๋ฌต์˜ ๊ธฐ์ˆ ๊ฐœ๋ฐœ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค.

GitHubMediumTwitterFacebook