pile·
프론트엔드·마켓컬리마켓컬리 Hello World·

우리는 왜 공통 라이브러리를 만들기 시작했나

컬리 물류웹개발팀이 팀·프로젝트마다 중복 구현되던 프론트엔드 공통 기능을 표준화하기 위해 공통 라이브러리를 만들기 시작한 이야기다. 외부 라이브러리 채택과 사내 구현의 트레이드오프를 따지고, 첫 기능으로 숫자 구분자(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 모노레포·신뢰 기준·구현 트레이드오프 레퍼런스.
마켓컬리
마켓컬리 Hello World 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2