| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 메일자동화
- python
- React
- javascript
- github actions
- 아키텍처
- Kotlin
- 백엔드
- 크롤링
- playwright
- 상태관리
- typescript
- next.js
- php
- 인증
- contextBridge
- Vite
- 보안
- 마이그레이션
- JWT
- 소셜로그인
- FastAPI
- sqlite
- electron
- 온디바이스AI
- Android
- 배포
- 도메인설계
- REST API
- 프론트엔드
Archives
- Today
- Total
목록Context (1)
HM소프트
스텝 위저드 UX와 전역 상태 설계 — 이미지 텍스트 교체 도구 (2)
React 스텝 위저드의 상태 분산 문제를 useReducer와 Context 전역 상태로 푼 설계를 다룬다. 이미지·영역·줄·단어 4단 계층을 액션으로 불변 갱신하고, 변경 안 함을 null로 표현하며, OCR 비동기 상태와 단계 이동 규칙까지 한 곳에 모아 단계를 오가도 편집 내용이 보존되게 한 이미지 텍스트 교체 도구 사례다. 2편: 위저드와 상태1편에서 OCR + 오버레이 엔진을 다뤘다. 이번 편은 그 엔진을 감싸는 사용자 흐름(UX)과 상태 설계다. 입력이 여러 종류라, 한 화면에 다 욱여넣지 않고 단계로 나눴다.왜 스텝 위저드인가이 도구는 한 번에 여러 종류의 입력을 받는다. 표 데이터, 카드형 항목, 이미지 갤러리, 부가 텍스트 정보. 이걸 한 화면에 다 펼치면 사용자가 압도된다. 그래서 스..
기술 개발일지
2026. 6. 12. 01:18