27일차

27일차는 배운 내용들을 토대로 계속해서 개인 프로젝트를 진행했다. 목표는 이번 주 중으로 이 프로젝트를 마무리하고 베포까지 하는 걸 마무리 해보려 한다.

gitHub: https://github.com/leeyulgok/yulgok-page

일단 지금까지 한 gitHub 링크다. 아직은 Contact 부분까지만 완성했다. 나머지는 Resume와 Projects 부분이 남았는데, 이 부분은 내 이야기를 쓰면 되는 부분이라 크게 어렵게 생각하지 않는다.

일단 27일차는 어떤 걸 했는지 기록을 하려 한다.

개인 프로젝트

나의 개인 프로젝트는 개인 홈페이지를 만들고 있다. 그 중에서 오늘 진행한 건 Form에 유효성 검사를 줘서 적절하면 전송할 수 있고, 적절하지 못하면 보낼 수 없도록 했다.

유효성 검사

우선 유효성 검사란, 어떤 데이터의 값이 유효한지, 타당한지 확인하는 것을 의미한다. 예를 들면 우리는 회원가입을 할 때, 비밀번호는 최소 12자 이상, 대소문자 필수, 특수문자 포함과 같은 조건을 둔다. 이처럼 조건에 맞는 값을 입력했는지 확인하는 것을 유효성 검사라 한다.

결과

이번에도 우선 결과부터 보면 다음과 같다. 아직 css를 따로 두지는 않았다.

결과에 대해 설명하면, 유효성 검사를 통해 에러 메시지를 표시했다.

한 글자를 입력했을 때는 유효성에 적절하지 않기 때문에 유효성에 적절하지 않다는 메시지가 나온다. 그 후 값을 유효성에 맞게 입력하면 메시지가 사라진다.

코드

이번 유효성 검사 코드는 Custom Hook을 만들어서 사용했다.

useCheckValidation.js

import { useState, useEffect, useRef } from "react";

const useCheckValidation = (type, value) => {
  const [isValid, setIsValid] = useState(true);
  const [error, setError] = useState("");
  const [isTouched, setIsTouched] = useState(false);
  const timer = useRef(null);

  useEffect(() => {
    if (!isTouched) return;

    if (timer.current) {
      clearTimeout(timer.current);
    }
    timer.current = setTimeout(() => {
      console.log(`Checking validation for type: ${type} and value: ${value}`);

      let errorMessage = "";
      let regex;
      switch (type) {
        case "name":
          regex = /^[a-zA-Z가-힣]{2,30}$/;
          errorMessage = "최대 30자, 특수문자, 숫자는 불가";
          break;
        case "phone":
          regex = /^010\d{8}$/;
          errorMessage = "숫자만 가능, 010으로 시작해야 합니다";
          break;
        case "email":
          regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
          errorMessage = "이메일 형식이어야 합니다";
          break;
        default:
          regex = /.*/;
      }

      const checkValidity = regex.test(value);
      console.log(`Validity result: ${checkValidity}`);
      setIsValid(checkValidity);
      if (!checkValidity) {
        setError(`입력값이 잘못됐습니다. 확인해주세요. ${errorMessage}`);
      } else {
        setError("");
      }
    }, 1000);

    return () => {
      clearTimeout(timer.current);
    };
  }, [type, value, isTouched]);

  const touchHandler = () => {
    setIsTouched(true);
  };

  return { isValid, error, touchHandler };
};

export default useCheckValidation;

useCheckValidation 코드다. Form에 있는 Name, Phone, Email 값의 유효한지 확인한다.

엄청 복잡한 코드지만 우선 핵심은 useEffect 안에 있는 switch문이다. switch문 안에서 input 태그의 type을 확인하고 값이 설정한 정규식 표현과 맞는 지 확인하고 일치하지 않으면 에러 메시지를 발송한다.

정규 표현식 해석
1. Name : 최소 2글자, 최대 30자, 특수문자, 숫자 불가
2. Phone : 숫자만 가능, 010으로 시작
3. Email : 이메일 형식인지 파악

이렇게 함수를 만들어서 진행했다. 이렇게 만든 코드는 InputField.jsx 컴포넌트에서 유효성 검사를 진행한다. 유효성 검사에 일치하지 않을 경우, InputError.jsx로 error를 보내 메시지를 띄운다.

정리하기

유효성 검사에 대해서 이런 얘기가 있다.

유효성 검사는 백엔드에서 해야 하는 건가? 프론트엔드에서 해야 하는 건가?

나는 이 부분에서 둘 다 해서 2중으로 체크를 해야 한다고 생각한다. 그 이유는 각각의 개발자의 방향이 다르기 때문이다.

좋은 프론트엔드 개발자란, 좋은 UI를 개발해서 사용자의 UX를 높여주는 것이라 생각한다. 그렇기 때문에 예를 들어,

유효성 검사를 백엔드에서만 진행할 경우, 사용자는 회원가입을 할 때 값을 다 입력하고 가입 버튼을 누른 후에 잘못된 값을 입력했다는 걸 확인할 수 있다.

이는 지금 같은 시대에서 좋은 경험을 줄 수 없다. 그렇기 때문에 사용자가 현재 머물러 있는 곳에서 무엇이 잘못되었는지 확인하게 할 수 있게 하는 경험을 제공할 수 있게 해야 한다.

그러고 백엔드 개발자는 데이터베이스에 정제된 데이터를 넣을 수 있도록 하고, 서버가 원활히 돌아가도록 해야 한다. 그렇기 때문에 값이 제대로 넘어오도록 해야 한다.

만약 사용자가 틀린 상태로 값을 입력하고 가입버튼을 눌렀는데 그대로 회원가입이 된다면, 그 회사는 큰 결함을 갖고 있는 것이다.

그렇기 때문에 유효성 검사는 양측에서 다 해야 한다. 이만큼 유효성 검사는 중요한 부분이고 나 또한 이번 기회를 통해서 유효성 검사를 어떻게 보여줄 수 있는지, 어떻게 제공할 수 있는지 고민해보는 시간을 가졌다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프