Frontend Fundamentals

토스 프론트엔드 챕터에서 생각하는 좋은 프론트엔드 코드의 기준에 대해서 소개하는 사이트를 게시했습니다.

• 프론트엔드 개발자들이 주로 사용하는 TypeScript를 기반으로 설명
• 가독성/예측 가능성/응집도/결합도의 4가지 관점에서 best practice를 제시함
• 실제 프론트엔드에서 자주 사용하는 라이브러리를 활용하는 예시 제공

4가지 기준

1. 가독성
   가독성(Readability)은 코드가 읽기 쉬운 정도를 말해요. 코드가 변경하기 쉬우려면 먼저 코드가 어떤 동작을 하는지 이해할 수 있어야 해요.

2. 예측 가능성
   예측 가능성(Predictability)이란, 함께 협업하는 동료들이 함수나 컴포넌트의 동작을 얼마나 예측할 수 있는지를 말해요. 예측 가능성이 높은 코드는 일관적인 규칙을 따르고, 함수나 컴포넌트의 이름과 파라미터, 반환 값만 보고도 어떤 동작을 하는지 알 수 있어요.

3. 응집도
   응집도(Cohesion)란, 수정되어야 할 코드가 항상 같이 수정되는지를 말해요. 응집도가 높은 코드는 코드의 한 부분을 수정해도 의도치 않게 다른 부분에서 오류가 발생하지 않아요. 함께 수정되어야 할 부분이 반드시 함께 수정되도록 구조적으로 뒷받침되기 때문이죠.

4. 결합도
   결합도(Coupling)란, 코드를 수정했을 때의 영향범위를 말해요. 코드를 수정했을 때 영향범위가 적어서, 변경에 따른 범위를 예측할 수 있는 코드가 수정하기 쉬운 코드예요.