Skip to content

Instantly share code, notes, and snippets.

@leedc0101
Created February 25, 2026 01:03
Show Gist options
  • Select an option

  • Save leedc0101/2f17a46e5d01661ad6d56d54920f6512 to your computer and use it in GitHub Desktop.

Select an option

Save leedc0101/2f17a46e5d01661ad6d56d54920f6512 to your computer and use it in GitHub Desktop.
frontend-briefing-2026-02-25-KST

원문 제목: How we rebuilt Next.js with AI in one week 원문 링크: https://blog.cloudflare.com/vinext/ 번역 생성일: 2026-02-25 KST

(길이상 요약 번역)

AI로 1주일 만에 Next.js 대체 구현(vinext)을 만든 이야기

Cloudflare는 Next.js를 다른 서버리스 환경에 배포할 때 생기는 마찰(출력 포맷 호환, OpenNext 유지 부담, dev 환경 불일치)을 줄이기 위해, **Next.js API 표면을 Vite 위에서 다시 구현한 vinext**를 공개했습니다.

핵심 주장:

  • next 대신 vinext로 교체해도 기존 app/, pages/, next.config.js를 최대한 유지할 수 있도록 설계
  • Cloudflare Workers 배포를 vinext deploy 한 번으로 처리
  • 초기 벤치마크에서 빌드 시간/번들 크기 개선을 확인

왜 새로 만들었나

기존 방식(OpenNext)은 Next.js 산출물을 역해석해 플랫폼에 맞추는 구조라서:

  • Next.js 버전 변화에 취약
  • 호환 유지 비용이 큼
  • 개발 단계에서 Node 종속성 때문에 플랫폼 고유 API 테스트가 어려움

vinext는 “어댑터”가 아니라 “재구현” 접근을 택했습니다.

벤치마크(원문 기준)

같은 33개 라우트 앱으로 비교했을 때:

  • 빌드 속도: Next.js 대비 최대 4.4배 빠름(실험 환경 기준)
  • 클라이언트 번들(gzip): 최대 57% 감소

작성자는 이 수치를 “방향성 지표”로 봐야 한다고 명시합니다.

배포/캐시 전략

  • Workers에 1커맨드 배포
  • KV 기반 캐시 핸들러로 ISR 유사 흐름 제공
  • 캐시 백엔드 교체 가능(R2 등)

즉, 런타임/캐시를 플랫폼 특성에 맞게 바꾸기 쉬운 구조를 목표로 합니다.

아직 실험 단계

  • 프로젝트는 experimental
  • 대규모 트래픽 검증은 제한적
  • 다만 테스트 수(유닛/E2E)가 많고, Next.js 테스트 일부를 포팅했다고 설명

프리렌더링 관점

  • 현재는 정적 사전 생성보다 요청 후 캐시(ISR) 중심
  • 실험 기능으로 “트래픽 기반 프리렌더링(TPR)” 제안
    • 실제 유입이 많은 경로만 배포 시 선렌더
    • 롱테일 페이지는 요청 시 생성/캐시

대형 카탈로그형 사이트에서 빌드 시간 폭증을 줄이려는 아이디어입니다.

AI 개발 프로세스 회고

작성자는 “코드 대부분을 AI가 작성했지만, 사람이 아키텍처/우선순위/품질 게이트를 강하게 잡아야 한다”는 점을 강조합니다.

운영 방식:

  1. 작업 단위 정의
  2. AI가 구현+테스트 작성
  3. 테스트 실패 로그를 다시 AI에 피드백
  4. 반복

핵심 메시지:

  • AI만으로 자동 완성이 아니라, 명확한 스펙 + 테스트 + 리뷰 루프가 성패를 가름
  • 대형 프레임워크급 작업도 “검증 가능한 범위로 쪼개면” 실행 가능해졌다는 사례

요약

이 글은 단순 성능 자랑보다,

  • Next.js 배포 생태계의 구조적 문제,
  • Vite 기반 재구현 전략,
  • AI 시대의 프레임워크 개발 방식(사람이 가드레일을 쥐는 모델) 을 함께 보여주는 사례입니다.

원문 제목: The React Foundation: A New Home for React Hosted by the Linux Foundation 원문 링크: https://react.dev/blog/2026/02/24/the-react-foundation 번역 생성일: 2026-02-25 KST

React Foundation 공식 출범

React 팀은 React Foundation이 리눅스 재단(Linux Foundation) 산하 독립 재단으로 공식 출범했다고 발표했습니다.

핵심 내용:

  • React, React Native, JSX 관련 프로젝트의 소유권이 Meta 단독에서 재단 구조로 전환
  • 기술 방향(technical governance)은 재단 이사회와 별도로, React 기여자/메인테이너 중심으로 유지 예정

창립 플래티넘 멤버

다음 8개 조직이 플래티넘 창립 멤버로 참여:

  • Amazon
  • Callstack
  • Expo
  • Huawei
  • Meta
  • Microsoft
  • Software Mansion
  • Vercel

재단은 각 멤버 대표로 구성된 이사회 체계로 운영되며, Seth Webster가 executive director를 맡습니다.

앞으로의 전환 작업

