[프로젝트 Type Boy] 2. PoC 배포하기

Taehee_Hwang·2024년 12월 11일

PoC 타수 측정 타자 속도 토이 프로젝트

Type Boy

목록 보기

3/5

지난 게시글에서는 타수 측정 로직을 구현하는 방법에 대해 알아보았습니다. 이번에는 그 로직을 검증하기 위해 간단한 PoC 사이트를 배포하는 과정을 공유하겠습니다.

타수 측정 기능 설계 및 구현

타수 측정을 위해 필요한 정보는 다음과 같습니다.
1. 입력한 텍스트: 사용자가 입력한 텍스트 내용
2. 입력 시간: 입력이 시작된 시간과 경과 시간

이를 기반으로 다음 두 가지 주요 데이터를 계산합니다.

CPM(Characters Per Minute): 분당 입력한 글자 수
정확도: 입력된 텍스트가 제공된 텍스트와 얼마나 일치하는지 (%)

아래는 PoC에서 사용된 코드입니다.

import { ChangeEventHandler, useState } from "react";

export const useTypingHook = (text: string) => {
  const [inputText, setInputText] = useState("");
  const [startTime, setStartTime] = useState<Date | null>(null);

  const elapsedTime = startTime
    ? new Date().getTime() - startTime.getTime()
    : 0;

  const cpm = elapsedTime > 0
    ? Math.round((inputText.length / (elapsedTime / 60000)))
    : 0;

  const accuracy =
    inputText.length > 0
      ? (inputText
          .split("")
          .filter((char, index) => char === text[index]).length /
          inputText.length) *
        100
      : 100;

  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    setInputText(e.target.value);
    if (!startTime) {
      setStartTime(new Date());
    }
  };

  const handleReset = () => {
    setInputText("");
    setStartTime(null);
  };

  return {
    inputText,
    elapsedTime,
    cpm,
    accuracy,
    handleInputChange,
    handleReset,
  };
};

코드 설명

CPM 계산
- CPM은 입력한 글자 수 ÷ (경과 시간 ÷ 60000)으로 계산하여, 분당 입력 속도를 측정합니다.
정확도 계산
- 사용자가 입력한 텍스트와 제공된 텍스트를 비교해, 일치하는 글자의 비율을 계산합니다.

배포

배포 환경 선택

배포 환경을 선택하기 위해 몇 가지 후보를 고려해보았습니다.

개인 호스팅 서버 구축
- 장점: 자유로운 설정 가능
- 단점: 초기 설정과 유지보수의 어려움
클라우드 서버 사용 (AWS, GCP 등)
- 장점: 확장성과 안정성
- 단점: 비용 발생 가능
PaaS(Platform as a Service) 사용
- 예: Vercel, Netlify
- 장점: 설정이 간단하고 무료 플랜 제공