📝 Document 요약 및 번역

원문 - 14 web performance tips for 2025, 많은 사람들이 Lighthouse만 보고 잘못된 방향으로 최적화를 시작하는데, 진짜 사용자 데이터(RUM)를 먼저 봐야 함. LCP, CLS, INP

원본 영상 - Kilian Valkhof - Stop using JS for that:Moving features to CSS and HTML JavaScript 대신 HTML과 CSS만으로도 충분히 구현 가능한 기능들을 소개, 웹 개발에서 선언형 접근의 장점

원문 - How to write error messages that actually help users rather than frustrate them 사용자가 겪을 수 있는 에러 유형 고려하기, 사람처럼 말하기, 과도한 유머나 위트 피하기 (Whimsy 금지)

원문 - ECMAScript 2025 JavaScript standard takes shapeimport data from './data.json' assert { type: 'json' }; 형식 사용.JavaScript 환경에서 일관된 JSON 모듈 import.

* Software 1.0: 인간이 작성한 전통적인 코드 기반 프로그래밍 * Software 2.0: 신경망의 가중치(weight)를 생성하는 데이터 중심의 방식 (ex. 이미지 분류 모델) * Software 3.0: 프롬프트가 곧 프로그램이 되는 시대, LLM

* React 19 출시로 RSC(React Server Components) 등 대규모 변화 도입 * Meta와 Vercel이 공동 소유 및 개발 주체 * RSC 중심의 프레임워크 지향성으로 SPA 사용자와 충돌 발생

- 검색 파라미터는 상태다 - 검색 파라미터 작성은 더욱 치명적이다 - Nuqs 등 도구의 한계 - TanStack Router의 해결책 - 계층적 검색 파라미터 검증 - 검색 파라미터를 진짜 상태로 다루기 위한 조건

완벽한 정답은 없지만, 무대응은 최악이다 에러 처리 방식은 정답이 없다. 프로젝트 규모, 팀 문화, 코드 스타일에 따라 적절한 선택지가 다를 수 있다. 다만 가장 나쁜 것은 아무 것도 하지 않는 것이다. 중요한 건 그걸 어떻게 다룰지에 대한 전략이 있는가다

이번 버전에는 8가지 주요 기능이 추가되었으며, 특히 모듈 시스템의 개선과 Iterator 관련 기능이 크게 강화되었다. JSON 모듈을 지원하는 Import attributes, 함수형 프로그래밍을 지원하는 Iterator helper methods 등

JSON module scripts are now Baseline Newly available, Thomas Steiner는 모든 주요 브라우저에서 JSON 모듈 스크립트가 Baseline에 도달했음을 알렸습니다.

React에서 세밀한 반응성(fine-grained reactivity)을 구현하는 방법을 설명하는 튜토리얼이다. 전통적인 React의 컴포넌트 단위 리렌더링과 달리, 상태 변화시 정확히 필요한 부분만 업데이트하는 효율적인 시스템을 35줄 미만의 코드로 구현한다.

SVG란 무엇인가? Hello SVG: 코드로 시작하는 SVG SVG의 기본 도형 요소 Line (선) Rect (사각형) Circle (원) Ellipse (타원) Polygon (다각형) SVG를 스케일 가능하게 만들기: viewBox SVG의 스타일링: 표현 속성

각 항목은 프로그래머의 태도, 설계 원칙, 협업 방법, 학습 습관 등에 관한 97가지 실전 지침입니다.

지난 10여 년 동안 자바스크립트(JavaScript)는 브라우저라는 원래의 영역을 훌쩍 넘어, 클라우드·에지(Edge)·스마트폰·스마트TV·마이크로컨트롤러까지 사실상 모든 곳에서 실행되는 언어가 되었습니다.

올해의 톤 & 주제 CSS는 이제 단순한 스타일링 언어가 아니라 레이아웃·모션·접근성까지 포괄하는 현대적 툴킷으로 자리 잡았습니다. 특히 :has(), 컨테이너 쿼리, 서브그리드가 일상적 실무 기능으로 정착했음을 강조합니다.

