코딩 컨벤션 제작 이유
여태까지는 그렇다 할 코딩 컨벤션이 없었습니다. 하지만 이내 코딩 컨벤션이 필요하다는 의견이 나왔는데 그 이유는 아래와 같습니다.
1. 작업자가 많아지면서 컴포넌트의 중복또는 계층 구조가 작업자마다 다릅니다.
2. 일관된 스타일을 정해놓지 않아 코드리뷰에 어려움이 있습니다.
3. 다른 코드를 참고하여 기능을 만들 경우 코드를 찾기 어렵습니다.
어떤 것을 정할까
한 달 이라는 제한된 시간안에 일단 v1을 만들기로 하고 중요한 아젠다를 기준으로 논의를 시작했습니다.
아토믹 디자인과 프로젝트 구조는?
현재 프로젝트는 아토믹 디자인을 약간 변형해서 사용하고 있었습니다. 기본적인 아토믹 디자인의 구조는 atoms → molecule → organisms → templates → pages로 이루어져 있습니다.
여기서 organisms와 templates의 경계가 애매해서 이 두 단계를 합쳐 사용하고 있었습니다. 합친 단계를 prototype이라 부르겠습니다.
prototype은 재사용을 하지 않습니다. 재사용 하지 않는 이유는 프로토타입은 도메인에 따라 나뉘기 때문에 바인딩 되는 데이터와 개별 동작이 약간씩 다릅니다. 그래서 여기서는 코드로 보기엔 중복이 발생하더라도 나중에 프로토타입간의 참조로 발생할 혼란을 막기 위해 프로토타입 내부에서 다른 곳을 참조하지 않았습니다.
modules와 재사용성
짧은 시간에 디자인과 기능단에 많은 변화가 일어나기 때문에 스프린트 작업을 하면 보통 prototype 내부에서 컴포넌트를 나눠 빠르게 작업했습니다. 이러다보면 상대적으로 molecule를 활용하지 못한다는 생각이 들었습니다. 중복되는 컴포넌트가 있는데 두 가지 코드 조각으로 나뉘어 있는 경우가 있었습니다.
디자인 팀과 이를 얘기해서 조율하는 것이 가장 좋은 방법이었지만, 이 컨벤션에 대한 논의가 이루어질 때 디자인 팀도 제품에 쓰이는 컴포넌트들에 대한 정리가 막 시작되던 참이었습니다.
그래서 일단 prototype내에서 여러 번 컴포넌트가 중복되는 경우 이를 일단 molecule로 내리기로 했습니다.
데이터는 어디서 가져올 것인가
기본적으로 molecule은 재사용을 염두에 두고 만든 것이므로, 비즈니스 로직이나 외부 데이터에 의존하지 않기로 했습니다. 그래서 prototypes에서 데이터를 prop으로 받기로 했습니다.
prop으로 데이터를 받게 되면 상황에 따라 받는 prop이 늘어나고 drilling도 이에 따라 늘어나면서 자칫 관리가 어려워질 수 있었습니다.
이는 compound 패턴과 provider를 적절히 활용하기로 했습니다.
이에 대한 자세한 내용은 별도 포스팅으로 풀어내겠습니다.
훅 관리
프로젝트 내에서 훅은 hooks폴더 내부에서 관리하고 있었습니다. 하지만 훅 파일이 점차 많아지면서 더 세부적인 가이드라인이 필요함을 느꼈습니다. 프로젝트 내에서 사용하고 있는 훅은 다음과 같이 나뉘어져 있었습니다.
1. 한 도메인 내에서 사용하는 기능 중심 훅
2. 데이터 패칭 훅
3. UI 관련 훅
따라서 이 훅들을 모두 hooks 폴더에서 관리하는 것이 아니라 앞서 말한 기능에 따라 관리하는 디렉토리를 별도 생성했습니다.
좋았던 점
- 컴포넌트간의 데이터 공유 방법을 배웠다.
컴포넌트 간의 데이터를 공유하는 방법을 배웠습니다. 객체를 이용한 방법, provider를 이용한 방법을 알았습니다. 장단점을 비교해서 팀원들에게 장단점을 의견으로 내고 적절한 합의점을 찾아가는 점이 좋았습니다. - 일관성있는 코드를 위해 전체적인 훅과 컴포넌트의 기능에 따라 정리해보는 것이 프로젝트 이해도를 높일 수 있었습니다.
아쉬웠던 점
- 변수명에 대한 어느 정도의 컨벤션도 정하면 좋았을 것 같다.
회고 때 이야기 했지만 boolean을 받는 변수라던가 이벤트 함수를 작성할 때 대략적인 변수명에 대한 가이드라인이 있으면 좀 더 일관적인 스타일이 나올 수 있을 거라 생각합니다. - 디자이너와의 디자인 정리
디자인 팀과 모듈에 대한 정의를 해가면서 개선했으면 좋았을 것 같은데 , 아직 디자인 파일도 다 정리되지 않아 거기까지 진행하지 못한 점이 아쉽습니다.
상황에 따라 리소스에 따라 같은 멘탈 모델도 다양하게 수정될 수 있고, 그 일부만 도입해볼 수도 있습니다. 항상 최선의 솔루션으로 제품을 발전시켰으면 좋겠습니다.🥰
