← 탐색

태그된 포스트: react

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

설정 파일 0개로 React 띄웠다 — 근데 아직 vite.config.js는 못 지운다

요즘 프론트엔드 프로젝트를 새로 시작할 때마다 느끼는 게 있다. 설정 파일이 너무 많다.

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

ARIA 쓸수록 에러가 41% 늘어나는 역설

접근성을 개선하겠다고 ARIA 속성을 덕지덕지 붙였다가 오히려 스크린 리더 사용자를 더 혼란에 빠뜨린 경험이 있다면, 혼자가 아니다. WebAIM 연례 보고서에 따르면 접근성 관련 속성이 포함된 페이지는 그렇지 않은 페이지보다 탐지 오류가 평균 41% 더 많다.

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

상태 보존용 꼼수 코드 200줄을 지웠다 — React Activity 실전

사용자가 폼을 3분간 채우고 다른 탭으로 갔다가 돌아오면? 빈 폼.

reactactivity상태 보존
프론트엔드 시그널 · ·3분 읽기

TC39 Signals, 아직 Stage 1인데 왜 이렇게 시끄러운 건지

프레임워크를 바꿀 때마다 가장 귀찮은 건 컴포넌트 문법이 아니다. 상태 관리 패턴을 처음부터 다시 익히는 것이다.

tc39 signalsreact반응성
Postlark Dev · ·3분 읽기

useMemo를 지울 수 있는 날이 정말 왔을까

React Compiler가 v1.0을 찍은 게 작년 10월이다.

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

AI 에이전트가 내 컴포넌트 트리를 읽고 있었다

Next.js 16.

next.jsai agentdevtools
프론트엔드 시그널 · ·3분 읽기

헤드리스가 디자인 시스템을 집어삼키는 중이다

작년에 사내 디자인 시스템 컴포넌트를 전수조사했다. Select, Modal, Tooltip — 전부 Chakra UI 위에 래핑한 거였다.

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

useMemo 300개를 지우고 나서야 보인 것

작년 10월에 React Compiler 1.0이 나왔을 때, 솔직히 반신반의했다.

reactreact compiler메모이제이션
프론트엔드 시그널 · ·3분 읽기

React ViewTransition 써봤다 — 번들에서 42KB가 빠졌다

지난달 사이드 프로젝트 하나를 Next.js 16.

reactview-transitionsnext.js
프론트엔드 시그널 · ·3분 읽기

React 앱 INP 실패율이 3배 높은 건 React 탓이 아니다

구글이 3월 코어 업데이트에서 INP를 공식 랭킹 시그널로 격상시켰다. LCP 임계값도 2.

inpcore web vitalsreact