240107 리팩토링 - Swal ( sweetAlert2)

문제상황

sweetAlert를 사용해 간단한 alert창을 띄우고 있는데
보이는 것 처럼 title 부분을 빼곤 다 동일하다.

지금 보이는 게 이거지, 이런 코드가 한 두개가 아니라서 컴포넌트로 분리 하려고 한다.

---

해결과정

//alert.ts
import React from 'react';
import Swal from 'sweetalert2';

const alert = (title: string) => {
  Swal.fire({
    icon: 'info',
    width: '400px',
    title: `<span style="font-size: 20px; font-weight : bolder;"> ${title}</span>`,
    confirmButtonText: '확인',
    showLoaderOnConfirm: true,
    allowOutsideClick: () => !Swal.isLoading(),
    reverseButtons: true,
  });
};

export default alert;

//MyPageOverlay.tsx

    if (username.length < 2) {
      useAlert(
        '<span style="font-size: 20px; font-weight : bolder;"> 두 글자 이상 닉네임만 사용 가능합니다.</span>'
      );
      return;
    }

    if (!nameCheck.test(username)) {
      useAlert(
        '<span style="font-size: 20px; font-weight : bolder;"> 자음 또는 모음으로만 구성된 닉네임은</span> </br><span style="font-size: 20px; font-weight : bolder;">사용 불가능 합니다.</span>'
      );
      return;
    }

딱 봐도 코드가 확연히 줄었다.
코드 로직이 거의 비슷하다면 하나의 컴포넌트로 분리해 사용하는 게 코드 가독성이나, 코드 길이 측면에서 훨씬 좋다.

한 컴포넌트에 코드가 만약 100줄이 넘어가면, 그것은 협업을 할 때 굉장히 안 좋은 것이라고 나는 생각한다.
최대한 잘 분리해, 다른 사람들이 내 코드를 봤을 떄 이해가 가는 코드가 좋은 코드라고 믿기에 리팩토링을 열심히 해야겠다...

계속 리팩토링을 해보자 ~~