← 탐색

태그된 포스트: react

프론트엔드 시그널 · ·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
프론트엔드 시그널 · ·3분 읽기

5년 묵은 stale closure, React가 드디어 본인 책임을 인정했다

useEffect 안에서 최신 state를 읽고 싶은데 의존성 배열에 넣으면 이펙트가 다시 돌고, 안 넣으면 값이 옛날 거다. React를 쓰는 사람이라면 이 딜레마에서 자유로운 사람이 없다.

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

하이드레이션 절반을 나중으로 미루자, 벤치마크가 뒤집어졌다

프레임워크 하나 더 배우는 건 숨쉬기처럼 익숙해진 지 오래다. 문제는 "이번엔 진짜인가"를 가려내는 눈인데 — TanStack Start가 5월 19일 RC에 올라서면서 꺼낸 Deferred Hydration이라는 카드는, 좀 진지하게 볼 필요가 있다.

tanstack start하이드레이션ssr
프론트엔드 시그널 · ·3분 읽기

페이지 전환에 framer-motion 44KB 넣던 시대가 끝나간다

npm ls framer-motion 치면 나오는 44KB(gzipped). 모달 열고 닫기, 페이지 전환, 리스트 아이템 등장 — 이 중 절반은 이제 브라우저가 공짜로 처리해준다.

view transitions apiframer-motionreact
프론트엔드 시그널 · ·2분 읽기

npm audit 돌렸더니 빨간 줄 12개, 전부 Next.js였다

월요일 아침, 습관처럼 npm audit을 돌렸다. 빨간 줄이 12개.

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

onClick에 await 하나 박았더니 INP 500ms 찍었다

지난주 프로덕션 대시보드 페이지에서 버튼 클릭 이벤트를 하나 손봤다. 기존 동기 호출을 async/await로 바꾸고, 그 안에서 상태 업데이트 세 개를 순차적으로 돌렸다.

inpcore web vitalsscheduler.yield
디자인 시스템 로그 · ·3분 읽기

그 컴포넌트, props 몇 개야

상품 카드 하나에 showBadge, showPrice, showRating, variant, size, onClick, onWishlist… props가 서른 개를 넘기는 순간, 그건 컴포넌트가 아니라 설정 파일이다.

컴파운드컴포넌트디자인시스템react
프론트엔드 시그널 · ·3분 읽기

올해 안에 33항목 맞춰야 하는데, 9개는 처음 본다

2026년부터 전자정부 웹사이트는 KWCAG 2.2를 충족해야 한다.

kwcag 2.2웹 접근성react
프론트엔드 시그널 · ·3분 읽기

탭 바꿀 때 상태 날아가는 거 — React가 드디어 답을 냈다

프론트엔드에서 탭 UI를 만들 때 가장 짜증나는 순간이 있다. 사용자가 첫 번째 탭에서 폼을 절반 채우고, 두 번째 탭 갔다 돌아왔더니 입력값이 전부 사라진 거다.

reactactivityreact 19.2
Postlark Dev · ·3분 읽기

React Router를 만든 두 사람이 React를 떠났다

Ryan Florence와 Michael Jackson. 이 두 이름을 모르는 프론트엔드 개발자는 거의 없다.

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

framer-motion을 반만 지웠더니 Lighthouse가 6점 올랐다

프로젝트에서 framer-motion이 차지하는 번들 비중을 확인한 게 3주 전이다. 페이지 전환 애니메이션 하나 때문에 120KB, gzip으로 38KB.

reactview transitionsframer-motion
프론트엔드 시그널 · ·3분 읽기

React Compiler가 조용히 포기하는 컴포넌트들

React Compiler가 정식 출시된 지 반년이 지났다. useMemo와 useCallback을 전부 지워도 된다는 이야기가 트위터를 채웠고, 새 프로젝트에서는 실제로 그런 경우가 많다.

reactreact compilerusememo
1 / 2 Next →