Contact : [email protected] GitHub : https://github.com/zinnli Blog : https://zinnli.github.io/
• 단일 화면 구현에 그치지 않고 여러 서비스에서 재사용 가능한 구조를 고민합니다. • 변경 배경과 코드 이슈를 기록으로 남겨 유지보수에 필요한 맥락을 기록합니다. • 구현 전 여러 대안을 비교하고, 선택 기준과 결과를 팀에 공유합니다.
프론트엔드 연구원 | 2023.03 ~ 2026.04 • 여객운송 · 이커머스 · 중고차 도메인의 운영 어드민과 모바일 웹 개발 • 주문 · 배송 · 배차 · 차량 상품화 등 CRUD 화면과 상태 변경 흐름 담당 • Google Maps API 기반 출발지 · 도착지 · 이동 경로를 포함한 배차 화면 유지보수
백엔드 서버와 DB가 준비되기 전에도 실제 CRUD 흐름을 검증할 수 있도록 MSW와 Dexie를 결합한 브라우저 기반 시연 환경 구축
• API 요청을 MSW로 mock 처리해 실제 API 없이 화면 플로우 검증 • Dexie 기반 IndexedDB를 활용해 새로고침 이후에도 생성 · 수정 · 삭제 데이터 유지 • 필요한 도메인에만 MSW를 적용해 실제 API와 mock API 병행 • 새로고침 이후에도 유지되는 CRUD 흐름을 실제 사용 환경에 가깝게 재현
모노레포 내 여러 운영 어드민 앱에서 반복되던 UI와 상태 처리 로직을 재사용 가능한 공용 패키지로 구성
• 인풋 · 버튼 · 모달 등 반복 UI의 상태 처리와 이벤트 로직을 공용 컴포넌트 · 훅으로 분리 • Headless 컴포넌트 패턴을 적용해 동작 로직과 스타일 구현을 분리 • 여러 운영 어드민 앱에서 재사용할 수 있도록 모노레포 공용 패키지로 구성 • 서비스별 디자인과 기능 확장이 가능하도록 공통 동작과 화면 표현 분리 • 신규 화면의 중복 구현을 줄이고 공통 로직 변경 시 수정 범위 축소
저장 · 등록 · 상태 변경 등 주요 mutation의 성공 · 실패 · 완료 후속 처리를 공통화하고 중복 요청을 제어하는 흐름 구성
• mutationKey와 실행 중인 요청 키를 기준으로 동일 요청 식별 • TanStack Query의 useMutation을 감싸는 공통 훅을 구현 • 성공 · 실패 · 완료 이후의 데이터 갱신과 후속 처리 흐름 공통화 • 중복 요청은 성공 · 완료 콜백 흐름에 진입하지 않도록 분기해 후속 로직의 중복 실행을 방지 • 주요 mutation에 적용해 중복 클릭과 반복 실행으로 인한 API 호출 제한
차량 외관을 360도로 촬영한 영상에서 프레임 이미지를 추출해 외부 360도 이미지로 등록하는 기능 개발
• 프레임 수별 샘플을 제작하고 비교 결과를 공유해 외부 360도 이미지의 72프레임적용 기준 결정에 기 • Video · Canvas API 기반 72개 프레임 이미지 추출 • 추출 결과와 react-hook-form 상품화 등록 상태 연동 • 추출 이미지의 미리보기, 삭제, 재등록 및 프레임 추출, 업로드 상태 처리 • S3 Presigned URL 기반 다중 이미지 업로드와 상품화 저장 요청 연동