← 탐색

태그된 포스트: 프론트엔드

프론트엔드 시그널 · ·2분 읽기

tooltip 하나에 npm install 하던 시대가 끝났다

번들 분석기를 돌릴 때마다 거슬리는 이름이 있었다. @floating-ui/dom, @floating-ui/react — 합치면 12KB가 넘는다.

css anchor positioningfloating uipopper.js
프론트엔드 시그널 · ·3분 읽기

LCP 기준 0.5초 깎였는데, 그게 순위 4자리다

3월 코어 업데이트 이후로 Lighthouse 리포트를 다시 열어보는 습관이 생겼다. 구글이 LCP "Good" 기준을 2.

lcpcore web vitals성능 최적화
프론트엔드 시그널 · ·3분 읽기

콘솔 에러 복붙하던 시대가 끝났다 — Chrome DevTools MCP

콘솔에 빨간 에러가 뜨면 스크린샷 찍어서 Claude에 붙여넣고, 수정 코드 받아서 적용하고, 다시 새로고침하고, 또 에러 뜨면 또 복붙하고. 이 루프를 하루에 열두 번은 돌린다.

chrome devtoolsmcpai agent
K-테크 인사이더 · ·2분 읽기

lodash의 후계자가 판교에서 나왔다

Vue.js 코어 레포에 이슈 하나가 올라왔다.

토스es-toolkit오픈소스
프론트엔드 시그널 · ·3분 읽기

getContrastColor() 유틸 함수, 이제 CSS 한 줄이다

디자인 시스템 작업하다 보면 한 번쯤 만들게 되는 함수가 있다. 배경색 넘기면 흰색이나 검정 중 대비가 높은 쪽을 돌려주는 유틸.

csscontrast-color접근성
프론트엔드 시그널 · ·3분 읽기

esbuild도 버렸다 — Vite 8이 5년 된 빌드 파이프라인을 통째로 갈아치운 이유

Vite가 esbuild를 도입한 건 2020년이었다. Go로 짠 번들러가 webpack보다 100배 빠르다니, 당시 모두가 감탄했다.

vitevite 8rolldown
프론트엔드 시그널 · ·2분 읽기

TypeScript 7 — 10배 빨라진 컴파일러를 못 쓰는 사람들

TypeScript 7.0이 7월 8일 GA로 나왔고, 올릴지 말지는 당신이 쓰는 프레임워크가 결정한다.

typescripttypescript 7go
프론트엔드 시그널 · ·2분 읽기

npx shadcn init 결과가 달라졌다

npx shadcn init을 이번 주에 돌려봤다면 눈치챘을 거다. Radix 대신 Base UI가 기본으로 깔린다.

shadcnbase uiradix
프론트엔드 시그널 · ·3분 읽기

페이지 전환이 느리면 에러가 뜬다 — Next.js 16.3 Instant Navigations

사이드바에 채팅방 20개가 있다. 뷰포트에 보이는 <Link>마다 prefetch가 발사된다.

next.jspartial prefetchinginstant navigations
프론트엔드 시그널 · ·3분 읽기

Lighthouse 96인데 클릭하면 멈춘다 — INP가 React한테 유독 가혹한 이유

상품 필터를 눌렀는데 화면이 0.5초 동안 얼어붙는다.

inpcore web vitalsreact
프론트엔드 시그널 · ·3분 읽기

tsc 안 돌려도 .ts가 돌아간다 — Node 24가 바꾼 기본값

프론트엔드 프로젝트에서 tsc가 하는 일은 두 가지다. 타입을 검사하고, 타입 구문을 벗겨낸다.

typescriptnode.js타입 스트리핑
프론트엔드 시그널 · ·2분 읽기

React Compiler가 Rust로 갔다 — 바꿀 건 없고 빌드만 40% 빨라진다

6월 9일, josephsavona가 React 레포에 PR 하나를 머지했다. #36173.

reactreact-compilerrust
프론트엔드 시그널 · ·2분 읽기

Floating UI 지워도 된다 — 91% 브라우저가 CSS로 툴팁을 잡는다

Anchor Positioning이 Baseline 2026에 올랐다. Chrome 125+, Firefox 132+, Safari 18.

css anchor positioningfloating ui툴팁
프론트엔드 시그널 · ·2분 읽기

Vercel 대시보드 메모리 21GB → 2GB — Turbopack이 드디어 약속을 지켰다

Vercel 대시보드 dev 서버 메모리가 21.5GB였다.

next.jsturbopackreact compiler
프론트엔드 시그널 · ·3분 읽기

@view-transition 한 줄이 SPA의 존재 이유 하나를 지웠다

SPA로 갈아탄 이유를 셋 꼽으라면, 페이지 전환 애니메이션은 거의 반드시 들어간다. 라우팅을 JavaScript가 먹으면 화면이 "깜빡"거리는 대신 부드럽게 넘어가니까.

view transitionscssmpa
프론트엔드 시그널 · ·2분 읽기

AI 에이전트가 DevTools를 쓰기 시작했다 — next-browser 해부

콘솔 에러 하나 잡으려고 Chrome DevTools 열고, Elements 탭 누르고, Network 탭 확인하고, React DevTools 켜서 컴포넌트 트리 펼치는 — 이 루틴을 AI 에이전트에게 시킬 수 있다면? Next.

next.jsnext-browserai 에이전트
K-테크 인사이더 · ·3분 읽기

Yarn Berry를 버린 회사들 — 한국 프론트엔드 팀의 조용한 대이동

2024년 말쯤부터 한국 프론트엔드 팀의 기술 블로그에 비슷한 제목이 하나둘 올라오기 시작했다. "Yarn에서 pnpm으로 전환한 이유", "Yarn Berry를 떠나며", "패키지 매니저를 다시 고르게 된 배경".

pnpmyarn berry패키지매니저
프론트엔드 시그널 · ·4분 읽기

KWCAG 2.2 검사항목 33개, 프론트엔드 코드에서 진짜 깨지는 건 4개다

올해 안에 공공기관 웹사이트 전부가 KWCAG 2.2를 통과해야 한다.

kwcag 2.2웹 접근성프론트엔드
K-테크 인사이더 · ·3분 읽기

사내 유틸 함수 모음이 주간 2천만 다운로드를 찍기까지

한국 핀테크 회사가 만든 자바스크립트 유틸리티 라이브러리를 마이크로소프트와 스토리북이 쓴다. 농담이 아니라 실제로 일어난 일이다.

토스es-toolkit오픈소스
프론트엔드 시그널 · ·3분 읽기

CSS @function이 Chrome 139에 올랐다 — 브라우저가 Sass를 삼키기 시작했다

Sass 없이 CSS에서 함수를 정의할 수 있다. 2026년 7월, Chrome 139가 @function at-rule을 정식으로 실었다.

css@functionsass
1 / 5 Next →