향후 몇 달간 진행 예정:

  • React 기술 거버넌스 구조 최종화
  • 저장소/웹사이트/인프라의 재단 이관
  • 생태계 지원 프로그램 검토
  • 다음 React Conf 준비

글의 결론

이 발표의 핵심은 “React가 더 넓은 생태계 거버넌스로 넘어간다”는 점입니다. 즉, 특정 회사 중심 소유에서 커뮤니티·조직 연합형 운영으로 무게중심을 옮기려는 변화입니다.

원문 제목: Porting TeX to TypeScript using LLMs 원문 링크: https://hublog.hubmed.org/archives/002032 번역 생성일: 2026-02-25 KST

LLM으로 TeX를 Pascal에서 TypeScript로 포팅한 기록

이 글은 고전 시스템(TeX)의 Pascal 코드를 TypeScript로 옮긴 실험을 설명합니다.

배경

TeX는 오래된 제약(메모리 한계, 문자열 처리 제약) 아래 설계됐고,

  • 전역 상태
  • goto 기반 흐름
  • Pascal 특유 문법 을 많이 사용합니다.

하지만 작성자는 Pascal 타입 구조가 TypeScript와 의외로 잘 대응된다고 보고, “직접 번역 포팅” 방식을 시도했습니다.

왜 LLM이 가능해졌나

글의 주장:

  • 최신 모델은 대형 코드베이스 문맥 유지 능력이 이전보다 좋아짐
  • 단순 변환이 아니라 체크리스트/수정-테스트 루프까지 수행 가능
  • 다만 대규모 일관성 문제는 여전히 있어 후처리(리팩터/코드모드)가 필요

즉, “한 번에 완벽 변환”보다 “변환 + 검증 자동화” 조합이 현실적이라는 관점입니다.

검증 전략

포팅 정확도를 위해 반드시 필요한 것으로:

  • 원본 동작을 기준(gold standard)으로 삼고
  • 함수 단위 테스트를 병행 생성해
  • TypeScript 구현이 원본과 같은 결과를 내는지 계속 대조

이 부분이 핵심입니다. 단순 코드 생성보다 동작 동치성 검증을 우선한 접근입니다.

데모/소스

  • 데모: Plain TeX를 컴파일해 DVI를 만들고, WASM dvisvgm으로 SVG 렌더링
  • 소스: tex-codex 저장소 공개

미래 확장

글은 pdfTeX/XeTeX/LuaTeX 계열, WebAssembly 포팅, 타 언어 재구현 사례도 함께 언급하며, 이 작업을 “역사적 코드베이스를 현대 웹 실행환경으로 옮기는 실전 사례”로 제시합니다.

요약

이 글의 실무 포인트는 명확합니다.

  • 오래된 대형 코드의 언어 마이그레이션에서
  • LLM은 번역기보다 검증 루프 가속기로 써야 하고
  • 테스트 기반 동치 검증이 없으면 신뢰할 수 없다는 점입니다.

원문 제목: From Legacy HTML to React+Vite+TS: How I Migrated a 10-Screen Home Dashboard Without Breaking It 원문 링크: https://dev.to/agent_paaru/from-legacy-html-to-reactvitets-how-i-migrated-a-10-screen-home-dashboard-without-breaking-it-40ge 번역 생성일: 2026-02-25 KST

레거시 HTML 대시보드를 React+Vite+TypeScript로 이전한 실전기

작성자는 개인 홈 대시보드(조명, 카메라, 지도, 캘린더, 차량 상태 등)를 서버 렌더링 HTML 10개 화면 구조에서 SPA로 옮겼습니다.

기존 문제

  • 화면별 HTML 파일 분리
  • 네비 링크 배열 중복 복붙
  • API 응답 타입 없음
  • 테스트 없음

작은 변경도 여러 파일을 동시에 고쳐야 했고, 런타임 버그가 잦았습니다.

이전 전략(4단계)

A. Discovery: 기존 기능/엔드포인트를 체크리스트로 명세 B. Foundation: React+Vite+TS 기반과 공통 UI 프리미티브 구축 C. Migration: 10개 화면 점진 이전 D. Hardening: 계약 테스트/E2E/시각 베이스라인/배포 게이트

중요하게, 기존 앱(/)을 유지하고 새 앱(/new/)을 병행 운영해 롤백 경로를 확보했습니다.

구현 중 핵심 결정

  • 반응형 레이아웃은 JS 조건 분기 대신 CSS Grid로 통일
  • 화면별 API 모듈을 타입화해서 null/string 불일치 버그를 조기 발견
  • 내비게이션은 nav.ts 단일 소스로 통합

테스트 체계

4개 레이어:

  1. Contract tests(16)
  2. E2E tests(25)
  3. Visual baselines(10)
  4. Pre-deploy gate(11개 스모크 체크)

“게이트 실패 시 배포 금지” 원칙으로 운영.

