toss·2026년 8월 10일·5분 읽기큐레이션 요약

모노리포 희망편, 절망의 리포가 희망의 리포로 부활하기까지 걸린 1년

토스는 100명 이상의 프론트엔드 엔지니어가 여러 제품을 개발하면서도 React 19, Next.js 15 등 동일한 개발환경을 유지하기 위해 모노리포와 의존성 카탈로그를 활용하고 있습니다. 단순히 모노리포를 사용하는 것만으로는 서비스별 의존성 버전 파편화와 느린 설치 속도 문제를 해결할 수 없었기 때문에, 핵심 라이브러리 버전을 표준화하는 카탈로그 전략을 도입했습니다. 그 결과 의존성 규모와 설치 시간이 크게 줄었고, 플랫폼 변경과 최신 기술 도입도 더 안전하고 빠르게 진행할 수 있게 되었습니다. ## 모노리포가 제공한 개발 일관성 - 토스의 모바일 제품 코드는 하나의 모노리포로 통합되어 있습니다. - 모든 서비스가 React, Next.js, TypeScript, 번들러, Linter 등 유사한 버전을 사용하도록 관리되었습니다. - 이를 통해: - React Concurrent Mode, React Server Components 같은 최신 기능을 여러 서비스에서 활용할 수 있습니다. - 서비스 간 공통 코드와 플랫폼 라이브러리를 쉽게 공유할 수 있습니다. - 플랫폼 변경사항을 전체 서비스에 일관되게 전파할 수 있습니다. - 제품이 많아도 동일한 개발환경을 유지해 사용자 경험과 개발자 경험을 함께 개선하는 것이 목표였습니다. ## 모노리포만으로 해결되지 않은 문제 - 서비스마다 React와 각종 라이브러리의 버전이 달라 의존성 트리가 복잡했습니다. - 오래된 서비스는 낡은 개발환경을 계속 사용하게 되어 개발 서버 속도와 API 사용성에서 큰 차이가 났습니다. - 의존성 종류와 버전이 많아 설치에 캐시가 있어도 1분 이상 걸리는 경우가 있었습니다. - 플랫폼 팀은 다양한 React 및 라이브러리 조합을 모두 테스트해야 했기 때문에 공통 라이브러리 변경이 어려웠습니다. - 서비스 개발자도 업데이트 후 문제가 발생할 가능성을 우려해 플랫폼 라이브러리 업데이트를 기피했습니다. - 결과적으로 오래된 의존성이 고착되고, 서비스와 플랫폼 양쪽의 유지보수 비용이 커졌습니다. ## 폴리리포의 한계 - 모노리포를 여러 개의 독립적인 리포지토리로 나누면 각 저장소의 의존성과 설치 부담은 줄어듭니다. - 그러나 다음 문제는 오히려 남거나 심해질 수 있습니다. - 서비스별 개발환경 파편화 - 공통 코드 공유와 업데이트 비용 증가 - 서비스마다 다른 개발 경험 - 플랫폼 변경사항의 일관된 전파 어려움 - 토스는 지속적으로 플랫폼을 유지보수하고 최신화해야 하므로, 폴리리포보다는 기존 모노리포의 의존성 문제를 해결하는 방향을 선택했습니다. ## 핵심 해결책: 의존성 버전 표준화 - 가장 근본적인 문제를 “서비스마다 핵심 의존성 버전이 모두 다르다”는 점으로 정의했습니다. - React, 컴포넌트 라이브러리(TDS), 상태 관리 라이브러리(Jotai), TypeScript, ESLint 등 약 10~20개의 주요 라이브러리를 표준화 대상으로 삼았습니다. - 핵심 의존성 버전을 통일하면: - 설치해야 할 의존성의 종류와 개수가 줄어듭니다. - 모든 서비스에서 비슷한 개발 경험을 제공합니다. - 플랫폼 라이브러리의 테스트 환경이 단순해집니다. - Breaking change에 대응하는 코드 변환 스크립트나 호환성 레이어를 만들기 쉬워집니다. - 서비스 개발자가 검증된 최신 라이브러리로 업데이트할 유인이 커집니다. - 대부분의 개발자는 “React가 필요하다”고 결정할 뿐 특정 버전을 직접 선택할 필요는 없다는 점도 표준화의 근거가 되었습니다. ## 카탈로그를 통한 버전 관리 - 토스는 서비스에서 권장하는 표준 라이브러리 버전 집합을 **카탈로그(Catalog)**라고 정의했습니다. - pnpm이나 Yarn의 카탈로그 기능을 사용해 모노리포의 공통 버전을 선언합니다. ```yaml catalog: react: ^18.2.0 jotai: ^2.18.1 ``` - 각 서비스는 `catalog:` 프로토콜로 버전을 참조합니다. ```json { "dependencies": { "react": "catalog:", "jotai": "catalog:" } } ``` - 안정 버전과 실험 버전을 별도 카탈로그로 관리할 수도 있습니다. ```yaml catalogs: stable: react: ^18.2.0 jotai: ^2.18.1 beta: react: ^19.1.0 jotai: ^2.20.1 ``` - 이후 서비스는 `catalog:stable`처럼 특정 카탈로그를 선택할 수 있습니다. - React, Next.js, TypeScript, TDS, 토스 앱 SDK 등 핵심 개발 라이브러리부터 카탈로그에 편입했습니다. ## 카탈로그 도입과 운영 방식 - 카탈로그 패키지는 릴리즈 전에 주요 사용 사례를 테스트 페이지로 검증했습니다. - 신규 서비스는 최신 카탈로그를 자동으로 참조하도록 스캐폴딩했습니다. - 개발자가 `yarn add`로 직접 패키지를 추가해도 카탈로그 버전을 사용하도록 했습니다. - 실수로 카탈로그를 사용하지 않는 경우를 CI에서 자동 검출했습니다. - 기존 서비스는 코드 오너와 함께 의존성을 카탈로그 참조 방식으로 일괄 마이그레이션했습니다. - 카탈로그 버전을 변경할 때는 기존 카탈로그를 직접 수정하지 않고 새 버전을 발행했습니다. - 일부 서비스에서 먼저 검증 - 안정성 확인 - 전체 서비스가 새 카탈로그로 수동 마이그레이션 - 업그레이드 비용을 낮추기 위해 코드 수정 스크립트와 AI Skill도 제공했습니다. ## 카탈로그 적용 후의 성과 - 서비스별 의존성 버전이 통일되면서 전체 의존성 규모가 크게 감소했습니다. - Yarn PnP의 `.pnp.cjs` 파일 크기: - 96MB → 15MB - 약 84% 감소 - 개발 서버 실행 시간: - 26.7초 → 20.3초 - 약 23% 개선 - 전체 의존성 설치 시간: - 528.4초 → 249.9초 - 약 52% 감소 ## 검증된 의존성과 구조적 개선 - 카탈로그에 포함된 패키지는 최소 한 개 이상의 서비스에서 동작을 검증해야 하므로 사용 신뢰도가 높아졌습니다. - 패키지 간 의존성도 엄격하게 관리할 수 있게 되었습니다. - 예를 들어 A 패키지가 B의 v1에 의존하는데 서비스가 B의 v2를 사용하는 식의 불일치를 예방할 수 있습니다. - 어떤 서비스가 어떤 버전을 사용하는지 파악하기 쉬워져 패키지 개발자가 대규모 구조 개선을 추진하기 수월해졌습니다. - 그 결과 RSC, TypeScript 7, Rspack, E2E 테스트 같은 급진적인 기술 개선도 비교적 빠르고 안정적으로 도입할 수 있었습니다. - 플랫폼 패키지의 개선사항이 서비스에 전달되는 경로가 표준화되어, 서비스가 최신 플랫폼의 혜택을 더 빠르게 받을 수 있는 기반도 마련되었습니다. ## 실용적인 결론 모노리포의 효과를 극대화하려면 저장소를 하나로 합치는 것만으로는 부족합니다. 핵심 의존성의 버전을 카탈로그로 표준화하고, CI 검증·자동 마이그레이션·단계적 릴리즈를 함께 운영해야 서비스 간 일관성, 설치 성능, 플랫폼 업데이트 속도를 동시에 개선할 수 있습니다.

