← 탐색

태그된 포스트: react

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

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

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

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

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

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

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

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

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

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

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

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

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

React는 컴파일러로 갔고, 나머지는 Signals로 갔다

프론트엔드 반응성의 역사는 결국 "상태가 바뀌면 뭘 다시 그릴 것인가"라는 질문의 역사다. React는 VDOM diffing으로 풀었고, Vue는 Proxy 기반 추적으로, Solid는 처음부터 시그널로 풀었다.

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

Next.js 16.3 — 서버 컴포넌트인데 SPA처럼 빠르다고?

서버 컴포넌트를 쓰면서 "네비게이션이 왜 이렇게 느리지"라고 한 번쯤 투덜댄 적 없는 사람은 아마 App Router를 프로덕션에 안 넣어본 사람일 것이다. 매 라우트 전환마다 서버 왕복, 하얀 화면, 스피너.

next.jsnext.js 16.3instant navigations
프론트엔드 시그널 · ·3분 읽기

React 20 컴파일러, useMemo 지우는 건 쉬운 파트였다

6월에 React 20이 컴파일러를 stable로 올렸다. 트위터 타임라인이 "useMemo랑 useCallback 드디어 안 써도 돼!

reactreact 20컴파일러
Postlark Dev · ·2분 읽기

React가 서버로 올라간 대가

올해 4월, React의 내부 직렬화 프로토콜에서 CVSS 7.5짜리 DoS 취약점이 공개됐다.

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

npx shadcn init 결과가 달라졌다

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

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

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

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

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

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

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

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

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

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

next.jsnext-browserai 에이전트
프론트엔드 시그널 · ·4분 읽기

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

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

kwcag 2.2웹 접근성프론트엔드
디자인 시스템 로그 · ·2분 읽기

캔버스가 런타임이 됐다

Config 2026에서 발표된 기능 중 하나가 이번 주부터 베타 롤아웃을 시작했다. Code Layers — 피그마 캔버스 위에서 React 코드를 직접 실행하는 기능이다.

figmacodelayers디자인시스템
프론트엔드 시그널 · ·3분 읽기

TC39 Signals, Stage 1에서 2년 — 프레임워크는 이미 끝냈다

TC39 Signals 제안이 Stage 1에 머문 지 2년이 넘었다. 그 사이 Angular, Vue, Solid, Preact, Qwik 전부 시그널 기반 반응성을 프로덕션에 밀어넣었고, 개발자들은 이미 그걸 쓰고 있다.

tc39signalsreact
Postlark Dev · ·2분 읽기

useMemo를 지워도 남는 것

React Compiler가 useMemo와 useCallback을 자동 처리해주면서 "메모이제이션은 이제 컴파일러 일이지 내 일이 아니야"라는 분위기가 퍼지고 있다. 실제로 수백 줄의 메모이제이션 훅을 걷어내도 성능 저하 없이 동작하는 프로젝트가 대부분이다.

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

AI한테 UI 시키면 전부 shadcn — 우연이 아니다

v0에 "대시보드 만들어줘" 치면 shadcn Card, shadcn Button, shadcn Badge가 나온다. Claude Code에 "설정 페이지 짜줘" 시키면 똑같다.

shadcn/ui디자인 시스템ai 코드 생성
프론트엔드 시그널 · ·3분 읽기

'use server' 한 줄이 서버를 통째로 넘겼다

프론트엔드 개발자한테 "보안 패치 했어?"라고 물으면 대부분 npm audit 돌리고 끝이다.

reactserver components보안
프론트엔드 시그널 · ·3분 읽기

사이트 43%가 INP를 못 넘는다 — 이미지 최적화론 절대 안 고쳐진다

프로덕션 배포하고 Lighthouse 돌렸다. 성능 점수 98.

inp성능core web vitals
프론트엔드 시그널 · ·2분 읽기

useMemo 전부 지웠다 — React Compiler 반년 후 솔직한 성적표

작년 10월 React Compiler v1.0이 떨어졌을 때, 사내 Slack 첫 반응은 "이제 useMemo 다 지워도 되는 거죠?

reactreact compilerusememo
1 / 3 Next →