원문 - https://github.com/zakirullin/cognitive-load/blob/main/README.ko.md

Instagram은 2010년 10월 출시 후 불과 1년 만에 1,400만 명의 유저를 확보했습니다.놀라운 점은, 이 모든 인프라를 단 3명의 엔지니어가 유지했다는 사실입니다.이 글에서는 Instagram이 빠르게 성장할 수 있었던 핵심 원칙과 기술 스택을 정리합니다.

OAuth는 2007년 Twitter에서 처음 제안된 표준입니다. 당시 요구사항은 “제3자 앱이 사용자의 비밀번호를 직접 알지 않고, 대신 사용자를 대신해 트윗을 올릴 수 있게 하는 것”이었습니다.

작고 단순한 팀이 “똑똑해 보이는” 팀보다 더 좋은 제품을 만들고 더 오래 살아남았다.단순함 > 영리함: 조기 마이크로서비스·분산·메시징 남발은 대부분 부메랑.보안은 눈앞에 있다: 가장 위험한 취약점은 대체로 “너무 쉽게 보이는 것” 이었다(발견 용이성=실제 위험도).

“뛰어난 개발자의 머릿속 구석에는 항상 어리석음이 숨어 있다.” — 아리스토텔레스풋건(foot-gun)이란, 자신이 스스로 발등을 쏘는 것처럼 좋아 보이지만 장기적으로는 해로운 습관/패턴을 말합니다.

"Fonts are not decoration. Fonts are infrastructure." 웹폰트는 단순히 “예쁜 글씨체”가 아닙니다. 성능, 접근성, 브랜드, 심지어 법적 문제까지 연결된 웹의 핵심 인프라입니다.

웹에서 색상을 다룰 때 가장 많이 쓰이는 모델은 rgb, hsl, hex입니다. 하지만 최근 몇 년 사이 OKLCH라는 새로운 색상 모델이 등장하면서 큰 주목을 받고 있습니다. OKLCH는 사람이 실제로 색을 인지하는 방식과 더 가깝게 설계된 모델입니다.

Context는 ‘변경될 때마다 Provider 아래 전부를 리렌더’하지 않는다. 바뀐 값을 실제로 읽는(consume) 컴포넌트만 리렌더된다.

왜 같은 “자식”이라도 props.children로 넘어온 경우와 컴포넌트 내부에서 직접 선언해 렌더한 경우에 리렌더링 행동이 달라지는가? 핵심은 “요소(React Element) 객체의 참조 안정성”과 “리컨실리에이션(bailout) 타이밍”이다.

침해 방식: 공격자는 유명 메인테이너 Josh Junon(Qix-)에게 support@npmjs.help 발신의 피싱 메일을 보내 계정·2FA를 탈취했다. npmjs.help는 사건 직전 등록된 npm 사칭 도메인이었다.

Atlassian이 The Browser Company(Arc·Dia 제작사) 인수 계약을 체결했다. 거래 금액은 현금 6억1천만 달러. 규제 승인 등 절차 후 FY2026 2분기(2025년 12월 말) 내 종결 예정.

요지는 간단하다. 코드를 먼저 쓰고 문서를 나중에 맞추지 말고, 실행 가능한 스펙을 먼저 쓰고 그 스펙이 코드·테스트·태스크를 끌고 가게 하자는 것.

여러 AI 코딩 에이전트(Copilot, Claude Code, Cursor, Windsurf, Aider, Gemini CLI, 등)를 한 프로젝트에서 동시에 쓸 때, 각 에이전트가 제각각 요구하는 규칙/가이드/설정 파일을 한 곳(.ruler/) 에서 관리.

바이브 코딩은 개발자가 자연어 프롬프트 중심으로 AI에게 구현을 맡기는 신작업 방식으로, 2025년 초 Andrej Karpathy가 대중화한 용어다.

