Node.js를 활용해 간단한 알파벳 변환기 만들기

Next.js에서 사용하기 위해서 node.js를 다시 공부해보고자 간단한 앱(?)을 만들어보았습니다. MSW2도 공부해보고 소켓을 구현을 해보고 싶어서... 이젠 DB도 어느정도 깔짝은 대봐야 할 것 같아서 시작하게 되었습니다. 좋은 시작이겠죠?

 

Client

client 쪽은 리액트를 사용해서 만들었습니다. 입력값에 잘못입력하면 createPortal을 사용해서 간단하게 모달이 뜨게 만들었습니다.

import { isLowerCase, isUpperCase } from "./checker";
import Modal from "./Modal";
import { createPortal } from "react-dom";
import { useRef, useState } from "react"

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [response, setResponse] = useState<string>('');
  const textRef = useRef<HTMLTextAreaElement>(null);
  const REGEX = /^[a-z|A-Z]/;

  const upperCaseHandler = () => {
    if(textRef.current?.value === undefined) return
    else {
      if(!REGEX.test(textRef.current.value)) return setIsModalOpen(true);
      if(isUpperCase(textRef.current.value)) return setIsModalOpen(true);
    }

    fetch("http://localhost:8080/upper", {
      method: "POST",
      body: JSON.stringify(textRef.current.value),
      headers: {
        'Content-Type': "application/json",
      }
    })
      .then(res => res.json())
      .then(res => {
        setResponse(res);
      })
  }

  const lowerCaseHandler = () => {
    if(textRef.current?.value === undefined) return
    else {
      if(!REGEX.test(textRef.current.value)) return setIsModalOpen(true);
      if(isLowerCase(textRef.current.value)) return setIsModalOpen(true);
    }

    fetch("http://localhost:8080/lower", {
      method: "POST",
      body: JSON.stringify(textRef.current.value),
      headers: {
        'Content-Type': "application/json",
      }
    })
      .then(res => res.json())
      .then(res => {
        setResponse(res);
      })
  }

  return (
    <>
    {isModalOpen && createPortal(<Modal closefn={setIsModalOpen} />, document.getElementById("modal")!)}

      <div className="container">
        <div className="wrap">

          <div className="title">
            <h1 className="heading">문자열 변환기</h1>
            <img className="icon" src="icon.svg"/>
          </div>

          <section className="summary">
            <h2 className="semi-title">개요</h2>
            <p className="detail">Node.js로 구축된 서버에 문자를 적고 요청을 보낼 수 있는 컨버터입니다. 대문자로 요청했다면 소문자가 대문자로 바뀌어 응답이 돌아오며, 소문자로 요청했다면 대문자가 소문자로 바뀌어 응답이 돌아오게 됩니다.</p>
          </section>

          <section className="string-convertor">
            <div>
              <h3>요청하기</h3>
              <span>*영어만 입력해주세요.</span>
            </div>
            <textarea className="request-textarea" ref={textRef}/>
            <div className="button-wrap">
              <button className="button" onClick={upperCaseHandler}>대문자</button>
              <button className="button" onClick={lowerCaseHandler}>소문자</button>
            </div>
            <h3>응답받기</h3>
            <textarea className="response-textarea" disabled value={response}/>
          </section>

        </div>
      </div>
    </>
  )
}

 

Server

간단하게 서버쪽은 기본내장 http모듈을 사용해서 작성하였습니다.

const http = require('http');
const PORT = 8080;
const IP = 'localhost';

const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*", // '*' 모든 리소스에게 권한 부여
  "Access-Control-Allow-Methods": "GET, POST, OPTIONS", 
  "Access-Control-Allow-Headers": "Content-Type, Accept", 
  "Access-Control-Max-Age": 10,
};

const server = http.createServer((req, res) => {
  if (req.method === "OPTIONS") {
    res.writeHead(200, defaultCorsHeader);
    res.end();
  }

  if(req.method === 'POST' && req.url === '/upper') {
    let body = [];
    req
      .on("error", (err) => {
        console.error(err);
      })
      .on("data", (chunk) => {
        body.push(chunk);
      })
      .on("end", () => {
        body = Buffer.concat(body).toString();
        res.writeHead(201, defaultCorsHeader);
        res.end(body.toUpperCase());
      })
  }
  else if(req.method === 'POST' && req.url === '/lower') {
    let body = [];
    req
      .on("error", (err) => {
        console.error(err);
      })
      .on('data', (chunk) => {
        body.push(chunk);
      })
      .on('end', () => {
        body = Buffer.concat(body).toString();
        res.writeHead(201, defaultCorsHeader);
        res.end(body.toLowerCase());
      });
  }

})

server.listen(PORT, () => {
  console.log(`Server running at http://${IP}:${PORT}/`)
})

 

Result

CORS나 Buffer 개념을 다시 공부해볼 수 있어서 좋았어요😊

Repository

GitHub - ddaeunbb/node-convertor: ✨node.js로 구현한 간단한 영어 변환기입니다.