🤓Frontend Fundamentals-toss로 공부하기

⬇️궁금하신분들은 아래 주소로⬇️
https://frontend-fundamentals.com/

토스에서 프론트엔드 개발의 기초/좋은 코드를 쓰는 방법에 대해 정리해두었다.
개발하면서 좋은 코드란 무엇일까 많은 고민을 했던 나에게 정말 단비같은 지침서🥹

해당 문서로 공부하면서 기억해두고 싶어 기록한다!!!(토스 사랑해요💗)

⭐출처: 토스⭐

변경하기 쉬운 코드

1. 가독성
2. 예측 가능성
3. 응집도
4. 결합도

1️⃣같이 실행되지 않는 코드 분리하기

• 예시) 한 컴포넌트에서 두가지의 조건이 있으면 컴포넌트 안에서 삼항식을쓰던 조건식을 사용한다.
• 동시에 실행되지 않는 코드가 교차되어서 나타나서 코드를 이해할 때 부담을 준다.
• 그때는 두 컴포넌트로 나눠서 작성하면 좋다.

[수정후]

function SubmitButton() {
  const isViewer = useRole() === "viewer";

  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}

[나누기1]function ViewerSubmitButton() {
  return <TextButton disabled>Submit</TextButton>;
}

[나누기2]function AdminSubmitButton() {
  useEffect(() => {
    showAnimation();
  }, []);

  return <Button type="submit">Submit</Button>;
}

• <SubmitButton /> 코드 곳곳에 있던 분기가 단 하나로 합쳐지면서, 분기가 줄어듬.
• <ViewerSubmitButton />과 <AdminSubmitButton /> 에서는 하나의 분기만 관리하기 때문에, 코드를 읽는 사람이 한 번에 고려해야 할 맥락이 적어딤.

⚠️But. css 수정할때 각각 수정이 필요해, 장단점이 있음

2️⃣구현 상세 추상화하기

• 한 사람이 코드를 읽을 때 동시에 고려할 수 있는 총 맥락의 숫자는 제한되어 있다. - 내 코드를 읽는 사람들이 코드를 쉽게 읽을 수 있도록 하기 위해서 불필요한 맥락을 추상화할 수 있다.