AI 코딩은 “주니어+AI”보다 “시니어+AI”에서 훨씬 큰 가치를 낸다.이유는 AI가 잘하는 영역(보일러플레이트 생성·반복 자동화·빠른 시도/검증)과 못하는 영역(아키텍처·보안·설계 의사결정·정교한 코드 리뷰)의 경계가 아직 뚜렷하기 때문이다.

경영진·거대 테크의 헤드라인은 과감하다. “코드의 X%가 AI가 쓴다”, “1년 내 거의 전부를 AI가 작성” 같은 공격적 전망이 이어진다. 하지만 현장의 체감은 더 복합적이다. 도입은 빠르지만, 실제 프로덕션 품질/아키텍처/보안/조직 수준 활용은 앞으로의 과제이다.

문제: ::before/::after/::marker로 넣은 CSS 생성 텍스트·아이콘도 접근 가능한 이름(accName) 계산에 참여한다. 의미 전달용이면 스크린리더가 뭐라고 읽을지 통제해야 하고, 장식용이면 읽히지 않도록 해야 한다.

Google Agentspace는 기업 데이터(Drive, 메일, CRM 등)를 하나로 묶어 통합 검색·분석·행동 레이어를 제공하고, 여기에 사전 제작 에이전트(Deep Research 등) 와 노코드 에이전트 고급 개발용 Builder를 얹는 구조다.

“백엔드가 데이터를 얼마나 가공해서 프론트엔드에 넘겨야 할까?” → 답: 가능한 한 최소한만.이 글은 Nate Meyvis가 주장하는 프론트엔드 맥시멀리즘(front-end maximalism) 개념을 정리한 것이다. 원문 - Front-end maximalism

핵심: 예전엔 npm 패키지로만 가능하던 기능들이 이제는 Node.js 코어에 내장. 결과: 의존성 줄고, 보안·유지보수·빌드 속도 모두 개선 가능. 원문 - 15 Recent Node.js Features that Replace Popular npm Package

JSON은 “언어 중립적이고 단순한 데이터 포맷”이라는 이미지 덕분에 웹 API·백엔드·프론트엔드·데이터 파이프라인 어디서나 표준처럼 쓰인다. 하지만 현실은 다르다. 원문 - JSON is not JSON Across Languages

// 2025년 기준 기술 스택에 맞춘 상세 분석JavaScript는 2025년을 기준으로 JSON 모듈 import 기능을 모든 주요 브라우저에 기본 제공하기 시작했다. 원문 - Importing vs fetching JSON

2025년 10월 ViteConf(암스테르담)에서 Evan You가 Vite+를 공개했다. Vite+는 기존 Vite 위에 올라가는 “드롭인 업그레이드형 통합 툴체인” 원문 - Announcing Vite+

“Toolchains, the hard parts” 요약 및 재구성현대 개발 환경에서 “툴체인(toolchain)”이라는 말은 아주 많이 쓰이지만, 정작 직접 만들어본 사람은 많지 않다. 원문 - Toolchains, the hard parts

브라우저에 Element.setHTML() 이라는 새로운 메서드가 들어왔다. 역할은 단순하다.“문자열 HTML을 파싱 + Sanitizing, XSS-safe한 DOM 서브트리로 삽입하는 메서드”실제 의도는 더 명확하다.“ 원문 - MDN

“Vibe engineering” 개념 정리 및 실무 관점 재구성최근 “vibe coding”이라는 말이 이미 꽤 널리 쓰이고 있다.vibe coding → AI에게 “대충 이런 거 만들어줘”라고 프롬프트만 던진다. 원문 - Vibe engineering

여러 연구와 실전 사례가 반복적으로 지적해온 문제는 단순하다.AI가 작성한 “추가 코드(extra code)” 상당수가 → 지난주에 AI가 대충 짠 코드의 후속 보수 작업이었다. 원문 - Getting AI to Work in Complex Codebases

GitHub은 Spec Kit이라는 개발 방식을 발표했다. “스펙을 명확히 정의하고, 그 스펙을 기반으로 AI 에이전트가 코드를 생성하는 방식으로 전환하자.” 원문 - Diving Into Spec-Driven Development With GitHub Spec Kit

