태그: #frontend

← 전체 글

• 기본값에서 내려온 빌드 도구들 — 프론트엔드 툴체인 10개가 자리를 내준 이유

  한때 프론트엔드 프로젝트의 기본값이었다가 지금은 새 프로젝트에서 잘 고르지 않게 된 도구 10개를, 공식 폐기 공지와 저장소 보관 상태 같은 확인 가능한 근거만으로 정리합니다. Create React App, Bower, TSLint, Karma, Protractor, PhantomJS, LibSass와 node-sass, Moment.js, Rome, Grunt를 각각 무엇이었나, 왜 그때

  2026-08-12 · 16 분 읽기 #open-source#frontend#build-tools#deprecation#javascript

• 국내 개발 블로그 명글 큐레이션 4 — 프론트엔드, 직접 열어 확인한 14편

  프론트엔드 주제로 한국어로 쓰인 글 중에서 설명이 구체적이고 재현 가능한 14편을 골랐습니다. 실행 컨텍스트로 설명하는 클로저, 자바스크립트가 프로토타입을 택한 배경, 타입스크립트 조건부 타입과 infer, 타입 시스템이 증명처럼 작동하는 이유, 리플로우와 리페인트, React Fiber 리컨실러, useLayoutEffect로 잡은 마커 렌더링, 번들러 네 종의 계보, 선언적 프로그래밍에

  2026-08-12 · 22 분 읽기 #curation#큐레이션#frontend#javascript#typescript

• 웹 에디터에 자가 없는 진짜 이유 — 잴 자가 없는 게 아니라 잴 종이가 없습니다

  워드에는 있고 웹 에디터에는 없는 것 중 가장 자주 요청받는 기능이 눈금자입니다. 아무도 만들지 않아서가 아닙니다. 웹에는 페이지라는 모델이 없어서 센티미터가 무엇에 대한 센티미터인지부터 정할 수 없기 때문입니다. 최근 공개된 editor-ruler를 실마리 삼아, 눈금자를 붙인다는 결정이 왜 UI 부품 하나가 아니라 문서 모델 하나를 들이는 결정인지, 그리고 그 결정에 따라오는 것이 무엇인

  2026-08-09 · 14 분 읽기 #frontend#rich-text-editor#ui-design#contenteditable#developer-tools

• 화면은 열 글자로 쓰입니다 — 커스텀 위젯을 만들기 전에 물어야 할 한 가지

  제이콥 닐슨은 거의 모든 사용자 인터페이스가 열 개 남짓한 요소로 조립된다고 정리했습니다. 알파벳 스물여섯 글자로 모든 영어 단어를 쓰듯이 말입니다. 이 목록이 유용한 이유는 무엇을 만들지 알려 주기 때문이 아니라, 새 위젯을 만들 때 실제로 무엇을 버리는지 보여 주기 때문입니다. 순위가 담고 있는 정보, 관습을 어기는 네 가지 흔한 방식, 그리고 우리 디자인 시스템 목록에 오늘 붙여 볼 수

  2026-08-09 · 14 분 읽기 #ui-design#ux#design-system#frontend#usability

• SvelteKit 3.0 프리릴리스 읽기 — 깨지는 것, 조여지는 기본값, 그리고 여전히 experimental인 것

  2026년 6월 5일부터 npm에 @sveltejs/kit 3.0.0-next 프리릴리스가 올라오기 시작했고, 7월 14일 next.8까지 왔습니다. 체인지로그를 처음부터 끝까지 읽어 보면 SvelteKit 3은 기능 메이저가 아니라 바닥 올리기와 부채 청산 메이저입니다 — Node 22·TypeScript 6·Vite 8(rolldown 1.0 내장)·Svelte 5.48을 최소선으로 올리

  2026-07-17 · 20 분 읽기 #svelte#sveltekit#frontend#vite#migration

• React Compiler가 Rust로 포팅됐다 — 머지된 것, 아직 아닌 것, 그리고 그 "10배"라는 숫자

  2026년 6월 9일, React Compiler를 Rust로 포팅한 PR 36173이 facebook/react main에 머지됐습니다. 461개 파일에 12만 줄이 넘는 코드가 들어왔고, "Babel 플러그인으로 3배, 변환 로직 자체는 약 10배 빠르다"는 숫자가 곧바로 생태계를 돌기 시작했습니다. 그런데 정작 PR 본문에서 저자 Joseph Savona 본인은 그 숫자에 대해 "성능

  2026-07-16 · 31 분 읽기 #react#rust#compiler#performance#frontend

