tag · 5 posts

#react

Decorator와 Wrapper 컴포넌트의 윤리 - 디자인 패턴, 객체 수준 편 ep.05
  • series
  • develop
  • frontend
  • backend
  • design-patterns
  • gof
  • typescript
  • object-oriented
  • decorator
  • structural
  • react

Decorator와 Wrapper 컴포넌트의 윤리 - 디자인 패턴, 객체 수준 편 ep.05

Logger, Cache, Auth 데코레이터를 체인으로 쌓는 TypeScript 예제로 Decorator의 구조를 살펴보고, HOC와의 차이를 정리합니다. 같은 결정 구조가 Wrapper 컴포넌트와 Compound Component 사이에서 어떻게 다른 답을 내놓는지, 그리고 덧붙임에는 어떤 윤리가 따라오는지를 함께 봅니다.

read →
  • 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 →