과제로 퍼널을 구현해야 할 일이 있었는데, 토스 라이브러리의 useFunnel이 떠올랐다.
내가 하던 프로젝트에서는 퍼널을 구현할 일이 없었는데, 구현해볼 수 있는 기회가 생김!
토스 라이브러리의 hook을 가져와 사용하지는 않았지만,
토스 슬래시에서 본 부분을 다시 고민하며 응집도에 대해서 생각하며 내가 이해할 수 있는 부분까지만 구현했다.
재사용 컴포넌트도 생각만 해봤지 구현은 처음.! 재밌었다.
컨퍼런스에서는 이 세가지 키워드로 퍼널 코드 개선 과정을 봤었는데,
이 과제에서도 응집도에 대한 요구사항이 있어 다시금 생각하게 됐다.
3번의 시각화는 DX 개선을 위한 추가 구현 사항이라 제외하고, 추상화까지 하기에는 주어진 시간 내에 오버할 것 같아서 결과적으로 응집도까지만 신경 쓰며 구현했다.
응집도는 하나의 함수가 하나의 일만 하자는 단일 책임 원칙과 관련이 있는 개념이다.
하나의 목적을 가진 코드가 높은 응집도를 갖고 모여있어 로직 흐름을 한 눈에 따라갈 수 있고 유지보수하기 용이한 것이 핵심이다.
이상적인 모듈화를 높은 응집도와 낮은 결합도로 설명하는데, 이 과제의 핵심 설계 요구사항도 그 부분을 염두해둔 것 같았다.
실제로 마구 구현해본 내 코드를 다시 봤을 때 느꼈지만, 응집도가 낮으면 코드 흐름을 따라가기 어려워 이해하기 어려운 코드가 된다.
그런 코드를 유지보수 하다보면 이곳 저곳에 로직을 끼워넣은 처치 곤란 코드가 되고, 당연히 코드 재사용이 어렵다.
최근 고민하는 클린코드를 고려하며 리팩토링을 시도하려고 했지만, 배포에 집중하자고 우선순위를 뒤로 두었더니, 어제처럼 과제나 새로운 프로젝트에서 한번씩 꺼내보는 관점이 되었다.
이럴 때 한번씩 리뷰해보며 코드 습관화가 되었으면 좋겠다!
TypeScript를 이용해 공통 컴포넌트를 구현할 때,
받을 props에 대한 interface를 정의하는데 이 때 기존의 HTML Element가 기본으로 받을 수 있는 attribute를 extends 한다.
기존에 TS를 사용할 때는 공통 컴포넌트를 구현하지 않아서 TS를 사용함에 있어서 별로 어렵지 않게 생각했는데
다양한 케이스에서 들어올 props를 고려하고, 컴포넌트를 유연하게 확장하려고 하니 이런 부분에 대해서 더 잘 알아야겠다는 생각이 들었다.
덤으로 Element의 기본 attribute에 대해서도 다시금 리뷰할 수 있는 계기가 되었다!
그리고 Event type은 왜 아직도 헷갈리냐 나..
좀 더 TypeScript에 친숙해져야 한다고 느낌.!