프론트엔드 소식
해외 이슈·커뮤니티 논의를 번역·요약해 전하는 소식 (관리자 작성)
CSS·스타일링데모26.06.25JS 없이 움직임을 CSS로 - Motion Path와 Scroll Snap
한 줄 요약 - 곡선을 따라 요소를 움직이는 offset-path와, 손을 떼면 카드가 자석처럼 멈추는 scroll-snap. 예전엔 JS나 라이브러리가 필요했던 모션을 CSS 몇 줄이 가져갔습니다. Motion Path (offset-p
조회 62
CSS·스타일링데모26.06.25CSS 비주얼 무기 - mask로 오려내기와 @property로 못 움직이던 것 움직이기
한 줄 요약 - 그라데이션/모양으로 요소를 오려내는 mask-image와, 원래 애니메이션이 안 되던 값을 움직이게 하는 @property. 둘 다 주요 브라우저에 안착해 바로 쓸 수 있습니다. mask-image 이미지 아래
조회 62
CSS·스타일링데모26.06.25반응형/테마를 데이터로 - clamp() 유체 타이포와 컨테이너 스타일 쿼리
한 줄 요약 - 브레이크포인트 없이 글자를 매끈하게 키우는 clamp()와, 클래스 대신 '값'으로 테마를 바꾸는 컨테이너 스타일 쿼리. 미디어쿼리/클래스 더미를 줄이는 두 가지입니다. clamp() 유체 타이포 제목 하나를
조회 66- ReactReact데모26.06.24
React 기초를 직접 만지며 배우는 코너를 열었어요
한 줄 요약 - useState, useEffect, 커스텀 훅 같은 React 핵심 개념을 글로 읽기만 하는 게 아니라, 직접 눌러보며 이해하는 인터랙티브 학습 코너를 새로 열었습니다. 무엇인가요 개념마다 만질 수 있는 라이
조회 81 
CSS·스타일링데모26.06.24CSS에 드디어 '부모 선택자' :has() - JS 없이 조건부 스타일
한 줄 요약 - CSS :has()는 부모가 안에 든 자식의 상태를 보고 스스로 스타일을 바꾸는 선택자입니다. 예전엔 JS로만 하던 '입력이 맞으면 칸 전체를 초록으로' 같은 일을 CSS 한 줄로 처리합니다. 무슨 일이에요?
조회 76
CSS·스타일링데모26.06.24반응형/정렬의 새 무기 - 컨테이너 쿼리와 subgrid
한 줄 요약 - 컴포넌트가 화면이 아니라 '자기가 담긴 칸' 너비로 반응하는 컨테이너 쿼리(@container)와, 카드들의 줄을 자동으로 맞춰주는 subgrid. 둘 다 주요 브라우저에 안착해 실무에 바로 쓸 수 있습니다. 컨테이너 쿼리
조회 70
CSS·스타일링데모26.06.24이제 등장/퇴장 애니메이션도 순수 CSS - @starting-style
한 줄 요약 - @starting-style과 transition-behavior: allow-discrete를 함께 쓰면, 토스트나 모달이 나타나고 사라지는 모션을 애니메이션 라이브러리 없이 순수 CSS로 만들 수 있습니다. 무슨 일이에
조회 53
CSS·스타일링데모26.06.24요즘 CSS 디테일 - 색 섞기 color-mix와 줄바꿈 다듬기 text-wrap
한 줄 요약 - 기본 색 하나에서 팔레트 전체를 뽑는 color-mix()/light-dark(), 그리고 제목 줄을 고르게 맞추고 본문 고아 단어를 줄이는 text-wrap. 작지만 매일 쓰는 디테일을 CSS가 직접 처리합니다. colo
조회 61
빌드·툴체인26.06.24Cloudflare가 Vite 만든 VoidZero 인수 - Vite 8.1도 같이 나왔다
한 줄 요약 - Vite를 비롯한 핵심 프론트 도구를 만들던 VoidZero가 Cloudflare에 합류했고, 도구들은 그대로 오픈소스로 남습니다. 거의 같은 시기에 Vite 8.1도 나왔어요. 무슨 일이에요? VoidZero
조회 31
프레임워크·기타26.06.24Angular v22 정식 출시 - 이제 signal이 중심이다
한 줄 요약 - Angular가 v22에서 signal(값이 바뀌면 화면이 자동으로 따라가는 반응형 상태)을 전면에 내세운 버전을 내놨습니다. 무슨 일이에요? 그동안 실험적이던 Signal Forms(폼 상태를 signal로
조회 29
CSS·스타일링26.06.24Chrome 150 베타 - CSS에 상대 투명색 alpha()와 미디어 재생 상태 가상클래스
한 줄 요약 - Chrome 150 베타에 들어온 CSS 기능 중 실무에 바로 와닿는 두 가지를 소개합니다. 색의 투명도만 따로 떼어 바꾸는 alpha(), 그리고 동영상이 재생 중인지 멈췄는지에 따라 CSS만으로 스타일을 바꾸는 가상클래스예요.</p
조회 32
성능·접근성26.06.24CrUX 5월 리포트 - 실사용 Core Web Vitals 통과율이 떨어졌다 (INP가 최대 약점)
한 줄 요약 - 전 세계 실제 사용자 데이터를 모은 6월 CrUX 리포트에서, 사이트들의 Core Web Vitals(실사용 성능 합격 기준) 통과율이 살짝 떨어졌습니다. 특히 반응 속도 지표인 INP가 가장 큰 약점으로 남았어요. 무슨
조회 27
CSS·스타일링데모26.06.18최근 CSS 신기능 묶음 - Chrome 149 / Firefox 152가 더한 실용 4가지
한 줄 요약 - 최근 3주 사이 브라우저들이 정식으로 더한 실용 CSS 기능을 모았습니다. 칸 사이에 구분선 긋기, 입력 내용에 맞춰 스스로 커지는 폼, 도형 둘레로 흐르는 텍스트, 잘린 글자를 펼쳐 보여주기. 공통점은 예전엔 자바스크립트나 꼼수로 메
조회 47
브라우저·웹표준데모26.06.18WWDC26 공개 Safari 27 베타 - 차기 CSS/웹 기능 58종 한꺼번에 예고
한 줄 요약 - WWDC26에서 공개된 Safari 27 베타가 차기 CSS/웹 기능을 58가지나 한꺼번에 예고했습니다. 그동안 Chrome과 Firefox가 앞서가던 기능들을 Safari가 따라오기 시작했다는 신호예요. 무슨 일이에요?<
조회 43
성능·접근성26.06.18최근 3주 npm 공급망 공격 급증 - 프론트 개발자 방어 체크리스트
한 줄 요약 - 최근 3주 사이 npm 생태계를 노린 대형 공급망 공격이 잇따랐습니다. 설치나 빌드 스크립트를 악용해 정보를 빼가는 수법이 공통이라, 프론트 개발자도 방어법을 챙길 때입니다. 무슨 일이 있었나 M
조회 42
브라우저·웹표준데모26.06.18최근 웹표준 Baseline 묶음 - :open 가상클래스부터 Document PiP까지
한 줄 요약 - 최근 3주 사이 브라우저들이 나란히 따라오면서 Baseline(주요 브라우저가 모두 지원해 안심하고 쓸 수 있는 상태)에 합류했거나 새로 들어온 웹표준 기능을 모았습니다. 공통 주제는 예전엔 자바스크립트로 메우던 일을 브라우저가 직접
조회 78
React데모26.06.17[React 19] useOptimistic·useActionState·use - 폼과 비동기를 위한 새 훅
한 줄 요약 - React 19가 폼과 비동기 처리를 간결하게 해주는 새 훅을 추가했습니다. 화면을 먼저 바꾸는 낙관적 업데이트(useOptimistic), 액션 결과/로딩 상태(useActionState), 프로미스를 직접 읽는 use 등입니다.</
조회 76
Next.js26.06.17[Next.js 16] Turbopack 기본 탑재 + Cache Components(PPR)로 빨라진 빌드와 로딩
한 줄 요약 - Next.js 16이 Turbopack을 기본 번들러로 채택해 빌드가 2~5배 빨라졌고, Cache Components(PPR)로 정적과 동적을 한 페이지에서 섞어 초기 로딩을 크게 개선합니다. 무슨 일이에요? <p
조회 76
언어·TypeScript데모26.06.17[ECMAScript 2025] Iterator 헬퍼·Set 메서드·Promise.try 정식 추가
한 줄 요약 - ES2025가 이터레이터 체이닝(map/filter/take), 집합 연산(union/intersection/difference), Promise.try 등을 표준으로 추가했습니다. 무슨 일이에요? 그동안 배열
조회 70
성능·접근성26.06.17[Speculation Rules] 링크를 미리 렌더해 '즉시' 열리는 페이지
한 줄 요약 - speculationrules 스크립트로 사용자가 다음에 갈 법한 페이지를 미리 prefetch/prerender 해두면, 클릭하는 순간 거의 즉시 열립니다. 무슨 일이에요? 여러 페이지로 된 사이트(MPA)를
조회 65
빌드·툴체인26.06.17ESLint/Prettier의 대안 - Rust 기반 Oxlint/Biome로 린트가 수십 배 빨라진다
한 줄 요약 - 오래 쓰던 ESLint/Prettier 대신, Rust로 만든 Oxlint와 Biome가 린트/포맷을 수십 배 빠르게 처리합니다. 무슨 일이에요? Oxlint(OXC)는 린트 전용으로 ESLint 대비 50~1
조회 60
빌드·툴체인26.06.17이제 Node.js가 .ts 파일을 그냥 실행한다 - 내장 타입 스트리핑 안정화
한 줄 요약 - 이제 Node.js가 별도 변환 도구(ts-node 등) 없이 .ts 파일을 바로 실행합니다. 타입을 실행 시 벗겨내는(type stripping) 기능이 기본으로 켜졌습니다. 무슨 일이에요? Node.js 2
조회 43
언어·TypeScript26.06.17TypeScript 7.0 베타 - 컴파일러를 Go로 새로 짜 타입체크가 약 10배 빨라졌다
한 줄 요약 - 마이크로소프트가 TypeScript 컴파일러를 Go로 새로 작성한 'TypeScript 7.0'(코드명 Corsa) 베타를 공개했습니다. 타입체크와 빌드가 기존보다 약 10배 빨라집니다. 무슨 일이에요? 기존
조회 40
CSS·스타일링데모26.06.17CSS만으로 툴팁/팝오버 위치 잡기 - 'Anchor Positioning'이 Baseline 2026 진입
한 줄 요약 - 툴팁이나 팝오버를 특정 요소에 딱 붙여 띄우는 일을, 이제 자바스크립트 위치 계산 라이브러리 없이 CSS만으로 할 수 있습니다. 무슨 일이에요? 한 요소를 기준점(anchor)으로 지정하고, 다른 요소가 그 기
조회 54
성능·접근성26.06.17유럽 접근성법(EAA) 본격 시행 -
한 줄 요약 - 유럽 접근성법(EAA)이 본격 적용되면서, EU 시장을 대상으로 하는 웹과 앱은 장애가 있는 사용자도 쓸 수 있게 만드는 것이 법적 의무가 됐습니다. 무슨 일이에요? 기준은 EN 301 549이며 사실상 WCA
조회 42
프레임워크·기타26.06.17Vue 3.6 'Vapor Mode' 기능 완성 - 가상 DOM 없이 Svelte/Solid급 렌더링 속도
한 줄 요약 - Vue가 3.6에서 가상 DOM 없이 화면을 직접 그리는 'Vapor Mode'를 기능 완성 단계까지 끌어올려, Svelte/Solid급 속도를 냅니다. 무슨 일이에요? Vapor 모드는 컴포넌트를 컴파일할
조회 25
CSS·스타일링26.06.17Tailwind CSS v4 - Rust 엔진 'Oxide'로 빌드가 최대 100배 빨라졌다
한 줄 요약 - Tailwind CSS가 v4에서 핵심 엔진을 Rust로 새로 짠 'Oxide'로 바꿔 빌드가 크게 빨라졌고, 설정도 JS 파일이 아니라 CSS에서 바로 합니다. 무슨 일이에요? v3까지는 tailwind.
조회 34
브라우저·웹표준데모26.06.17페이지 이동도 부드럽게 - 'Cross-document View Transitions'가 대부분 브라우저에
한 줄 요약 - 다른 페이지로 넘어갈 때 화면이 툭 끊기지 않고 부드럽게 전환되는 기능을, 이제 JavaScript 없이 CSS만으로 쓸 수 있습니다. 무슨 일이에요? 예전엔 SPA(한 페이지 안에서 화면만 바꾸는 앱)에서
조회 34
Next.js26.06.17메타프레임워크가 기본값이 됐다 - Next.js와 Server Actions의 표준화
한 줄 요약 - 이제 React를 그냥 쓰기보다 Next.js 같은 메타프레임워크로 시작하는 게 표준이 됐고, 백엔드 로직까지 Server Actions로 프론트 저장소 안에서 다룹니다. 무슨 일이에요? Server Act
조회 36
React26.06.17React Compiler 정식화 - 이제 useMemo·useCallback 수동 최적화는 그만
한 줄 요약 - React가 성능 최적화를 자동으로 해주는 'React Compiler'를 도입하면서, 그동안 손으로 챙기던 useMemo/useCallback/memo를 대부분 안 써도 됩니다. 무슨 일이에요? 리액트는 상태
조회 35