안녕하세요, 프론트엔드 개발자 박민호입니다.

2026.04 – 2026.07 · 4개월Frontend 전체 단독 개발

임직원 3만 명 목록 가상화로 스크롤 지연 제거

• 캘린더 · 칸반 · 검색 전 화면을 단독 설계·개발하고 초기 아키텍처와 공통 UI 체계를 수립
• 15분 단위 스냅, 반복 일정 예외 규칙(이번만 / 이후 모두) 등 기성 캘린더 라이브러리로 충족할 수 없는 요구사항을 드래그앤드롭 엔진부터 직접 구현
• 임직원 3만 명 전원을 한 번에 그려 스크롤이 멈추던 화면을 가상화로 전환 — 실제 렌더링 항목을 화면에 보이는 수십 건으로 축소
• 반복 일정을 드래그할 때마다 원래 자리로 되돌아가던 현상을 화면 표시 → 캐시 갱신 → API 호출 3단계로 역추적해 제거
• SSO 연동에서 세션 만료 시 인증 요청이 무한 반복되던 문제 해결
• API 계약 변경을 구현 전에 백엔드와 협의해 스펙에 선반영 — 양측 재작업 없이 반영
• 프로젝트 구조·네이밍·API 레이어 패턴을 컴벤션 문서로 정리해 후속 투입 인력이 따라올 수 있는 상태로 인계

• React 19
• TypeScript
• Vite
• TanStack Query
• Zustand
• Tailwind CSS 4
• Radix UI
• dnd-kit
• react-window

2026.04 – 2026.06 · 3개월Frontend (한수원 프로젝트와 병행)

드래그 중 차트 재렌더링 0회 · 레거시 5,000줄 제거

• 시나리오 목록 · 상세 · Design 탭을 퍼블리싱부터 API 연동까지 전 과정 개발
• 뉴스 박스를 드래그할 때마다 차트 전체가 다시 그려져 끊기던 구조를 별도 레이어로 분리 — 드래그 중 재렌더링 0회
• 구형 화면과 시나리오 그룹 구조를 신규 설계로 재편 — 레거시 코드 5,000줄 이상 제거
• 가격 예측 차트·테이블 개발 및 Excel 업로드 검증 파이프라인 구축 — 파일 수 · 용량 · 확장자 · 실제 형식 · 파일명까지 5단계로 검증해 잘못된 데이터의 시스템 유입 차단
• SK C&C와 함께 진행한 대규모 구축 사업에서 시나리오 워크벤치 모듈을 담당 — 여러 상세 화면에 중복되던 헤더를 공통 컴포넌트로 추출

• React 19
• TypeScript
• Vite
• Emotion
• MUI
• TanStack Query
• Chart.js
• ReactFlow

2025.04 – 2026.02 · 11개월Frontend (Admin, User)

초당 1,200건 실시간 데이터 환경의 메모리 크래시 제거

• 기존 전력설비 통합관리 플랫폼의 코드베이스를 분석해 대한전선 요구사항(측정·진단·이력)에 맞게 이식 — 실시간 통신 구조와 전역 상태 설계를 재구성하면서 기존 기능과 신규 기능이 함께 동작하도록 유지
• 초당 1,200건의 실시간 장비 데이터를 처리하는 화면이 장시간 운영 시 메모리 부족으로 멈추던 문제를 해결 — 상태 관리 라이브러리 내부에 남던 캐시와 차트에 계속 쌓이던 이전 데이터를 원인으로 규명하고, 캐시 정책과 차트 갱신 방식을 교체해 연속 운영 환경에서 크래시 제거
• 케이블 부분방전(PD) 진단 데이터를 트렌드 · 히트맵 · 3D로 시각화한 실시간 모니터링·알람 화면과 변전소 단선도 작화 에디터 개발
• 차트 이미지가 포함된 일일·월간 진단 리포트를 자동 생성해 운영자의 수기 리포트 작성 업무 제거
• 진단 리포트 양식과 화면 요구사항을 도메인 담당자와 협의해 확정하고, 사용자·관리자 가이드를 직접 작성해 현장에 인계