컷오버에서 터진 실제 이슈

  • Vite base 경로(/new/) 잔존으로 홈 공백
  • React Router 경로가 /new/*로 남아 링크 오작동
  • 페이지별 복붙 네비 배열이 일부 잔존

교훈: 컷오버는 한 번의 스위치가 아니라,

  • 빌드 설정
  • 라우팅
  • 공통 링크 참조 를 원자적으로 같이 바꿔야 한다.

결과

  • 빌드 8초 미만
  • 계약/E2E/시각 회귀/배포 게이트 모두 통과
  • 기존 약 4,200줄 HTML을 아카이브, 타입드 React 약 3,800줄로 재구성

요약

이 글은 “프레임워크 갈아타기”보다,

  • 단계 분리,
  • 롤백 가능 구조,
  • 타입 선행,
  • 배포 전 자동 게이트 가 실제 마이그레이션 실패율을 낮춘다는 점을 잘 보여줍니다.

원문 제목: Goodbye innerHTML, Hello setHTML: Stronger XSS Protection in Firefox 148 원문 링크: https://hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/ 번역 생성일: 2026-02-25 KST

Firefox 148: innerHTML 대신 setHTML()로 기본 보안 강화

Mozilla는 Firefox 148에서 표준화된 Sanitizer API를 탑재하며, XSS 방어를 더 쉽게 적용할 수 있다고 설명합니다.

문제 배경

XSS는 오랫동안 상위권 웹 취약점입니다. 사용자 입력 HTML을 안전하게 다루기 어렵고, 기존 CSP는 강력하지만 도입/운영 난도가 높아 광범위 적용이 제한적이었습니다.

Sanitizer API 핵심

setHTML()은 HTML 삽입 과정에 sanitization을 기본 결합합니다.

예시 개념:

  • 위험한 onclick/의심 태그를 제거
  • 허용 가능한 안전한 HTML만 DOM에 반영

즉, 기존 innerHTML 치환 코드보다 실수 여지를 줄입니다.

커스텀 가능성

기본 정책이 너무 엄격/느슨할 경우, 옵션으로 허용 태그·속성을 조정할 수 있습니다.

Trusted Types와 조합

setHTML() 도입 후 Trusted Types를 함께 적용하면, 허용된 삽입 경로만 남기고 다른 위험 경로를 차단하기 쉬워집니다.

결과적으로 회귀(regression)성 XSS를 줄이는 운영 모델을 만들기 좋습니다.

실무 포인트

이 글의 메시지는 단순합니다.

  • 대규모 리라이트 없이도
  • innerHTMLsetHTML() 중심 전환만으로
  • 기본 보안 수준을 한 단계 높일 수 있다.

보안 전담팀이 작은 조직에도 현실적인 출발점이라는 주장입니다.

원문 제목: Stop Using /init for AGENTS.md 원문 링크: https://addyosmani.com/blog/agents-md/ 번역 생성일: 2026-02-25 KST

/init로 AGENTS.md 자동 생성을 멈추라는 제안

글의 핵심 주장은 다음과 같습니다.

  • 자동 생성 AGENTS.md는 코드베이스에서 이미 찾을 수 있는 정보를 중복해, 성능/비용을 악화시킬 수 있다.
  • 사람 손으로 쓴 파일도 “비발견성 정보”만 담을 때 의미가 있다.

연구 요약(글에서 인용)

서로 다른 연구 결과를 비교하면 결론이 하나로 모입니다.

  1. 어떤 AGENTS.md는 속도/토큰을 줄임
  2. 하지만 LLM 자동 생성 문맥 파일은 정확도 하락 + 비용 증가가 관찰되기도 함
  3. 문서가 거의 없는 저장소에서는 자동 문맥도 일부 도움

즉, 문제는 “AGENTS.md 존재 여부”가 아니라 “내용 품질과 중복도”입니다.

왜 /init 산출물이 문제인가

자동 파일은 보통 다음을 길게 적습니다.

  • 디렉터리 구조
  • 스택 개요
  • 모듈 설명

이 정보는 에이전트가 이미 리포를 스캔하며 얻을 수 있는 내용이라, 중복 컨텍스트가 오히려 추론 비용을 늘립니다.

무엇을 적어야 하나

글은 다음 유형만 남기라고 권합니다.

  • 코드만 보고 알기 어려운 실행 규칙(예: uv 필수)
  • 잘못 건드리기 쉬운 금지/주의 지점
  • 관습과 다른 로컬 운영 룰

실무 필터: “에이전트가 코드 읽고 스스로 알 수 있으면, AGENTS.md에서 지운다.”

구조적 제안: 단일 루트 파일 한계

대규모 리포에서는 루트 한 장보다,

  • 라우팅/프로토콜 역할의 상위 문서
  • 작업 유형별 분리된 하위 문서(온디맨드 로드)
  • 문서 최신성 유지용 유지보수 에이전트 같은 계층 구조가 더 적합하다는 주장입니다.

실무 요약

이 글은 AGENTS.md를 “영구 안내서”가 아니라 “코드베이스 냄새(불명확성) 임시 목록”으로 보라고 제안합니다.

즉,

  • 같은 실수가 반복되면 문서를 늘리기보다 코드/도구를 먼저 고치고
  • 꼭 필요한 예외 규칙만 짧게 남기는 방식이 AI 에이전트 운영 효율에 유리하다는 결론입니다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment