사내 인트라넷 페이지 만들기 -2

인트라넷 페이지를 만들면서 기억에 남는 코드들을 기록하는 글이다. 긴 설명은 적지 않겠지만, 비슷한 작업을 해야하는 다른 사람들에게 도움이 되길 바라며 글을 시작하겠다.

주민등록번호 자동으로 하이픈(-) 삽입하는 로직

회원가입 페이지를 만들고 있는데 디자인 시안의 주민등록번호 input창이 한 개 뿐이다. 그래서 유저가 6글자 이상 입력하면 자동으로 하이픈(-)이 생기도록 하는 로직을 짜고 싶었다. 여러 가지 고민 끝에 다음과 같은 식을 썼다.

  const handleIdNumber = (e) => {
    if (e.target.value.length === 15) return;
    if (
      e.target.value.length === 6 ||
      (e.target.value.length === 7 && !e.target.value.includes("-"))
    ) {
      setIdNumber(
        e.target.value.substring(0, 6) + "-" + e.target.value.substring(6)
      );
    } else {
      setIdNumber(e.target.value);
    }
  };

함수형 컴포넌트에서 axios를 이용해 post 하는 법

기존까지 fetch+ 클래스형 컴포넌트만 사용해왔던 터라 새로운 시도를 해보았다. axios의 경우 fetch와 사용법이 크게 다르지 않아서 사용하는 것은 어렵지 않았다. 유저가 입력한 input창의 값들을 모아 백엔드에게 보내줘야하는 상황이었다. replaceAll이라는 함수도 사용했는데 그동안 인트라넷 프로젝트를 하면서 개인적으로 가장 기억에 남는 코드다.

const submit = () => {
    const replaced = idNumber.replaceAll("-", "");

    const isValid =
      userId !== "" &&
      password !== "" &&
      nameKor !== "" &&
      nameEn !== "" &&
      idNumber !== "" &&
      isAddress !== "" &&
      isZoneCode !== "";

    if (isValid) {
      axios
        .post(`${CY_API}/employee/signup`, {
          account: userId,
          password: password,
          name_kor: nameKor,
          name_eng: nameEn,
          mobile: phoneNumber,
          rrn: replaced,
          address: isAddress,
          post_num: isZoneCode
        })

        .then((res) => {
          if (res.status === 201) {
            alert("회원가입에 성공했습니다!");
            history.push("/Login");
          }
        })

        .catch((err) => {
          if (err.message.includes("400")) {
            alert("이미 존재하는 아이디입니다");
          }
        });
    } else {
      alert("필수항목을 입력해주세요");
    }
  };

위에서 말했듯이 주민번호를 6자리 이상 입력하면 하이픈(-)이 자동으로 삽입되는 식을 사용했다. 그런데 백엔드에게 전달할 때는 하이픈이 빠진 순수 숫자만 넘겨줘야 했다. 이 경우 하이픈을 어떻게 제거할지 고민하다가 준님에게 replaceAll이라는 함수를 사용해보라는 조언을 얻었다.

그래서 replaced라는 변수를 선언하고 이 변수에서 하이픈은 모두 제거하는 로직을 구성했다. 그리고 백엔드에 전송할 때 rrn의 값을 replaced라고 적음으로써 백엔드에는 숫자만 넘겨지게 된다.