mini-node-server

이 mini-node-server는 입력한 문자를 toUpperCase()를 누르면 대문자로, toLowerCase()를 입력하면 소문자로 변환해서 클라이언트로 넘겨준다.

App.js

class App {
  init() {
    document
      .querySelector('#to-upper-case')
      .addEventListener('click', this.toUpperCase.bind(this));
    document
      .querySelector('#to-lower-case')
      .addEventListener('click', this.toLowerCase.bind(this));
  }
  post(path, body) {
    fetch(`http://localhost:4999/${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => res.json())
      .then(res => {
        this.render(res);
      });
  }
  toLowerCase() {
    const text = document.querySelector('.input-text').value;
    this.post('lower', text);
  }
  toUpperCase() {
    const text = document.querySelector('.input-text').value;
    this.post('upper', text);
  }
  render(response) {
    const resultWrapper = document.querySelector('#response-wrapper');
    document.querySelector('.input-text').value = '';
    resultWrapper.innerHTML = response;
  }
}

const app = new App();
app.init();

basic-server

const http = require("http");

const PORT = 4999;

const ip = "localhost";

const server = http.createServer((request, response) => {
  const { headers, method, url } = request;
  let body = [];
  //method가 options
  if (method === "OPTIONS") {
    response.writeHead(200, defaultCorsHeader);
    response.end();
  }

  //method가 POST이고, url이 upper
  if (method === "POST" && url === "/upper") {
    request
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        response.writeHead(201, defaultCorsHeader);
        response.end(body.toUpperCase());
      });

    //request.pipe(response);
  }
  //method가 POST이고, url이 lower
  else if (method === "POST" && url === "/lower") {
    request
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        response.writeHead(201, defaultCorsHeader);
        response.end(body.toLowerCase());
      });
  }
  //에러처리
  else {
    response.writeHead(404, defaultCorsHeader);
    response.end();
  }
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

//express
// const express = require("express");
// const app = express();
// const port = 4999;

// const myLogger = function (req, res, next) {
//   if (req.headers.token) {
//     req.isLoggedIn = true;
//     next();
//     console.log("1");
//   } else {
//     res.status(400).send("invalid user");
//     console.log("2");
//   }
// };
// app.use(myLogger);
// app.get("/", (req, res) => {
//   res.send("hello world");
// });
// app.listen(port, () => {
//   console.log(`Example app listening on port ${port}`);
// });
const defaultCorsHeader = {
  "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,
};

코드 윗부분은 Node.js의 http 모듈을 이용한 코드이다.
http 모듈 https://nodejs.org/dist/latest-v16.x/docs/api/http.html
http 트랜잭션 해부 https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction
해당 링크들을 참조하였다.

서버 포트는 localhost 4999번이다.
그리고 request 받은 데이터중 method와 url을 if-else if문으로 구분하고 각각 다른 결과값을 준다.
writeHead는 response 객체의 메소드에서 헤더 정보를 응답에 작성해서 내보내는 것이다.
response.end()로 응답을 마친다. end안에 데이터가 들어갈 수 있지만 string 혹은 buffer 가능하다한다.

아래 주석 처리된 코드는 express를 이용한 코드이다.
app.use()로 미들웨어를 사용한다.
만약 app.use('/user')라면 user로 시작하는 모든 요청에서 미들웨어를 실행한다.
app.get()은 GET요청에서 미들웨어를 실행한다.