HTML로 동적인 UI를 만들 때 “결과 출력”을 위해 태생적으로 설계된 태그가 이미 있다. 원문 - HTML’s Best Kept Secret: The <output> Tag

await, Promise.all, forEach, 동시성 패턴 총정리가장 흔한 패턴부터 보자.겉으로 보기엔 멀쩡하다. 하지만 실제 동작은 다음과 같다. 원문 - Rethinking async loops in JavaScript

NPM · pnpm · Yarn · Bun · Deno 공급망 공격 시대의 필수 보안 실전 가이드JavaScript 공급망(supply-chain) 공격은 이미 일상이 되었다. 타이포스쿼팅. 원문 - NPM Security Best Practices

Meta가 리액트를 독립 재단에 이관하고 새 기술 거버넌스를 도입한다. 왜 이런 변화가 생겼고, 우리 개발자에게 무엇을 의미하는지 정리한다

React 19와 Remix 3가 정반대 길을 택했다. 컴파일러·Server Components로 복잡성을 떠안는 React vs this.update와 웹 플랫폼 중심의 단순함을 택한 Remix, 어떤 가치에 베팅할지 정리한다.

'use client', 'use server' 같은 프레임워크 디렉티브가 왜 위험한지, 표준·툴링·락인 관점에서 정리. 무엇을 언어로 보고, 무엇을 라이브러리로 둘지에 대한 글이다.

지난 12개월간 React 사이트가 1,300만 개 늘었다. LLM 출력·툴링·생태계 네트워크 효과가 결합해 새로운 프레임워크가 출발선에서 이미 뒤처지는 구조를 분석한다.

Wasm은 웹 기술도 아니고 어셈블리도 아니다. 정체는 ‘가상머신용 바이트코드’이며, 웹을 넘어 서버·임베디드까지 확장되는 범용 실행 포맷이다. Wasm의 진짜 역할을 정리한다.

툴팁 자체가 문제가 아니라 컴포넌트가 문제다. 접근성·키보드·일관성을 망가뜨리는 저수준 API 대신, 디자인 시스템에서 패턴 컴포넌트로만 노출하자는 제안이다.

URL은 주소가 아니라 상태 컨테이너다. 공유·복원·북마크·히스토리까지 무료로 제공하는 가장 오래된 상태 관리 시스템. 좋은 URL 설계가 왜 강력한지 정리한다.

검색 파라미터는 문자열이 아니라 상태다. Zod·라우터 스키마·계층적 검증을 통해 URL 쿼리를 전역 상태처럼 타입 세이프하게 다루는 패턴과 TanStack Router의 접근을 정리한다.

‘use client’는 JS 문법이 아니다. C/C++ 전처리기의 #pragma와 동일한 “빌드 도구 지시문”이다. 왜 디렉티브가 언어처럼 보이고, 왜 혼란이 반복되는지 역사적 관점에서 정리한다.

Vercel의 'use server'·'use cache'·'use workflow'는 단순한 프레임워크 기능이 아니라 언어 설계의 전조다. 분산 환경·직렬화·내장 캐싱·워크플로우 내구성 등 차세대 언어 개념을 어떻게 미리 실험하고 있는지 정리한다.

재사용 집착이 리액트 코드베이스를 망가뜨린다. DRY·범용 컴포넌트·Button.jsx 신앙이 어떻게 복잡성과 의존성 부채를 키우는지, 그리고 언제 의도적 중복(WET)을 선택해야 하는지 정리한다.

Open Microfrontends는 Microfrontend 세계의 OpenAPI다. 자산, 설정, 메시지, API 프록시, 권한까지 하나의 스펙으로 정의해 타입 안전한 통합과 배포를 표준화한다.

WebMCP는 웹 앱의 기능을 ‘AI 에이전트가 호출 가능한 도구’로 공개하는 새로운 웹 표준 제안이다. 기존 UI 자동화 대신 JS 함수 기반의 안정적·구조화된 협업 워크플로우를 가능하게 한다.

