JS => 대문자 소문자 변환 mini node server 만들기

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:5000/${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json' 
        // preflight request 
        // 'text/main'으로 바꾸면 simple request로 preflight 요청을 생략함
      }
    })
      .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();

server.js _http ver.

const http = require('http');
const PORT = 5000;
const ip = 'localhost';
<br>
const server = http.createServer((request, response) => {
<br>
  if(request.method === 'OPTIONS') {
    response.writeHead(200, defaultCorsHeader); // 응답 200과 함께 코스헤더 전달
    response.end();
  }
<br>
  if(request.method === 'POST' && request.url === '/upper') { // 요청이 포스트면서 url이 upper일 때
    let body = [];
    request.on('data', (chunk) => { // 요청 데이터를 받으면
      body.push(chunk); // 청크라는 데이터 덩어리를 바디에 푸시해준다
    }).on('end', () => { // 요청 데이터 전달이 다 끝나면
      body = Buffer.concat(body).toString().toUpperCase(); // 버퍼라는 배열 대기공간에 바디를 넣어주고 문자열로 변환한 데이터를 바디에 재할당
      response.writeHead(200, defaultCorsHeader); // 응답 200과 함께 코스헤더 응답
      response.end(body); // 바디 응답
    });
  }
<br>
  else if(request.method === 'POST' && request.url === '/lower') { // 요청이 포스트면서 url이 lower일 때
    let body = [];
    request.on('data', (chunk) => { // 요청 데이터를 받으면
      body.push(chunk); // 청크라는 데이터 덩어리를 바디에 푸쉬해준다
    }).on('end', () => { // 요청 데이터 전달이 다 끝나면
      body = Buffer.concat(body).toString().toLowerCase(); // 버퍼라는 배열 대기공간에 바디를 넣어주고 문자열로 변환한 데이터를 바디에 재할당
      response.writeHead(200, defaultCorsHeader); // 응답 200과 함께 코스헤더 전달
      response.end(body); // 바디 응답
    });
  }
<br>
  response.on('error', (err) => {
    console.error(err);
  }); // 에러일 경우
<br>  
  server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});
<br>
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
};

server.js _express ver.

const express = require('express')
const app = express()
const cors = require('cors')
const PORT = 5000;
const ip = 'localhost';
<br>
app.use(cors()); // 모든 요청에 cors 미들웨어 적용
app.use(express.json({strict: false})) 
// 최근에는 body-parser 대신 express에 내장되어 request body를 파싱해줄 수 있음 
// strict: false로 적용해주면 primitive type도 파싱해줌
// strict: false로 적용하지 않으면 JSON 형식으로 요청한 것만 파싱해줌
<br>
app.post('/upper',(req,res) => {
  res.json(req.body.toUpperCase()) 
  // send와 달리 json은 stringify와 send를 순서대로 호출한다. 
})
app.post('/lower', (req, res) => {
  res.json(req.body.toLowerCase())
})
<br>
  app.listen(PORT, ip, () => { // 기존 server.listen을 app.listen으로 변경
  console.log(`http server listen on ${ip}:${PORT}`);
});
<br>
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
};