이 문서는 프론트엔드 코드를 작성할 때 지켜야 할 주요 원칙과 규칙, 권장 패턴을 정리한 것입니다.

✅ 가독성(Readability)

코드를 이해하기 쉽게 만듭니다.

1. 매직 넘버에 이름 붙이기

규칙: 숫자에 의미 있는 상수를 사용하여 가독성을 높입니다.

이유:

• 숫자에 의미를 부여하여 이해하기 쉽습니다.
• 유지보수가 편리해집니다.

권장 예시:

const ANIMATION_DELAY_MS = 300;

async function onLikeClick() {
  await postLike(url);
  await delay(ANIMATION_DELAY_MS); // 애니메이션 대기임을 명확히 표시
  await refetchPostLike();
}

2. 복잡한 로직은 추상화하여 분리하기

규칙: 복잡한 로직은 별도 컴포넌트나 HOC(고차 컴포넌트)로 추상화합니다.

이유:

• 관심사를 분리하여 이해하기 쉬워지고 테스트와 유지보수가 편리해집니다.

권장 예시 (Auth Guard):

// 앱 구조는 깔끔
function App() {
  return (
    <AuthGuard>
      <LoginStartPage />
    </AuthGuard>
  );
}

// 인증 로직은 AuthGuard로 분리
function AuthGuard({ children }) {
  const status = useCheckLoginStatus();

  useEffect(() => {
    if (status === "LOGGED_IN") {
      location.href = "/home";
    }
  }, [status]);

  return status !== "LOGGED_IN" ? children : null;
}

3. 조건부 렌더링은 컴포넌트 단위로 분리