컬리 물류웹개발팀이 팀·프로젝트마다 중복 구현되던 프론트엔드 공통 기능을 표준화하기 위해 공통 라이브러리를 만들기 시작한 이야기다. 외부 라이브러리 채택과 사내 구현의 트레이드오프를 따지고, 첫 기능으로 숫자 구분자(add-separator)를 lerna 모노레포로 구현했다.
핵심 포인트- 빠른 성장으로 유사 기능이 팀마다 따로 개발돼 인력·시간 낭비가 생겨 표준화를 시작
- well-known 라이브러리(예: Day.js)와 사내 구현의 장단점을 비교해 자원이 많이 드는 건 외부, 단순한 건 사내로 구분
- 코드베이스 신뢰 기준으로 문서화·코드리뷰·테스트 3가지를 외부 라이브러리에도 동일 적용
- 첫 공통 기능으로 숫자 구분자 추가를 선정, lerna 기반 모노레포와 npm 패키지로 관리
- 정규식 대신 최소 함수 조합과 TDD로 구현해 정규식 대비 약 20% 성능 개선
상세 정리- 배경: 2015년 출시 후 새벽배송을 개척하며 급성장한 컬리는 조직·요구사항이 늘며 비슷한 기능이 팀·프로젝트별로 따로 만들어졌고, 인력·시간 절감 여지를 표준화에서 찾았다.
- 선택지 비교: 외부 라이브러리는 개발 시간 단축·다중 배포·커뮤니티 문제 해결의 장점이 있으나 불필요한 기능·수정 필요·deprecation 위험이 있다.
- 사내 구현: 가볍게 만들고 신뢰를 높이며 내부 정책에 맞출 수 있으나 전담 개발·지속 유지보수 부담이 있어, 둘 다 절대적 정답은 아니라고 봤다.
- 시작: 물류웹개발팀은 프론트엔드 기술 표준화를 목표로 react-boiler-plate를 만들어 신규 3개 프로젝트에 적용하는 것으로 첫발을 뗐다.
- 신뢰 기준: 표준화의 토대로 문서화(기능·기여 방법 전달), 코드리뷰(품질 확보), 테스트(동작 검증)를 세우고 외부 라이브러리에도 동일하게 요구했다.
- 첫 기능 선정: 자주 쓰지만 구현이 제각각이던 기능 중 숫자 구분자 추가(add-separator)를 첫 대상으로 골랐다.
- 아키텍처: lerna 기반 모노레포와 npm 패키지 구조를 채택해 여러 패키지를 효율적으로 관리하고 배포·버저닝을 단순화했다.
- 구현: 정규식 패턴 대신 checkIsNumber·checkIsValidLength·splitNum·addSeparator처럼 최소 단위 함수를 조합하는 방식으로 TDD로 작성했다.
- 성능: 이 방식이 정규식 기반보다 약 20% 나은 성능을 보였고 유지보수성도 개선됐다.
- 마무리: 구현은 아직 소박하지만 표준을 세우고 재작업 비용을 줄이는 것이 장기 생산성과 조직 성숙도에 기여한다고 봤다.
왜 읽나팀마다 흩어진 유틸을 사내 공통 라이브러리로 묶으려는 프론트엔드 개발자에게 lerna 모노레포·신뢰 기준·구현 트레이드오프 레퍼런스.