• JSP·jQuery 기반의 10년 이상 된 레거시 프로젝트를 React 기반 SPA로 마이그레이션하며 DX 개선과 시스템 고도화를 주도한 경험

• Module Federation·Turborepo·Vite 등을 활용해 멀티 패키지 구조와 CI/CD 파이프라인을 직접 설계·구축, 확장성과 안정성을 동시에 확보

• 5년간 고객 VoC 해결, 인쇄 실패율 최소화, 복잡한 필터링, 대량 데이터 처리 등 사용자 경험 중심의 최적화 구현

• 50여개의 필터와 대규모 테이블을 다루는 관리 시스템에서 열 고정, 낙관적 업데이트, SSE 기반 실시간 처리를 적용해 성능과 반응성을 고려한 개발

• 멀티테넌트 환경과 AWS S3, URL 길이 제한, JSP + HMR 등 제약 조건을 분석한 뒤 Node.js BFF를 도입해 구조적 대안 설계 및 문제 해결

• AI를 활용한 프로젝트 최신화(react 18 → 19, recoil → jotai)및 e2e 테스트로 안정성 확보

• 레거시 코드 및 서비스 정리·공유 후 프로젝트 구조와 환경 구성 설계

• Module Federation + Turborepo 기반 Host-Module 멀티 패키지 구조 설계

• 컴포넌트 단위 모듈과 페이지 단위 모듈을 분리하여 재사용성 확보

• 멀티테넌트 환경에서 AWS S3 제약을 해결하기 위해 Node.js BFF 설계·구현

• 서버에서 받아온 dataKey-value 조합을 이용해 가변적 화면 구성

• zod를 활용해 데이터 유효성 검증 및 폼 상태 관리

• Jest + ReactTestingLibrary를 통해 공통 모듈 안정성 강화

• 단일 페이지 내 다수의 UI 인터랙션 최적화를 고민 및 구현

• 40+ 기능을 단일 흐름으로 통합, 관리 효율성 향상 및 오류 감소

기술 스택 : React, Typescript, TurboRepo, Module-Federaton, Emotion, Zustand, TanstackQuery, Zod, MSW, Jest, ReactTestingLibrary

• URL 길이 제약을 극복하기 위해 BFF + form page 구조로 문제 해결

• 평가자용 페이지

  • 최초 노출 항목을 제외한 나머지를 lazy import 처리

  • LNB 상하 동시 Sticky 커스텀 스크롤 구현 (네이버 메인 우측 바 유사)

• PDF 인쇄 기능

  • useSuspenseQuery 데이터 fetch 완료 보장

  • requestAnimationFrame + img load event로 이미지 로드 감지

  • HTML 태그 삽입 → 서버 감지 후 PDF 인쇄 수행

• jQuery 모듈 재사용(public 폴더) 및 defer 적용으로 스크립트 최적화

• DevOps 협업으로 ECS 배포 Docker 작성

• 인쇄 관련 VoC 95% 해소, PDF 실패율 감소, 반응성 및 유지 보수성 개선

기술 스택 : React, Typescript, TurboRepo, Emotion, Zustand, TanstackQuery

• SPA 프로젝트 초기 환경 설정 및 Docker 배포 프로세스 구축

• 4종류의 복합 필터 구조 (상단 그리드·검색·상세·테이블) 설계

• 가상 스크롤 + 테이블 열 고정 기능으로 성능 최적화

• 낙관적 업데이트 적용으로 사용자 경험 개선

• SSE 기반 대량 발송 상태 UI 구현

• 관련 VoC 90% 이상 해결, 렌더링·응답 속도 개선, 모듈 재사용성 강화

기술 스택 : React, TypeScript, Vite, RTK, RTK Query

• 고객 VoC 기반 기능 개선 및 유지보수 수행

• 레거시 분석 및 개선 과정에서 협업 능력 강화

• JSP 프로젝트에 React + Webpack 도입 및 Dev Mode 지원을 위한 BFF 추가

기술 스택 : JSP, JQuery, React, Typescript, Sass

• React SPA 기반 판매자/구매자, 카카오 로그인 기능 모바일 UI 구현

• 출시 1개월 내 MAU 10만+ 달성

기술 스택 : React, RTK, MUI