Frontend Fundamentals
(frontend-fundamentals.com)토스 프론트엔드 챕터에서 생각하는 좋은 프론트엔드 코드의 기준에 대해서 소개하는 사이트를 게시했습니다.
- 프론트엔드 개발자들이 주로 사용하는 TypeScript를 기반으로 설명
- 가독성/예측 가능성/응집도/결합도의 4가지 관점에서 best practice를 제시함
- 실제 프론트엔드에서 자주 사용하는 라이브러리를 활용하는 예시 제공
4가지 기준
-
가독성
가독성(Readability)은 코드가 읽기 쉬운 정도를 말해요. 코드가 변경하기 쉬우려면 먼저 코드가 어떤 동작을 하는지 이해할 수 있어야 해요. -
예측 가능성
예측 가능성(Predictability)이란, 함께 협업하는 동료들이 함수나 컴포넌트의 동작을 얼마나 예측할 수 있는지를 말해요. 예측 가능성이 높은 코드는 일관적인 규칙을 따르고, 함수나 컴포넌트의 이름과 파라미터, 반환 값만 보고도 어떤 동작을 하는지 알 수 있어요. -
응집도
응집도(Cohesion)란, 수정되어야 할 코드가 항상 같이 수정되는지를 말해요. 응집도가 높은 코드는 코드의 한 부분을 수정해도 의도치 않게 다른 부분에서 오류가 발생하지 않아요. 함께 수정되어야 할 부분이 반드시 함께 수정되도록 구조적으로 뒷받침되기 때문이죠. -
결합도
결합도(Coupling)란, 코드를 수정했을 때의 영향범위를 말해요. 코드를 수정했을 때 영향범위가 적어서, 변경에 따른 범위를 예측할 수 있는 코드가 수정하기 쉬운 코드예요.
왜 컴포넌트와 훅의 최소 관리단위로 파일을 사용하는지 궁금합니다. IDE 지원이나 tree shaking이 미비해서 그런건지 추측이 되긴 하는데 확실하지 않아서 여쭤봅니다
코드 읽다가 함수 하나짜리 파일, import export 문만 있는 index.ts 파일을 보면 기억해야 할 것이 늘어나는데요. 단일 파일 내 훅, 컴포넌트 혼용 방식과 비교해서 필요 이상으로 인지 부하를 높이는 배치라 생각합니다. 그럼에도 불구하고 그런 배치를 사용하는 장점이나 이유가 있나요?
저 같은 경우에는 프론트엔드 개발을 할 때, 컴포넌트나 훅의 최소 관리단위로 파일을 사용하는 이유는 아래와 같습니다.
- 테스트 용이성.
즉, 하나의 모듈에 하나의 유닛 테스트를 매칭하기 쉽습니다.
프론트엔드 개발은 순수함수를 통한 패러다임이 주를 이룬다고 생각하는데, 하나의 파일 안에 여러개의 함수가 존재하면 유닛 테스트를 작성할 시 1대1 매칭이 어렵습니다.
만약, remark-plugin.js 라는 하나의 파일안에 여러개의 유틸리티 함수가 존재한다면 테스트를 어떻게 작성해야 할까요? remark-plugin.test.js 파일을 하나만 만들어 여러개의 유틸리티 함수들에 대한 테스트를 일괄적으로 작성하는것이 좋은 선택일까요?
이러한 상황에서 remark-plugins라는 디렉토리를 만들고 그 안에 유틸리티 함수들을 하나씩 쪼개서 분리하여 테스트를 작성한다면, 추후에 함수 역할을 좀 더 명확하게 할 수 있고, 깃허브 커밋 추적도 훨씬 깔끔해지는 등의 이점이 있다 생각합니다.
- 디렉토리 구조화
서버 개발에서의 commonjs 혹은 클라이언트에서의 webpack 등의 모듈 번들러는 index.js 파일을 특정 디렉토리의 입구 파일로 지정하는 경우가 많습니다. 이는 예전 부터 자주 사용되어오던 관습이기도 해서 그냥 받아들여 사용하는 이유도 일부 있습니다.
하지만 제 생각에 가장 중요한 이유는, 함수형 프로그래밍의 순수 함수 패러다임에서는 외부 상태에 의존하면 안되기에, 하나의 파일에 여러 함수들이 몰려있으면 외부 상태를 참조하는 실수가 발생할 확률이 높아진다 생각합니다. (ES6에서 모듈 스코프가 등장한 이유를 생각해보시면 좋을 것 같습니다.)
- 커밋 추적의 용이성.
개인적으로 하나의 파일 안에 여러개의 유틸리티 함수들이 섞여있는 것 보다, 각각의 파일로 함수들이 쪼개져 있으면 커밋 히스토리 추적이 훨씬 간단해지는 것 같습니다.
어떤 모듈에서 기능이 추가되거나 버그가 수정되었을 때, 다른 모듈을 참고할 필요 없이 하나의 모듈에만 집중하면 되니까요.
쓰다보니 글이 길어져서 좀 두서없이 써졌네요. (아직 트리 쉐이킹 관련해서는 제 이해도가 낮은지라 말을 아끼도록 하겠습니다... ) 물론, 제 말이 정답이 아닐 수도 있기때문에 참고용으로 봐주시면 좋을 것 같습니다!