• React 18
• TypeScript
• Vite
• Recoil
• TanStack Query
• ECharts
• echarts-gl
• ReactFlow
• docxtemplater

2024.06 – 2024.10 · 5개월Frontend

화면마다 반복되던 지도 구현을 공통 컴포넌트로 제거

• 모든 지도 화면이 공유하는 공통 지도 컴포넌트를 설계 — 줌·그리기·현위치 등을 옵션으로 켜고 끕게 만들어 화면마다 반복되던 지도 구현 제거
• 운영구역(GeoFence) 드로잉 도구 개발 — 지도에서 직접 구역을 그리고, 허용 범위를 벗어나면 자동 되돌림, 편집 실행취소까지 지원
• 정류장·지역·업무 관리 도메인을 담당 — 허용 구역 안에만 정류장이 배치되도록 검증하고, 지도 드래그로 주행 경로를 생성·편집하는 기능 구현
• QA가 등록한 이슈 티켓을 담당 도메인 기준으로 처리 — 지역 범위 오설정, 정류장이 존재하는 지역의 수정 정합성 가드, 노선 등록·수정 검증 등

• React 18
• TypeScript
• Vite
• Zustand
• TanStack Query
• stompjs
• MapLibre GL
• vanilla-extract

2022.11 – 2024.12 · 26개월Frontend + Spring Batch 스케줄러

26개월 단일 운영 담당 · 차량 위치 갱신 60초 → 10초

• 노선 · 시간표 · 기사 · 예약 · 결제 운영 전반을 기획부터 운영까지 전담
• 결제 현황·환불 화면과 정산 로직 구현 — 환불 수수료 원단위 절사, 부분 취소 시 미탑승 인원 반영, 0원 결제·탈퇴 회원 환불 등 정산 예외 케이스까지 처리
• 노쇼 예약 처리와 운행 스케줄 생성을 배치로 자동화 — 버스가 예약 정류장을 통과하면 미사용 승차권을 바우처로 전환하고 안내 문자 발송, 30분 주기로 일별 노선·회차·시간표를 중복 없이 생성
• 고객·임직원·셔틀 웹과 기사용 앱 개발 — 예약·결제 플로우, QR 승차권 발권·검표, 실시간 차량 위치 지도(갱신 주기 60초 → 10초) 구현
• 쿠폰 기능은 기획 논의부터 운영 대응까지 전 주기 담당 — 할인 조건·회차별 적용 등 정책 변경을 기획과 조율해 반영
• 26개월간 단일 운영 담당 — 장애 대처·신규 노선 추가 런북을 단독 작성해 운영 지식을 문서화하고, 월별 정시성 등 운영 데이터 Excel 내보내기 기능 다수 개발

• Vue 3
• TypeScript
• Quasar
• Pinia
• Vite
• Java 11
• Spring Boot
• Spring Batch

Frontend · Backend · Infrastructure 전 영역 단독 개발

기획부터 개발·배포·운영까지 단독 수행

• 기획부터 개발·배포·운영까지 단독 수행 — 프론트·백엔드·인프라 전 영역 직접 구축
• 실시간 통신을 목적별로 분리 — 멀티플레이어 게임은 WebSocket(STOMP), 알림은 SSE로 나눠 채널별 연결 비용과 신뢰성 요구를 다르게 처리
• Gemini API로 음식 사진에서 영양 정보를 자동 추출하고, 브라우저 단 이미지 압축으로 업로드 트래픽과 서버 부하 절감
• 코드 Push 한 번으로 빌드부터 Kubernetes 배포까지 이어지는 GitOps 파이프라인을 직접 구축 (TLS 인증서 자동 갱신 포함)
• Kubernetes 환경에서 WebSocket 연결이 계속 끕기던 문제를 라우팅 세션 고정 설정으로 해결
• PWA — Service Worker로 모바일 설치 및 오프라인 지원

• Next.js 16
• React 19
• TypeScript
• TanStack Query
• Zustand
• Tailwind CSS 4
• Radix UI
• Spring Boot
• JPA
• Kubernetes
• ArgoCD
• GitLab CI