• 프론트엔드 프레임워크 2026 완벽 가이드 - React 19 · Vue 3.6 Vapor · Svelte 5 · SolidJS 2 · Qwik · Astro 5 · HTMX 2 · Next 16 · Nuxt 4 · Angular 19 · Tailwind 4 · Vite 6 심층 분석

  2026년 5월 기준 프론트엔드 풍경은 4년 전과 완전히 다르다. React 19.1과 React Compiler가 GA로 들어왔고, Vue 3.6은 Vapor Mode를 정식 릴리스했으며, Svelte 5의 runes는 안정화 단계를 지나 SvelteKit 3까지 도달했다. SolidJS 2, Qwik의 resumability, Astro 5의 server islands, HTMX 2, N

  2026-05-16 · 28 분 읽기 #frontend#react#vue#svelte#solidjs

• 프론트엔드 테스팅 2026 — Playwright / Cypress / Vitest / Jest / Storybook 9 / Chromatic 심층 비교 ♪ 들을 수 있어요

  2026년 5월, 프론트엔드 테스팅의 지형이 완전히 바뀌었다. Playwright는 사실상 표준이 되었고(VSCode 통합, Trace Viewer, Component Testing 성숙), Cypress 14는 여전히 강하지만 점유율을 잃고 있다. Vitest 3는 Vite와 함께 오는 가장 빠른 유닛 테스트 러너, Jest 30은 레거시·Next 호환의 마지막 보루. Testing Lib

  2026-05-16 · 40 분 읽기 #testing#frontend#playwright#cypress#vitest

• TanStack Start — RSC 없이도 풀스택 React를 한다, Next.js의 대안 깊게 보기 2026 ♪ 들을 수 있어요

  Tanner Linsley가 만든 풀스택 React 프레임워크 TanStack Start가 2025년 GA를 찍었다. TanStack Router + TanStack Query + Vinxi + Nitro로 짜인 — RSC 없이도 데이터·라우팅·서버 함수가 끝까지 타입 세이프로 흐르는 — 다른 길의 풀스택. Next.js·Remix·React Router v7·SolidStart·Svelte

  2026-05-14 · 40 분 읽기 #tanstack-start#tanstack-router#tanstack-query#react#fullstack

• Svelte 5 Runes — 반응성 재설계, 그리고 Solid·Vue·MobX·React Compiler와의 정면 비교 (2026 심층) ♪ 들을 수 있어요

  Svelte 5는 GA 1년 반이 지났다. $state·$derived·$effect·$props — 네 개의 룬이 컴파일러 마법이었던 let을 대체했다. 왜 명시성(explicit)이 암묵성(implicit)을 이겼는가, Solid 시그널과 Vue ref와 MobX와 React Compiler 사이 어디에 서 있는가, 마이그레이션은 정말 점진적인가 — 이 글은 Svelte 5 반응성의 철학

  2026-05-14 · 35 분 읽기 #svelte#svelte-5#runes#reactivity#sveltekit

• 웹 데이터 시각화 라이브러리 2026 — D3·Plot·Visx·Recharts·ECharts·Vega-Lite를 한 번에 비교한다 (심층 가이드)

  D3가 여전히 왕인데, 그 왕은 점점 깊은 곳에서만 모습을 드러낸다. 2026년의 웹 데이터 시각화는 D3 위에 Observable Plot이라는 그래머 레이어가 깔리고, React 진영에서는 Visx·Recharts·Nivo가 갈라지고, 엔터프라이즈는 ECharts 6과 Plotly로, 선언적 진영은 Vega-Lite 5.x로 가는 다층 스택이다. 이 글은 그 풍경을 한 호흡으로 정리한다

  2026-05-14 · 32 분 읽기 #data-visualization#d3#observable-plot#visx#recharts

• Astro 5 심층 해부: Server Islands · Content Layer · View Transitions로 다시 그리는 '콘텐츠 사이트의 표준'

  Astro 5는 '정적 사이트 생성기' 라벨을 벗고 콘텐츠 중심 프레임워크의 사실상 표준이 됐습니다. Server Islands로 정적 우선을 유지하면서 개인화를 지연 렌더링하고, Content Layer API로 어떤 데이터 소스든 콘텐츠 컬렉션으로 끌어옵니다. Vite 6/7 통합, Astro Actions, i18n 개선, prefetching, View Transitions까지 — A

  2026-05-14 · 30 분 읽기 #astro#astro-5#server-islands#content-layer#islands-architecture

• 브라우저에서 진짜 GPU 컴퓨트 — WebGPU 컴퓨트 셰이더와 WGSL 실전 가이드 2026

  WebGPU의 진짜 매력은 3D가 아니라 컴퓨트다. 브라우저에서 행렬 곱, ML 추론, 이미지 필터, 병렬 리덕션을 — CUDA도 wasm도 아닌 — WGSL로 굴린다. 워크그룹·디스패치·바인드 그룹·스토리지 버퍼를 처음부터, '내 첫 병렬 합' 튜토리얼까지, WebGPU 컴퓨트의 모델과 한계와 실전 패턴을 한 호흡으로 정리한다.

  2026-05-14 · 27 분 읽기 #webgpu#compute-shader#wgsl#gpu-computing#browser