원문 읽기(새 탭에서 열림)

nextjsReactTypeScriptmonorepo+3

cloudflare·2026년 2월 24일원문

AI로 일주일 만에 Next. (새 탭에서 열림)

Cloudflare의 한 엔지니어가 AI 모델을 활용해 단 일주일 만에 Next.js를 Vite 기반으로 재구현한 'vinext'를 공개했습니다. vinext는 Next.js의 복잡한 빌드 아키텍처와 타 플랫폼 배포 시 발생하는 파편화 문제를 해결하기 위해 등장했으며, 기존 Next.js 코드를 그대로 유지하면서도 최대 4배 빠른 빌드 속도와 57%의 번들 크기 감소를 달성했습니다. 이는 AI를 활용해 기존 프레임워크의 API 표면을 완전히 새롭게 구현함으로써 서버리스 환경에서의 배포 효율성을 극대화한 사례입니다. ### 기존 Next.js 배포 및 개발 환경의 문제점 * Next.js는 Turbopack이라는 독자적인 툴체인을 사용하기 때문에, Cloudflare나 AWS Lambda 같은 서버리스 환경에 배포하려면 빌드 결과물을 해당 플랫폼에 맞게 재가공하는 복잡한 과정이 필요합니다. * 기존의 해결책인 OpenNext는 Next.js의 빌드 결과물을 역공학(Reverse-engineering)하여 대응해왔으나, 프레임워크 버전 업데이트 시 구조가 변경되면 대응이 늦어지거나 기능이 깨지는 등 취약한 구조를 가집니다. * 로컬 개발 환경은 Node.js에서 실행되는 반면 실제 배포는 에지 런타임에서 이루어지는 불일치 문제로 인해, Durable Objects나 AI 바인딩 같은 플랫폼 전용 API를 개발 단계에서 테스트하기가 매우 어렵습니다. ### Vite 기반의 완전한 재구현, vinext * vinext는 Next.js의 출력물을 수정하는 방식이 아니라, Vite 위에서 Next.js의 API 표면(라우팅, SSR, RSC, Server Actions, 미들웨어 등)을 처음부터 다시 구현한 클린 구현체입니다. * 사용자는 기존의 `app/`, `pages/` 디렉토리와 `next.config.js`를 그대로 사용할 수 있으며, 스크립트에서 `next`를 `vinext`로 바꾸는 것만으로 즉시 교체가 가능한 'Drop-in replacement' 형태를 지향합니다. * Vite의 환경 API(Environment API)를 활용하여 특정 플랫폼에 종속되지 않는 빌드 결과물을 생성하며, 향후 Rust 기반 번들러인 Rolldown이 도입되면 더 높은 성능 향상이 기대됩니다. ### 성능 지표 및 Cloudflare 최적화 기능 * 33개의 라우트를 포함한 앱 기준 벤치마크 결과, Next.js 16 대비 빌드 시간은 약 4배 단축되었고 클라이언트 번들 크기(Gzip 기준)는 57% 감소하는 성과를 보였습니다. * `vinext deploy` 명령어를 통해 소스 코드에서 Cloudflare Workers로 즉시 배포가 가능하며, Cloudflare KV를 활용한 캐시 핸들러를 통해 ISR(Incremental Static Regeneration) 기능을 기본적으로 제공합니다. * 개발 단계부터 실제 배포 환경과 동일한 `workerd` 런타임에서 앱이 구동되므로, 플랫폼 전용 기능을 별도의 워크아라운드 없이 로컬에서 완벽하게 테스트할 수 있습니다. ### 생태계 협력 및 향후 전망 * vinext 코드의 약 95%는 순수 Vite 기반으로 작성되어 있어 특정 호스팅 업체에 종속되지 않으며, Vercel을 포함한 타 플랫폼으로의 이식도 매우 용이한 구조입니다. * 현재 이 프로젝트는 실험적인 단계(Experimental)로 대규모 트래픽에서의 검증이 더 필요하지만, 이미 1,700개 이상의 테스트를 통과하며 안정성을 확보해 나가고 있습니다. * Cloudflare는 타 호스팅 제공업체들과 협력하여 이 툴체인을 확장할 계획이며, 오픈 소스 커뮤니티의 참여를 통해 다양한 배포 타겟을 확보하고자 합니다. **결론:** vinext는 현대적인 빌드 도구와 AI의 결합이 프레임워크의 구조적 한계를 얼마나 빠르게 극복할 수 있는지 보여주는 사례입니다. 성능 최적화와 서버리스 배포 편의성을 동시에 잡고자 하는 개발자들에게 유망한 대안이 될 것으로 보입니다.

