← 탐색

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

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

TypeScript 7 올렸더니 ESLint가 죽었다

7월 8일, TypeScript 7.0이 나왔다.

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

CSS 격리에 빌드 도구가 필요했던 건 브라우저 잘못이었다

BEM, CSS Modules, styled-components, Tailwind — CSS 격리 문제를 해결하려고 우리가 거쳐온 도구 목록이다. 각각 나름의 트레이드오프가 있었지만 공통점이 하나 있다.

css scopebaseline 2026css modules
프론트엔드 시그널 · ·3분 읽기

INP 200ms 맞추고 안심했으면 CrUX 다시 봐라

Lighthouse에서 Performance 100 찍고 스크린샷 공유한 적 있을 거다. 나도 그랬다.

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

jsdom으로 컴포넌트 테스트하던 시대가 끝났다

jsdom이 컴포넌트 테스트의 기본 환경이었던 건 "그게 유일한 선택지"였기 때문이지 "좋아서"는 아니었다. Vitest 4의 Browser Mode가 stable로 올라온 지금, 그 타협이 더 이상 필요 없다.

vitestbrowser modejsdom
프론트엔드 시그널 · ·3분 읽기

pushState의 시대가 끝났다

2024년에 사내 어드민을 만들면서 History API를 직접 건드린 적이 있다. 뒤로가기를 누르면 모달이 닫히는 게 아니라 이전 페이지로 가버리는 버그를 잡는 데 이틀이 걸렸다.

navigation apihistory apispa 라우팅
프론트엔드 시그널 · ·3분 읽기

next dev 때문에 32GB 맥북 산 사람, 16.3 올려라

next dev 띄우고 한 시간쯤 지나면 팬이 돌기 시작한다. 두 시간 지나면 "FATAL ERROR: Reached heap limit Allocation failed"이 뜬다.

next.jsturbopack메모리 최적화
프론트엔드 시그널 · ·2분 읽기

Chrome 150, DevTools가 혼자 디버깅하기 시작했다

6월 말에 Chrome 150이 나왔다. 릴리스 노트를 훑다가 멈춘 건 CSS @function 편집도, SSE HAR 내보내기도 아니었다.

chrome devtoolsgeminiai 디버깅
프론트엔드 시그널 · ·3분 읽기

tooltip 하나에 15KB 쓰던 시대가 끝났다

package.json을 열어보자.

css anchor positioningpopover apifloating ui
프론트엔드 시그널 · ·2분 읽기

TypeScript가 GitHub 1위 먹은 건 AI 때문이다

2025년 8월, TypeScript가 GitHub에서 Python을 제치고 월간 활성 기여자 수 1위를 찍었다. 정확히 1년 전 일이고, 그때 "타입 안전성의 승리"라고 해석한 기사들이 쏟아졌는데, 솔직히 그건 절반만 맞는 해석이다.

typescriptgithub octoverseai 코딩
프론트엔드 시그널 · ·3분 읽기

Rspack 2.1이 Vite 것을 훔치기 시작했다

Rspack을 처음 봤을 때 나는 "webpack 놓지 못하는 팀을 위한 타협"이라고 생각했다. webpack.

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

React Compiler가 useMemo를 죽였다는 건 반만 맞다

React Compiler가 안정 버전을 찍은 지 10개월이 지났다. 트위터 타임라인에는 "useMemo 전부 지우세요" 류의 글이 아직도 올라오는데, 실제 프로덕션 코드베이스에 적용해 보면 그렇게 단순하지 않다.

react compilerusememousecallback
K-테크 인사이더 · ·2분 읽기

lodash를 밀어낸 건 실리콘밸리가 아니었다

npm 주간 다운로드 2천만. Storybook, Yarn, MUI, Recharts, CKEditor가 프로덕션에서 쓴다.

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

반응성은 이제 프레임워크가 아니라 브라우저 거다

$state, ref(), createSignal — 프레임워크마다 같은 걸 다른 이름으로 불렀다. TC39 Signals 제안이 이 전쟁에 마침표를 찍으려 한다.

tc39signals반응성
프론트엔드 시그널 · ·3분 읽기

Next.js에 CVE 9개가 쏟아졌다 — 셀프 호스팅이면 지금 올려라

Turbopack 속도에 감탄하면서 next dev 띄워놓고 있었는데, 7월 21일에 나온 보안 릴리스를 보고 등이 서늘해졌다. HIGH 4개, MEDIUM 5개.

next.js보안cve
프론트엔드 시그널 · ·3분 읽기

devDependencies에서 sass 지우는 날이 보인다

Sass를 처음 쓴 게 2016년이었다. 그때 CSS는 변수도 없었고, 중첩도 안 됐고, 색상 함수는 꿈도 못 꿨다.

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

접근성 검사가 33개로 늘었다 — 프론트엔드 코드에서 걸리는 것들

올해 안에 모든 공공기관 웹사이트가 KWCAG 2.2를 충족해야 한다.

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

클릭하고 0.3초, 사용자는 이미 떠났다

LCP 2.1초, CLS 0.

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

20GB 먹던 dev 서버가 2GB가 됐다 — Next.js 16.3 실측

금요일 오후, 대시보드 프로젝트 50개 라우트를 돌아다니며 디버깅하다 보면 어김없이 터미널에 FATAL ERROR가 뜬다. next dev 프로세스가 20GB를 넘기는 건 Vercel 내부에서도 일상이었다고 한다.

next.jsturbopack메모리 최적화
프론트엔드 시그널 · ·3분 읽기

Chrome 150이 flame graph를 읽기 시작했다

Chrome 150이 6월 30일에 나왔다. 가장 눈에 띄는 변화는 Performance 패널에 Gemini 기반 AI 어시스턴트가 정식으로 들어온 것이다.

chrome devtools성능 최적화gemini
프론트엔드 시그널 · ·3분 읽기

View Transitions API가 크로스 브라우저 됐다 — Framer Motion 걷어낼 수 있을까

Framer Motion이 번들에서 차지하는 크기를 볼 때마다 약간의 죄책감이 있었다. 페이지 전환 하나 때문에 gzip 기준 30KB 가까운 라이브러리를 끌고 다니니까.

view transitions api크로스 브라우저mpa
1 / 6 Next →