TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution

카카오엔터테인먼트 스토리FE개발팀이 모노레포에서 공통 패키지를 수정할 때마다 빌드를 거쳐야 하는 불편을 TurboRepo의 Just-in-Time Packages로 없앤 기록이다. 카카오페이지·카카오웹툰·타파스를 포함해 9개 서비스를 한 팀이 관리하게 되면서 컨벤션과 폴더 구조, 배포 방식을 통합했고 모노레포도 그 일환이었다. 팀원의 "빌드하는 과정이 불편하다"는 한마디에서 시작해 TypeScript의 moduleResolution까지 파고든 여정을 담았다.

핵심 포인트

기존 공통 패키지는 컴파일된 결과물을 참조하는 방식이라, 코드를 수정하거나 생성한 뒤 매번 빌드 명령을 거쳐야 했다.
Just-in-Time Packages의 가장 큰 장점은 빌드 없이 소스를 바로 참조한다는 것이다.
이를 구현하려면 TypeScript와 Node.js가 소스 디렉터리를 올바르게 해석해야 하고, 그 역할을 하는 것이 moduleResolution이다.
moduleResolution은 컴파일러가 import에 사용된 모듈을 찾고 해석하는 방식을 결정하는 설정이며 현재까지 네 가지 방식을 제공한다.
팀 통합 과정에서 가장 많은 시간과 노력을 들인 것이 서비스 간 사일로를 낮추는 일이었고 모노레포가 그 수단이었다.

상세 정리

조직 배경: 이전에는 카카오페이지를 개발하는 팀과 카카오웹툰을 개발하는 팀으로 나뉘어 있다가, 약 1년 전 하나의 팀으로 합쳐지며 사내 지원 프로젝트까지 포함해 9개 서비스를 함께 관리하게 됐다.
통합 대상: 각 서비스에 존재하는 컨벤션과 포맷팅, 폴더 구조, 배포 방식을 하나로 맞추는 일이었다.
모노레포를 고른 이유: 개발 과정에서 공통 자원을 효율적으로 관리할 수 있어 서비스 간 사일로를 효과적으로 낮출 수 있다는 장점 때문이다.
문제의 발단: 공통으로 쓰이는 코드를 수정하거나 만든 뒤 컴파일 과정을 거쳐야 다른 서비스에서 참조할 수 있는 구조였다.
전환의 계기: Just-in-Time Packages 방식을 경험한 뒤 그날로 모노레포 내 모든 프로젝트에 적용하기로 했다.
글의 구성: Just-in-Time Packages 소개와 실습, 적용 과정에서 학습한 내용, 그리고 트러블슈팅을 담았다.
moduleResolution을 먼저 다루는 이유는 소스를 직접 참조하는 구조가 성립하려면 컴파일러와 런타임이 그 디렉터리를 제대로 찾아야 하기 때문이다.
저자는 그동안 moduleResolution을 크게 신경 써본 적이 없었다고 밝히며, 네 가지 해석 방식이 각각 어떻게 모듈을 찾는지 짚어 나간다.

왜 읽나모노레포에서 공통 패키지를 고칠 때마다 빌드를 기다리는 프론트엔드 팀에게, 소스 직접 참조로 전환하는 접근과 그 전제가 되는 TypeScript 모듈 해석 설정을 정리해 준다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다