nextjsReactCloudflare Workers서버리스+4

toss·2025년 12월 23일원문

AST로 Outdated 없는 퍼널 문서 만들기 (새 탭에서 열림)

토스팀은 복잡한 판매자 입점 퍼널을 효율적으로 관리하기 위해 코드를 정적으로 분석하여 자동으로 업데이트되는 퍼널 문서를 구축했습니다. 기존의 수동 문서는 빈번한 코드 변경을 따라가지 못해 실효성을 잃었으나, `ts-morph`와 AST(Abstract Syntax Tree) 분석을 통해 코드와 100% 일치하는 흐름도를 생성할 수 있게 되었습니다. 이를 통해 개발자는 복잡한 조건부 분기와 페이지 이동 로직을 별도의 문서 작업 없이도 시각적으로 정확하게 파악할 수 있게 되었습니다. **수동 문서화의 한계와 정적 분석의 선택** * **문서의 파편화:** 수기로 작성된 다이어그램은 코드가 수정될 때마다 즉시 업데이트되지 않아 실제 동작과 문서가 불일치하는 'Outdated' 문제가 발생합니다. * **복잡한 분기 처리의 어려움:** 수십 개의 페이지와 80여 개의 조건부 분기를 시각적 도구로 일일이 표현하는 것은 휴먼 에러의 위험이 크고 관리가 불가능합니다. * **정적 분석 채택:** 런타임 분석은 모든 경로를 직접 실행해야 하는 번거로움이 있지만, AST를 활용한 정적 분석은 코드를 텍스트로 읽어 모든 잠재적 경로를 빠르고 안전하게 추출할 수 있습니다. **Navigation Edge 데이터 구조 설계** * **맥락 정보 포함:** 단순한 이동 경로(A → B)를 넘어, 이동 방식(`push` vs `replace`), 실행 조건, 쿼리 파라미터 등의 상세 데이터를 포함하는 `NavigationEdge` 인터페이스를 설계했습니다. * **추적 가능성 확보:** 코드 내 정확한 위치(`lineNumber`)와 호출 출처(`sourceType`)를 저장하여 다이어그램에서 실제 소스 코드로 즉시 연결될 수 있는 기반을 마련했습니다. **AST를 활용한 로직 추출 및 조건문 파싱** * **패턴 감지:** `ts-morph`를 사용하여 프로젝트 내 페이지 파일을 탐색하고, `router.push()` 또는 `router.replace()`와 같은 함수 호출 패턴을 감지합니다. * **상위 노드 추적:** 특정 이동 로직이 발견되면 AST의 부모 방향으로 거슬러 올라가 가장 가까운 `if`문이나 삼항 연산자의 텍스트를 추출함으로써 이동 조건(Condition)을 파악합니다. **커스텀 훅 및 URL 상수의 역추적** * **숨은 로직 탐색:** 페이지 컴포넌트 내부뿐만 아니라, `import` 구문을 분석하여 커스텀 훅 내부에 숨겨진 이동 로직까지 추적하여 데이터 누락을 방지합니다. * **상수 해독:** `URLS.FUNNEL.PAY_METHOD`와 같이 상수로 정의된 목적지를 실제 URL 경로로 변환하기 위해 상수 정의 파일을 별도로 파싱하여 매핑 테이블을 구축했습니다. **실용적인 결론** 복잡도가 높은 서비스일수록 문서와 코드의 동기화는 자동화되어야 합니다. `ts-morph`와 같은 도구를 활용해 소스 코드를 단일 진실 공급원(Single Source of Truth)으로 삼는 자동화 문서를 구축하면, 불필요한 커뮤니케이션 비용을 줄이고 퍼널 전체의 비즈니스 로직을 명확하게 시각화할 수 있습니다.

nextjsTypeScript웹 개발static-analysis+3