프레임워크 대신 브라우저 자체 기능을 어떻게 활용할지 정리한 글. Web Components, Navigation API 등으로 더 가볍고 빠른 프론트엔드를 만드는 방법을 다룬다.

브라우저 렌더링 파이프라인부터 S~F 티어까지, 웹 애니메이션 성능을 결정하는 모든 요소를 한 번에 정리한 가이드. transform·opacity·CSS 변수·레이아웃 비용까지 실전 기준 설명.

React 10년간의 변화 핵심 요약. 데이터 패칭 진화, Suspense, RSC, 런타임 검증(Zod), Sync Engine, 상태 관리 선택 기준까지 개발자가 실전에 바로 적용할 내용만 압축 정리.

React Query부터 TanStack Form·DB·Router·Start까지. CRUD·폼·실시간 DB·SSR·파일 기반 라우팅을 재해석한 풀스택 생태계 총정리. DX·타입 안전·실시간성 중심 분석.

try/catch 중첩에서 원인 추적이 끊기는 문제, Error.cause로 해결. 원본 스택 보존, 커스텀 에러와 TypeScript 설정, 실전 로깅 패턴까지 정리.

Range로 텍스트 범위를 지정하고 ::highlight()로 스타일링. 검색·문법 검사·코드 에디터 등에서 DOM을 건드리지 않고 텍스트 하이라이트하는 최신 Web API 정리.

Rust-free Prisma Client, 90% 작은 번들, 3배 빠른 실행, Prisma Postgres 통합. Prisma 7의 핵심 변화와 실전 영향 분석.

최근 Web AI Summit에서 공통적으로 반복된 메시지는 단순하다. AI는 더 이상 서버의 전유물이 아니다.브라우저는 이제 ‘AI 실행 환경’이 되고 있다. 이 글은 Web AI Summit에서 인상 깊었던 4개 세션을 실무 관점에서 요약한다.

2,500개 repo 분석: 잘 되는 `agents.md`의 공통점

Jeff Dean은 Stanford AI Club 강연에서, 오늘날의 대규모 AI 모델이 어떻게 만들어졌는지를 알고리즘·시스템·하드웨어 관점에서 정리했다.

Martin Fowler는 이 인터뷰에서 AI가 소프트웨어 엔지니어링에 미치는 영향을 단순한 “생산성 향상”이 아니라, 사고 방식 자체의 전환으로 규정한다. 그의 결론은 명확하다.

— “코딩하는 사람”에서 “에이전트를 지휘하는 사람”으로 Addy Osmani의 이 발표는 한 가지 질문에서 출발한다. “AI가 나를 대체할까?” → 틀린 질문이다.“ AI를 전제로 일하는 엔지니어가 될 수 있는가?”가 맞다.

— 성능보다 “신뢰”를 최우선으로 둔 컴퓨팅 철학이 영상은 단순한 PC 빌드 콘텐츠가 아니다.Linus Torvalds가 어떤 기준으로 컴퓨터를 신뢰하는가를 거의 선언문에 가깝게 보여주는 기록이다.핵심은 하나다.“ 빠른 컴퓨터보다, 믿을 수 있는 컴퓨터가 훨씬 중요하다

GitHub Copilot이 Agent Skills를 공식 지원하기 시작했다. 이 변화는 단순한 기능 추가가 아니라, Copilot을 개인 보조 도구 → 조직 단위 에이전트로 확장하는 첫 번째 실질적 장치다.

Simon Willison은 지난 2년간 150개 이상의 ‘HTML tools’를 만들었다. 공통점은 명확하다.

— 프롬프트는 문장이 아니라 설계도다. Anthropic의 Applied AI 팀은 이 세션에서 한 가지 메시지를 반복해서 강조한다. 프롬프트 엔지니어링은 요령이 아니라 구조 설계다.

"따라 하면서 완성하는 AWS 인프라 구축 입문" 링크: https&#x3A;//wikidocs.net/book/16914

