프론트엔드 뉴스레터
#35
이번 이슈 한눈에
- 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으로 막았고, 지원팀도 차단을 풀어 주지 않았어요
- 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 보안 권고가 나온 일도 단점으로 남겼습니다.
- 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에 배포하는 팀은 마이그레이션 가이드를 확인해야 합니다.
- 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; } - 04
smoores.dev
npm 이름 유사도 필터가 정상적인 새 패키지 이름을 막는 사례
원문 읽기 ↗npm은 유명 패키지와 이름을 비슷하게 지어 실수로 설치하게 만드는 타이포스쿼팅을 막으려고, 이름이 비슷한 새 패키지의 게시를 거부해요. 한 개발자가
estee라는 CLI를 게시하려다Package name too similar to existing packages espree,testem오류와 함께 403 응답을 받았습니다.작성자는 npm이 글자 2개 이내만 다른 이름을 막는 것으로 추정하고, 이 기준이면 짧은 이름 상당수가 걸린다고 지적해요. npm 지원팀은 이전에 다른 이름의 차단을 풀어 준 적이 있지만, 이번에는 자동 차단을 우회할 수 없다며 거절했어요. 작성자는 결국
estie로 이름을 바꿀 계획입니다.- 차단 기준은 npm이 공개한 규칙이 아니라 작성자가 오류 사례로 추정한 내용이에요.