토스뱅크가 패키지를 관리하는 방식 #2: 토스뱅크 패키지의 세 가지 기준

안녕하세요. 토스뱅크에서 패키지 개발 환경을 개선하고 있는 기술그룹입니다.패키지를 사용하는 쪽(이하 호스트)에서는 패키지 코드가 어떤 브라우저까지 지원하는지, 패키지 개발 중 사용하던 API를 실행 환경에서도 쓸 수 있는지 따로 살펴봐야 했어요. 호스트에서 패키지의 원본 소스 코드를 확인하기도 어려웠어요.이 문제를 해결하기 위해 패키지가 갖춰야 할 기준을 정했어요. 그리고 각 기준을 충족하려면 무엇이 필요한지 살펴보고, 그에 맞는 빌드 도구와 설정을 선택하기로 했어요.기준은 세 가지예요.호스트가 지원하는 실행 환경에서 안정적으로 동작해야 해요토스뱅크의 각 서비스는 자신의 지원 범위에 맞춰 패키지를 항상 트랜스파일해요. 그럼 최신 문법을 모두 사용해도 호스트 런타임에 문제가 없다고 보장할 수 있을까요?문법은 호스트의 트랜스파일러가 해당 문법 변환을 지원해야 하고, API는 실행 환경에서 제공하거나 폴리필로 추가해야 해요. 예를 들어 rolldown의 문법 변환 관련 이슈에서는 당시 oxc가 ES2025의 일부 정규식 문법을 구형 환경용으로 변환하지 못한다는 점을 짚었어요. 즉 최종 호스트가 낮은 target을 지정하더라도 도구가 지원하지 않는 변환까지 수행되지는 않는 거예요.폴리필에도 한계가 있어요. 예를 들어 Proxy는 이를 지원하지 않는 엔진에서 폴리필만으로 전체 동작을 구현할 수 없어요. 폴리필 라이브러리를 추가하는 것만으로 모든 API를 사용할 수 있게 되는 것은 아니에요.따라서 문법은 호스트의 변환 도구가 처리할 수 있는지, API는 대상 브라우저 또는 호스트의 폴리필이 제공할 수 있는지를 각각 확인해야 해요.트랜스파일링을 호스트에 맡기더라도 호환성 문제는 패키지 개발 단계에서 미리 확인해야 해요. 그래서 호스트의 API 지원 범위를 타입 검사에 반영했어요.다만 TypeScript 설정만으로 호환성을 모두 확인할 수는 없으므로, 실제 API 지원 여부와 필요한 문법 변환이 가능한지도 확인해야 해요.배포 후에도 원본 코드의 의도가 유지되어야 해요호스트는 자신의 실행 환경에 맞춰 패키지 코드를 변환하고 번들링해요. 저희는 이 작업을 호스트에 맡기고, 패키지 빌드에서는 원본의 문법과 모듈 구조를 최대한 유지하기로 했어요.문법 변환은 호스트에 맡겨요패키지를 사용하는 서비스마다 지원하는 브라우저와 런타임이 달라요. 따라서 같은 패키지 코드라도 호스트에 따라 필요한 문법 변환이 달라질 수 있어요.예를 들어 use...