— 컴포넌트 테스트와 실제 브라우저의 결합Vitest Browser Mode는 실제 브라우저에서 컴포넌트 단위 테스트를 실행하는 새로운 테스트 방식이다.JSDOM 기반의 단위 테스트와 E2E 사이의 공백을 메우는 접근으로, Vitest v4부터 Stable로 제공된다.

— React에서 UI 상태를 “렌더링 없이” 바꾸는 방법 React Zero-UI는 React 애플리케이션에서 UI 상태 변경을 React re-render 없이 처리하는 것을 목표로 하는 라이브러리다.

최근 몇 주간의 경험을 바탕으로, 소프트웨어 엔지니어링의 중심축이 어디로 이동하고 있는지에 대해 두 명의 인물—Andrej Karpathy와 Ryan Dahl—이 사실상 같은 결론을 서로 다른 언어로 말하고 있다.

최근 AI 코딩 도구가 빠르게 진화하면서, “엔지니어의 역할은 어디까지 바뀔 것인가?”라는 질문이 점점 현실적인 문제가 되고 있다. 이 질문에 대해 가장 밀도 높은 답을 들려주는 인물 중 하나가 바로 Boris Cherny다.

AI 에이전트는 빠르게 똑똑해지고 있지만, 여전히 현실적인 한계가 있다. 조직의 맥락, 반복되는 업무 절차, 도메인별 암묵지를 제대로 이해하지 못한다는 점이다. 이 문제를 정면으로 해결하려는 시도가 바로 Agent Skills다.

우리는 매일 수십, 수백 개의 프로그램을 실행한다. 터미널에서 명령어를 치고, 브라우저를 열고, 서버에서는 프로세스가 끊임없이 생성되고 종료된다.

웹에서 위치정보는 여전히 민감하고 실패하기 쉬운 기능이다. 기존 navigator.geolocation 기반 구현은 의도 없는 권한 프롬프트, 자동 차단, 복구 불가 UX라는 구조적 한계를 안고 있었다.

AI 코딩 도구에 대한 회의적인 반응은 대부분 같은 이유에서 나온다. “생산성은 조금 오르는데 코드 품질은 불안하다” “결국 내가 다시 다 고쳐야 한다” “대규모 코드베이스에서는 오히려 더 느리다”

2023~2024년에 등장했던 대부분의 코딩 에이전트는 솔직히 말해 실사용하기 어려웠다. 자율성은 과했고, 정확도는 낮았으며, 디버깅 비용이 사람보다 컸다. 그런데 2025년 말부터 분위기가 바뀌었다.

2025년을 기점으로 코딩 환경은 분명히 바뀌었다. 이제 AI는 코드 자동완성 수준을 넘어, 개발 흐름 전체를 함께 끌고 가는 에이전트로 자리 잡고 있다. 그 중심에 있는 도구가 Claude Code다.

Claude Code는 단순한 AI 코딩 도구가 아니다. 이 도구를 오래, 깊게 사용한 개발자들의 공통된 결론은 명확하다. Claude Code는 개발 워크플로우 전체를 재설계하는 도구다.

Claude Code를 며칠 써보는 것과, 실제 제품을 10개월 이상 매일 만들며 다듬은 설정을 쓰는 것은 완전히 다르다. everything-claude-code는 단순한 팁 모음이 아니다.

AWS 인프라를 정의할 때 보통 떠오르는 것은 Terraform, CloudFormation, YAML, 그리고 끝없는 설정 파일이다. React2AWS는 이 전제를 정면으로 뒤집는다. “UI를 JSX로 정의하듯, 인프라도 JSX로 정의할 수 없을까?”

“AI 비서는 SaaS가 아니라, 내 로컬에서 돌아가야 한다” 요즘 AI 어시스턴트는 대부분 클라우드 기반이다. 웹 UI, 중앙 서버, 불투명한 데이터 흐름, 그리고 계정 단위의 통제. OpenClaw는 이 흐름을 정면으로 거부한다.