← cd ..

배경

frontend-web의 공유 컴포넌트를 수정하면 commerce-backend에도 동기화해야 합니다. 그런데 이걸 매번 사람이 하다 보니, 빼먹거나 잘못 반영하는 일이 반복됐습니다.

해결 방법

커밋하는 순간 자동으로 동기화되는 Commerce Bit Build 시스템을 만들었습니다.

자동화 흐름

  1. 의존성 추적 스크립트 (trace-commerce-deps.js, 179줄): 재귀적 import 분석
  2. 스테이징 파일 교차 대조: 변경된 파일이 Commerce 의존성인지 확인
  3. 사용자 확인: 빌드 필요 여부를 사용자에게 확인
  4. yarn bit:build 실행: 자동 빌드
  5. bitdist → Commerce 복사: 빌드 결과물 자동 동기화
  6. Commerce 커밋 & 푸시: 변경사항 자동 반영

구성 요소

  • trace-commerce-deps.js: 재귀 import 분석 스크립트
  • tsconfig.commerce.json: 17개 엔트리 포인트 설정
  • webpack.commerce.js: 에셋 번들링 설정
  • .husky/pre-commit: 139줄의 자동화 훅

효과

  • 수동 동기화 작업이 완전히 사라졌습니다
  • 컴포넌트를 고치면 Commerce 빌드가 자동으로 따라옵니다
  • 11번의 반복 테스트를 거쳐 안정성을 확인했습니다

눈여겨볼 점

  • pre-commit 훅으로 lint만 돌리고 있다면, 의존성 추적까지 확장하는 아이디어를 가져갈 수 있습니다. 179줄의 스크립트가 17개 엔트리 포인트에서 import를 재귀 추적해 영향 범위를 자동으로 판단합니다.
  • 경로 별칭(@common/*, @components/*)이나 확장자 탐색(.ts→.tsx→.js→.jsx) 같은 엣지 케이스 처리가 꼼꼼합니다. TypeScript 프로젝트에서 비슷한 도구를 만들 때 참고할 만한 패턴입니다.
  • "커밋하면 알아서 된다"는 경험을 만들려면 안전장치가 핵심입니다. Commerce 경로 우선순위, 미커밋 변경사항 체크, 사용자 확인 프롬프트까지 — 자동화가 사고로 이어지지 않도록 방어 로직을 곳곳에 심어놨습니다.