tag · 4 posts

#react

  • experience
  • design
  • develop
  • frontend
  • a11y
  • chart
  • react
  • d3
  • interactive

인터랙션과 접근성을 모두 고려한 차트 만들기

44개 차트 데모를 한 자리에 모았습니다. 시각 사용자·키보드 사용자·스크린리더 사용자가 모두 자연스럽도록 처음부터 설계했고, 그 과정에서 정착된 패턴들 — HTML overlay, roving tabindex, 호버와 키보드 포커스의 분리, 데이터 표 fallback — 을 함께 정리했습니다.

read →
  • experience
  • develop
  • frontend
  • backend
  • testing
  • jest
  • react
  • nextjs

테스트가 없던 두 레포에 단위·컴포넌트·통합 테스트를 들이며

사람 눈검토만으로 운영 VM에 배포되던 두 레포에 jest를 깔았습니다. 어드민에서 검증한 패턴을 서비스로 옮기는 미러링 전략으로 네 단계를 차례로 진행했고, 그 사이에 만난 함정과 결정 패턴을 정리합니다.

read →
  • experience
  • develop
  • frontend
  • react
  • nextjs
  • security
  • cve
  • rsc

React/Next.js CVE 6개월 정리

React 19와 Next.js의 6개월 동안 발견된 CVE들을 한 편에 정리합니다. 각 CVE의 문제, 재현 방식, 패치, 그리고 당장 올릴 수 없을 때의 대처법을 코드 예시와 함께 다룹니다.

read →
모바일·프레임워크 — iOS, Android, React, Vue, Flutter - 앱·웹 접근성 실무 가이드 ep.05
  • series
  • develop
  • mobile
  • frontend
  • ios
  • android
  • react
  • a11y

모바일·프레임워크 — iOS, Android, React, Vue, Flutter - 앱·웹 접근성 실무 가이드 ep.05

SwiftUI의 accessibility 수정자와 Compose의 semantics, Flutter의 Semantics 위젯을 비교하고, 네이티브·하이브리드·웹뷰 아키텍처별 접근성 함정을 짚습니다. React Aria·Radix·Headless UI 같은 헤드리스 라이브러리, jsx-a11y 린트 규칙, VoiceOver와 TalkBack 차이까지 한 편에 모았습니다.

read →