• TypeScript 6과 tsc-go 포트 — `using`, 데코레이터, `satisfies`, 타입 내로잉까지 (현대 TS 실무 심층 가이드 2026)

  2026년의 TypeScript는 두 가지로 요약된다. 컴파일러가 다시 쓰였고(tsc-go, 10배 빠름), 언어가 자원 관리를 갖췄다(using/await using, Stage 3 ERM). 그 사이에 데코레이터(Stage 3·ES2025), satisfies, NoInfer, const 타입 파라미터, infer extends, isolatedDeclarations가 자리잡았다. 이 글

  2026-05-14 · 30 분 읽기 #typescript#typescript-6#tsc-go#using-declarations#decorators

• Tailwind CSS 4 심층 가이드 — Oxide 엔진·Vite 우선·CSS 우선 설정으로의 대전환과 v3 마이그레이션 실전기 2026

  Tailwind CSS 4는 단순한 버전 업이 아니다. 엔진을 Rust로 다시 쓰고, JS 설정 파일을 버리고, content 배열을 없애고, 모던 CSS의 모든 무기를 노출시킨 대수술이었다. 이 글은 v4 GA 이후 1년의 운영 경험을 바탕으로 Oxide 엔진 내부, Vite 우선 아키텍처, CSS 우선 설정으로의 패러다임 이동, color-mix·P3·container query·casc

  2026-05-14 · 30 분 읽기 #tailwind-css#tailwind-v4#oxide#vite#css

• HTMX & Hyperscript — 反-SPA 진영의 2026, Carson Gross가 던진 하이퍼미디어 명제 심층 (2026) ♪ 들을 수 있어요

  Carson Gross의 주장은 한 줄이다. 'SPA는 웹을 과잉 설계했다.' HTMX는 그 명제를 11KB로 증명한다. 폼·버튼·링크에 hx-get, hx-post, hx-swap, hx-target을 붙이면 React로 짜던 화면 90%가 사라진다. 그 옆에는 hyperscript(이벤트 핸들러 DSL), Datastar(차세대 하이퍼미디어 프레임워크), Alpine.js(타협으로서의 반

  2026-05-14 · 36 분 읽기 #htmx#hyperscript#datastar#alpine-js#hypermedia

• React Server Components와 Next.js App Router 완전 정복 — RSC 프로토콜, Server Actions, PPR, Streaming (2025)

  Server Component는 왜 태어났나? SSR과 뭐가 다른가? "use server"와 "use client"의 진짜 경계, RSC Flight Format과 스트리밍, Server Actions의 fetch 대체, App Router의 4계층 캐시, Next.js 15 PPR, Suspense와 병렬 렌더링, Remix의 Use the Platform 철학, Solid Start/Q

  2026-04-15 · 19 분 읽기 #react#nextjs#rsc#server-components#app-router

• RSC 이후의 프론트엔드 2025 완전 정복: React Server Components 철학, Next.js App Router·Remix/React Router 7·SvelteKit·SolidStart·Astro Islands·Qwik Resumability 비교, 서버·클라이언트 경계 설계, 실전 마이그레이션 — Season 6 Ep 1

  Season 6 첫 편. 2025년 프론트엔드의 중심 질문 — '서버와 클라이언트의 경계를 어디에 둘 것인가?' React Server Components의 철학과 오해, Next.js App Router의 성숙, Remix→React Router 7 통합, SvelteKit 2·SolidStart 1·Astro 5 Islands·Qwik Resumability까지 현대 메타 프레임워크 지형

  2026-04-15 · 19 분 읽기 #frontend#react-server-components#rsc#nextjs#remix

• React Fiber 내부 완전 가이드 2025: Reconciler, Scheduler, Concurrent Rendering, Hooks 심층 분석

  React 18의 Concurrent Rendering이 어떻게 작동하는가? Fiber 아키텍처, Reconciler, Scheduler, Hooks의 내부 구현, useState의 진짜 동작까지 — React 내부를 720줄로 완전 분석한다.

  2026-04-15 · 33 분 읽기 #react#fiber#reconciler#scheduler#concurrent-mode

• React Server Components & Next.js App Router Deep Dive — RSC, Streaming, Cache, Server Actions 완전 정복 (2025) ♪ 들을 수 있어요

  React 10년 만의 가장 큰 패러다임 전환, React Server Components와 Next.js App Router. 이 글은 RSC를 처음부터 해부합니다. SSR vs SSG vs ISR vs RSC의 차이, 서버/클라이언트 컴포넌트 분리, "use client" 지시어와 네트워크 경계, 직렬화 payload 포맷, Streaming과 Suspense 통합, Server Acti

  2026-04-15 · 40 분 읽기 #react#rsc#nextjs#app-router#server-components