번역일: 2026-03-26
원문 제목: CSS in 2026: The new features reshaping frontend development
원문 링크: https://blog.logrocket.com/css-in-2026/
번역일: 2026-03-26
CSS는 더 이상 "디자인은 CSS, 인터랙션은 JavaScript" 공식을 따르지 않아도 되는 시대에 접어들었다. LogRocket의 이 글은 150줄 이상의 JS를 몇 줄의 CSS로 대체한 실제 사례를 중심으로, 2026년에 브라우저에 상륙 중인 신기능들을 소개한다.
| 기능 | 설명 |
|---|---|
appearance: base-select |
<select> 요소를 완전히 스타일 커스터마이징 가능하게 함 |
::scroll-button() |
스크롤 컨테이너에 클릭 가능한 버튼 생성 |
::scroll-marker |
스크롤 항목마다 페이지네이션 점(dot) 자동 생성 |
container-type: scroll-state |
스크롤 상태 쿼리 활성화 (스냅/고정 상태 반응) |
sibling-index() / sibling-count() |
형제 요소 위치와 개수를 CSS에서 직접 참조 |
@starting-style |
트랜지션 시작 시점의 스타일 정의 |
<select>커스터마이징은 수년간 개발자들의 숙원이었는데,appearance: base-select+select::picker(select)조합으로 마침내 네이티브 동작을 유지하면서 완전한 스타일링이 가능해진다.- 스크롤 캐러셀을 JS 없이
::scroll-button()+::scroll-marker-group으로 구현할 수 있게 된다. - 대부분의 기능은 아직 브라우저 롤아웃 중이라 프로덕션 사용은 시기상조이지만, Chrome DevRel의 CSS Wrapped 2025 아티클과 함께 미리 학습해 두면 좋다.
원문 제목: TypeScript 6 Beta Released: Developers Invited to Upgrade to Prepare for the Go Rewrite
원문 링크: https://www.infoq.com/news/2026/02/typescript-6-released-beta/
번역일: 2026-03-26
TypeScript 팀이 TypeScript 6 베타를 출시했다. 이번 릴리스는 새로운 기능 추가보다는 TypeScript 7 (Go 기반 네이티브 컴파일러) 전환을 위한 브리지 버전에 가깝다. ES5 타겟 폐기, strict 모드 기본 활성화, ESM 기본 모듈 해석 등 "사리에 맞는 기본값"으로의 정비가 핵심이다.
- strict 모드 기본 활성화 — 새 프로젝트에서 별도 설정 없이 엄격한 타입 체크 적용
- 기본 타겟: es2025 — 오래된 브라우저 대응을 위한 다운트랜스파일이 더 이상 기본값이 아님
- ESM 기본 모듈 해석 —
esnext모듈 해석이 기본값으로 변경 - 폐기 항목: ES5 타겟, AMD/UMD 모듈 시스템,
baseUrl설정, out-file 번들링 - 추가: Node.js 서브패스 임포트 지원, RegExp Escaping (Stage 4) 지원, DOM Iterable 타입 개선
- TypeScript 7은 Go로 재작성된 컴파일러로, VS Code 코드베이스 기준 컴파일 시간이 77.8초 → 7.5초로 단축되는 것이 확인됐다.
- TS 6에서 발생하는 폐기 경고를 미리 해결해 두지 않으면, TS 7 마이그레이션 시 옵션 자체가 제거되므로 지금 조치가 필요하다.
"ignoreDeprecations": "6.0"설정으로 일시적으로 경고를 억제할 수 있으나, TS 7에서는 해당 옵션도 완전히 제거될 예정.
원문 제목: Vercel Releases React Best Practices Skill with 40+ Performance Rules for AI Agents
원문 링크: https://www.infoq.com/news/2026/02/vercel-react-best-practices/
번역일: 2026-03-26
Vercel이 React와 Next.js 애플리케이션을 위한 40개 이상의 성능 최적화 규칙을 담은 오픈소스 저장소 react-best-practices를 공개했다. AI 코딩 에이전트(Claude Code, Cursor, Codex 등)가 소비하도록 설계되어 있지만, 사람 개발자에게도 동등하게 유용하다.
- 비동기 워터폴 제거 (CRITICAL)
- 번들 사이즈 축소 (CRITICAL)
- 서버 사이드 성능
- 클라이언트 사이드 데이터 패칭
- 리렌더 최적화
- 렌더링 성능
- 고급 패턴
- JavaScript 마이크로 최적화
npx skills add vercel-labs/agent-skills- 긍정적: "컨텍스트 엔지니어링이 바이브 코딩 성공의 핵심 요인 — 분명히 유용하다"
- 우려: "스킬 설명에 대한 서플라이 체인 공격 가능성이 걱정된다"
- 비판적: "잘못된 문제를 해결하는 것 아닌가? AI 코딩 실패의 대부분은 React 최적화 규칙 부재가 아니라, 에이전트가 비즈니스 로직을 이해하지 못해서 발생한다"
- eslint-plugin-react 같은 린터 수준 규칙과 달리, Vercel의 이 프레임워크는 번들 구성, 요청 워터폴 등 아키텍처 수준의 결정에 집중한다.
- 규칙 파일들은
AGENTS.md로 컴파일되어, AI 에이전트가 코드 리뷰나 리팩토링 시 쿼리할 수 있도록 설계됐다.
원문 제목: The Lightweight JavaScript Framework Renaissance of 2026
원문 링크: https://dev.to/eugenioenko/the-lightweight-javascript-framework-renaissance-of-2026-4ee0
번역일: 2026-03-26
2026년의 JavaScript 프레임워크 지형은 3년 전과 다르다. React, Vue, Angular, Svelte가 사라진 것이 아니라, 코드를 AI가 점점 더 많이 작성하게 되면서 프레임워크 평가 기준 자체가 달라졌다. 이 글은 "AI에게 얼마나 쉬운 프레임워크인가?"라는 새로운 질문을 중심으로 경량 라이브러리의 부상을 다룬다.
- React: hooks 순서 규칙, useEffect 의존성 배열, 클로저 stale 이슈 — AI가 예측 가능하게 반복 실수하는 영역
- Vue 3:
refvsreactive혼동, Options API vs Composition API 분열 - Angular: DI 시스템, zone.js, 신호(signals) 마이그레이션으로 인한 높은 진입 장벽
- Svelte: 빌드 스텝 필수, 비표준 템플릿 문법, 버전별 반응성 모델 차이
- 빌드 스텝 없이 핵심 기능 동작
- 표준 HTML에 가깝거나, 표준 JS 태그드 리터럴 사용
- Signal 또는 Proxy 기반의 단순한 반응성
- 프레임워크 특정 개념 최소화
- 2026년에 경량 라이브러리 카테고리는 더 이상 틈새가 아닌 "정당한 선택지"로 자리잡았다.
- AI 코딩 에이전트가 코드의 상당 비율을 작성하는 환경에서, "빌드 스텝 없이 실행 가능한가?"는 프로토타입과 내부 도구에서 진지한 기준이 된다.
- 거대 프레임워크를 버리라는 주장이 아니라, 프로젝트 요구사항과 팀 구성(인간+AI)에 따른 선택이 더 중요해졌다는 것이 요지.
원문 제목: State of TypeScript 2026
원문 링크: https://devnewsletter.com/p/state-of-typescript-2026/
번역일: 2026-03-26
2025년은 TypeScript의 전환점이었다. GitHub 기여자 수 1위 언어가 됐고(월 2,636,006명, +66% YoY), Node.js는 네이티브 TypeScript 실행을 기본 활성화했으며, 컴파일러의 Go 포팅(Project Corsa)이 진행 중이다. 이 글은 2026년 현재 TS 생태계의 상태와 실무에서 취해야 할 액션을 정리한다.
- TypeScript = GitHub #1 언어 (2025년 8월 기준)
- Node.js 22.18+ 기본 Type Stripping —
node file.ts직접 실행 가능 (타입 체크는 별도tsc필요) - TypeScript 7 (Go 리라이트) — VS Code 코드베이스 기준 7.5초 (기존 77.8초), Playwright는 1.1초 (기존 11.1초)
- 보안 이슈 — Next.js의 "React2Shell" RCE (CVE-2025-55182, CVSS 10.0)로 인한 풀스택 JS 보안 모델 재평가
- 2025년 npm 침해 영향 받은 의존성 감사
-
--erasableSyntaxOnly플래그로 Node.js 네이티브 TS 실행 준비 -
enum→as const,namespace→ ES 모듈로 마이그레이션 - CI 파이프라인에서 TypeScript 7.0 프리뷰(
@typescript/native-preview) 벤치마크 테스트
원문 제목: Most Awaited CSS Features of 2026
원문 링크: https://medium.com/@onix_react/most-awaited-css-features-of-2026-886d76d666b2
번역일: 2026-03-26
2026년에 CSS 개발자들이 가장 기대하는 기능 중 하나인 CSS Anchor Positioning을 포함한 신기능들을 소개하는 글. 기존에는 JavaScript로 요소 좌표를 계산해 팝오버/툴팁 위치를 잡아야 했지만, 이제 CSS만으로 한 요소를 다른 요소에 "앵커링"할 수 있다.
-
CSS Anchor Positioning (
anchor(),anchor-name,position-anchor)- 팝오버, 툴팁, 드롭다운의 위치를 JS 없이 CSS로 지정
- 브라우저가 공간 인식을 자동으로 처리
-
CSS
@scope- 특정 DOM 서브트리 내에서만 스타일 적용 범위를 제한
- BEM이나 CSS 모듈 없이도 스코프된 스타일링 가능
-
CSS
@layer의 성숙- 서드파티 라이브러리 스타일과의 충돌 해결
- 디자인 시스템에서 우선순위 계층을 명시적으로 선언
-
View Transitions API Level 2
- 크로스-도큐먼트(페이지 간) 전환 애니메이션 지원
- SPA가 아닌 MPA에서도 부드러운 페이지 전환 구현 가능
- Anchor Positioning은 Floating UI, Popper.js 같은 JavaScript 포지셔닝 라이브러리를 대체할 수 있는 네이티브 솔루션이다.
@scope는 Shadow DOM을 도입하지 않고도 컴포넌트 수준의 스타일 격리를 가능하게 한다.- 이 중 Anchor Positioning과 View Transitions는 Chrome에서 이미 안정적으로 지원 중이며, Firefox/Safari도 빠르게 따라잡는 중.
원문 제목: It's 2026 — if you were starting a new frontend today, what stack/tooling would you choose and why?
원문 링크: https://www.reddit.com/r/softwarearchitecture/comments/1q5a881/its_2026_if_you_were_starting_a_new_frontend/
번역일: 2026-03-26
r/softwarearchitecture의 활발한 토론 스레드. 7.8년 경력의 FE 개발자부터 시니어 아키텍트까지 다양한 관점이 모였다. 2026년 기준 "만약 오늘 새 FE 프로젝트를 시작한다면?" 이라는 질문에 대한 커뮤니티 총의.
소규모/단순 프로젝트:
- 프레임워크 없이 순수 HTML/JS/CSS + 필요 시 HTMX + Alpine.js 조합
- "JS 프레임워크가 필요없다면 포함시키지 말라"
중대형 프로젝트:
- React + Next.js 가 여전히 압도적 1순위 (생태계, 취업 시장, AI 코드 품질)
- Svelte + SvelteKit 은 팀 규모가 작고 빌드 복잡성을 낮추고 싶을 때
- TanStack Start 에 대한 관심 증가 (TanStack 생태계 통합)
빌드 도구:
- Vite 가 사실상 표준으로 자리잡음
- Turbopack (Next.js 내장)은 대형 프로젝트에서 점점 안정화
피해야 할 것:
- Create React App (공식 지원 종료)
- Webpack 단독 설정 (Vite로 충분)
- Angular (스타트업/소규모 팀에는 과잉)
- 2026년에도 "정답 스택"은 없다. 팀 규모, 프로젝트 성격, AI 도구 활용도에 따라 다르다.
- AI 코딩 에이전트 품질을 고려하면, 학습 데이터가 풍부한 React/Next.js가 AI-assisted 개발에서 여전히 유리하다.
- 경량화 트렌드 (HTMX, Alpine, Astro)도 무시할 수 없는 흐름으로 자리잡았다.