nextjs

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의 결합이 프레임워크의 구조적 한계를 얼마나 빠르게 극복할 수 있는지 보여주는 사례입니다. 성능 최적화와 서버리스 배포 편의성을 동시에 잡고자 하는 개발자들에게 유망한 대안이 될 것으로 보입니다.

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)으로 삼는 자동화 문서를 구축하면, 불필요한 커뮤니케이션 비용을 줄이고 퍼널 전체의 비즈니스 로직을 명확하게 시각화할 수 있습니다.