shiwoo.dev logoshiwoo.dev

뉴스레터about me
  • GitHub
  • LinkedIn
  • Email
© 2026 Shi Woo, Park (custardcream98)
All rights reserved.
← 지난 이슈

프론트엔드 뉴스레터

#35

2026년 11월 10일4개 소식

이번 이슈 한눈에

  • Next.js 16.3.0과 16.3.4에서 각각 다른 원인의 메모리 누수를 겪은 팀이 TanStack Start로 옮긴 과정을 공개했어요
  • Nuxt의 서버 엔진 Nitro v3가 RC에 도달해 API를 고정하고 설치 크기를 약 15분의 1로 줄였어요
  • CSS만으로 masonry 레이아웃을 만드는 display: grid-lanes 실전 가이드가 나왔어요. 지금은 Safari에서만 동작합니다
  • npm의 이름 유사도 필터가 정상적인 새 패키지 이름 estee를 403으로 막았고, 지원팀도 차단을 풀어 주지 않았어요
  1. 01

    harrisonmilbradt.com

    Next.js 16.3 메모리 누수 끝에 TanStack Start로 옮긴 팀의 기록

    한 팀이 Next.js 16.3.0과 16.3.4에서 서로 다른 이유로 운영 서버 메모리가 계속 늘어나는 문제를 겪었어요. 16.3.4에서는 use cache 캐시 적중 시 Next.js가 캐시된 스트림을 tee()로 둘로 나누는데, 읽지 않는 두 번째 갈래가 계속 남아 데이터가 쌓였습니다. 메모리는 결국 V8 힙 한도를 넘었고, 작성자는 이 문제를 재현하는 최소 저장소를 공개했어요.

    이 팀은 AWS ECS에서 운영하던 Next.js를 Cloudflare로 옮기려 했고, 먼저 Next.js 앱을 Cloudflare에서 실행하게 해 주는 OpenNext를 시도했어요. 처음엔 번들 크기 문제로 막혔고, 이후 한 번 실행했지만 제대로 동작하지 않아 포기했습니다. 그다음 두 프레임워크가 같은 브랜치에서 돌아가도록 호환 레이어를 만들고, 수백 개 URL의 상태 코드·리다이렉트·헤더를 비교하며 TanStack Start(Cloudflare Workers)로 전환했어요. 전환 PR은 약 1,000개 파일을 수정했고 1만 개가 넘는 테스트를 실행했어요.

    • 전환 뒤 로그인 페이지와 홈페이지의 모바일 Lighthouse 점수가 올랐지만, 작성자는 이 향상이 Next.js를 걷어낸 뒤 진행한 정리 PR에서 나왔고 Worker 운영 빌드를 로컬에서 측정한 값이라 Next.js와 TanStack Start의 비교로 읽으면 안 된다고 밝혔어요. 전환 2주쯤 뒤 TanStack Start 보안 권고가 나온 일도 단점으로 남겼습니다.
    원문 읽기 ↗
  2. 02

    nitro.build

    Nuxt의 서버 엔진 Nitro v3가 RC에 도달했어요

    Nitro는 Nuxt 등이 서버 코드를 빌드하고 여러 배포 환경에 맞춰 내보낼 때 쓰는 서버 툴킷이에요. v3가 정식 출시 직전 단계인 RC에 도달하면서 API를 정리해 고정했어요. 외부 의존성은 v2의 338개에서 6개로 줄었고, 설치 크기도 약 69MB에서 4.7MB로 15분의 1 수준이 됐습니다. 빌드 도구와 드라이버는 필요할 때 설치하는 방식으로 바뀌었어요.

    Vite 설정에 nitro()를 추가하면 별도 설정 없이 Vitest로 라우트를 테스트할 수 있어요. 빌드 없이 소스를 바로 운영 서버로 실행하는 nitro serve도 추가됐지만 아직 실험 기능입니다.

    • Node.js 22.22.0 이상이 필요하고, 캐시가 기본으로 메모리에 저장되는 등 동작 변경과 이름 변경이 있어요. beta 사용자나 Vercel·Cloudflare·Netlify에 배포하는 팀은 마이그레이션 가이드를 확인해야 합니다.
    원문 읽기 ↗
  3. 03

    piccalil.li

    CSS만으로 masonry 레이아웃을 만드는 Grid Lanes

    높이가 다른 카드를 빈틈없이 쌓는 masonry 레이아웃은 그동안 JavaScript로 위치를 계산해야 했어요. display: grid-lanes를 쓰면 한 방향의 트랙만 정하고, 다른 방향의 배치는 브라우저가 알아서 채웁니다. 이 글은 배치 규칙, 가로 방향 레이아웃, subgrid와 함께 쓰는 방법까지 다루는 실전 가이드예요.

    지금은 Safari 26.4 이상에서만 동작하고 다른 엔진은 구현 중이라, 지원하지 않는 브라우저용으로 단순한 대체 레이아웃을 함께 둬야 해요.

    • 화면에 보이는 순서가 HTML 순서와 달라질 수 있어요. 스크린 리더는 HTML 순서를 따르니 그 순서로 읽어도 내용이 자연스러운지 확인해야 합니다.
    .masonry {
      display: grid-lanes;
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
      gap: 1rem;
    }
    원문 읽기 ↗
  4. 04

    smoores.dev

    npm 이름 유사도 필터가 정상적인 새 패키지 이름을 막는 사례

    npm은 유명 패키지와 이름을 비슷하게 지어 실수로 설치하게 만드는 타이포스쿼팅을 막으려고, 이름이 비슷한 새 패키지의 게시를 거부해요. 한 개발자가 estee라는 CLI를 게시하려다 Package name too similar to existing packages espree,testem 오류와 함께 403 응답을 받았습니다.

    작성자는 npm이 글자 2개 이내만 다른 이름을 막는 것으로 추정하고, 이 기준이면 짧은 이름 상당수가 걸린다고 지적해요. npm 지원팀은 이전에 다른 이름의 차단을 풀어 준 적이 있지만, 이번에는 자동 차단을 우회할 수 없다며 거절했어요. 작성자는 결국 estie로 이름을 바꿀 계획입니다.

    • 차단 기준은 npm이 공개한 규칙이 아니라 작성자가 오류 사례로 추정한 내용이에요.
    원문 읽기 ↗

다음 이슈 받아보기

읽어볼 만한 프론트엔드 소식과 글을 골라 보내드립니다.

언제든 구독을 취소할 수 있어요.

← 뉴스레터 #34 · 2026-11-08