정건우

React 18, TypeScript, React Query, Turborepo, Datadog, i18n

전세계 현대, 기아, 제네시스 딜러들에게 제공하는 통합 포탈 및 관리 서비스

• CloudFront 캐시 레이어 최적화로 글로벌 접근성 향상 및 응답 시간 210ms 단축
• React Hook Form 기반 복잡한 폼 처리 성능 개선 및 메모이제이션 전략 수립
• Prefetch 및 클라이언트 캐싱 메커니즘으로 페이지 로딩 시간 15% 단축

• 도메인별 인증 요구사항 처리를 위한 통합 요청 모듈 설계
  • 토큰 만료 감지 및 자동 갱신 메커니즘 구현으로 인증 성공률 99.7% 달성
  • 요청 큐잉 시스템으로 토큰 갱신 중 사용자 경험 연속성 보장
  • 중복 요청 방지 및 FIFO 기반 요청 순서 보존으로 데이터 일관성 확보
• 글로벌 데이터 보호 규정 대응
  • GDPR(유럽), CCPA(미국) 등 국가별 데이터 처리 정책 구현
  • 리전별 최적화된 캐시 전략 수립으로 글로벌 사용자 경험 향상

Next.js 13, TypeScript, React Query, Turborepo, Datadog, i18n

원앱 고객을 위한 차량 관리 시스템 및 차량 등록 콘솔 제공

• 차량 등록 인허가 기록 및 문서 등록 인허가 기록 관리
• 원앱 고객을 위한 차량 관리 시스템 및 차량 등록 콘솔 제공
• 클라이언트 사이드 렌더링 최적화로 초기 로딩 시간 약 20% 단축
• PDF 뷰어 컴포넌트 개발
  • 문서 확대/축소, 회전, 페이지 이동, 주석 기능 등 제공
• 역할 기반 접근 제어(RBAC) 시스템으로 세분화된 권한 관리 구현

• GitLab CI/CD 파이프라인 설계 및 구현
  • 태그 기반 자동 빌드 및 배포 프로세스 구축
  • 코드 품질 게이트웨이 통합 (린트, 테스트 커버리지 80% 이상 유지)
  • 환경별(개발/스테이징/프로덕션) 점진적 배포 전략 구현
  • 배포 사이클 2주에서 3일로 단축 및 롤백 메커니즘 강화

Next.js 13, TypeScript, React Query, Turborepo

기아 공식 인증 중고차 검색 및 구매 플랫폼

• 검색 엔진 최적화(SEO)
• 차량 상세 정보 페이지 로딩 성능 최적화로 초기 이탈률 18% 감소
• 반응형 디자인 및 접근성(WCAG) 표준 준수로 모바일 사용자 경험 개선
• 지연 로딩 및 이미지 최적화로 Core Web Vitals 지표 개선

React18, Typescript, Redux, react-query, AntDesign, Webpack, Jenkins

연동사의 서비스를 독립적인 서비스로 전환하여, 자사 계약 상품을 내부에서 직접 등록할 수 있도록 하는 플랫폼, 복잡한 입력 항목으로 구성된 체이닝 형태의 폼 UI

• 개발 환경에서 발생하던 메모리 누수 이슈 해결
• 입력 폼 및 복잡한 테이블 기반 UI 렌더링 최적화
• 성능 병목 구간 파악 후 캘린더 컴포넌트 리팩토링

• 초기에는 table 태그 기반 캘린더 UI 구조로 인해, 각 셀에 input 삽입 시 전체 렌더링 비용 급증
  • 구조를 div 태그 기반으로 변경하고 row 단위로 분리하여 성능 개선
  • React.memo 적용으로 불필요한 렌더링 방지
• 입력 폼의 상태가 많고 복잡하여 렌더링 최적화가 필요함
  • ContextAPI와 Ref 조합으로 uncontrolled 방식 도입, submit 시 일괄 상태 수집
• HMR 사용 시 메모리 누수 발생
  • HMR을 비활성화했을 때 문제가 사라지는 점을 바탕으로 원인을 탐색
  • 힙 스냅샷 분석을 통해 개발 환경에서의 hash 옵션이 번들 누적 생성 원인임을 파악
  • 개발 환경에서 해당 옵션 제거하여 메모리 누수 해결

연동사의 월 구독 비용을 절감하고, 상품 정보의 질을 개선하여 전환율(CVR)이 약 5% 상승하는 성과를 달성

Next13, Typescript, react-query, Turbo, SWC, Sentry, Jenkins, Docker, AWS ECR, ECS, EC2, Lighthouse, GithubActions

마이리얼트립의 숙소, 투어, 렌터카 등 다양한 상품을 통합한 플랫폼을 구축 및 MSA 기반으로 새롭게 구성하고, 서브도메인 구조를 통해 모듈화된 서비스를 제공합니다. 전체 프로젝트의 메인테이너 역할을 수행

• 상품 목록 페이지 개발 및 최적화 전반 담당
• react-query 기반 캐싱 및 캐시 미스 전략 수립
• 쿼리스트링과 UI 상태 싱크를 위한 커스텀 훅 개발
• 신입 개발자 1명을 리딩하며 일정 관리 및 코드 품질 검토
• PR 시 Lighthouse 기반 성능 모니터링 자동화(Github Actions)

• 로컬스토리지를 상태로 사용하던 기존 훅이 UI와 동기화되지 않는 문제 발생
  • 탭/창 간 동기화를 위한 커스텀 이벤트 기반 훅으로 리팩토링
• @tanstack/react-virtual 사용 시 Safari 브라우저에서 크로스 브라우징 이슈 발생
  • Safari가 지원하지 않는 프로퍼티 사용으로 인해 발생한 것으로, 라이브러리에 직접 PR 제출하여 문제 해결
  • https://github.com/TanStack/virtual/pull/518

숙소 상품의 GMV가 약 7000만 원 증가하는 결과를 도출

React, Typescript, Emotion, framer-motion, storybook, yarn berry

마이리얼트립 리브랜딩에 맞춰 디자인 시스템을 새롭게 구축 및 통합숙소 프로젝트와 병행하며 일관된 UI/UX 제공을 목표

• 신입 개발자와 페어 프로그래밍을 통해 컴포넌트 구현 및 QA 대응
• 웹뷰 중심 네이티브 컴포넌트(바텀시트, iOS DatePicker) 개발 담당
• 커밋 기반 자동 버전 범핑 및 배포 프로세스 구현

• Scroll prevent 기능이 일부 기기(iPad OS 13)에서 작동하지 않음
  • 해당 OS가 Mac으로 인식되는 문제를 touch point 기반으로 구분해 해결
• 상호작용 컴포넌트 중첩 시 validateDOMNesting 에러 발생
  • ContextAPI를 활용해 구조적인 제한을 두는 방식으로 에러를 미연에 방지
  • https://www.zigae.com/react-nested-components/

Typescript, React17-18, react-query, redux

관리자가 부재한 상태였던 마이리얼트립의 숙소 및 렌터카 도메인 유지보수 및 고도화 프로젝트

• 레거시 코드 전면 분석 및 최적화 리팩토링
• 모바일/데스크탑 분리 컴포넌트의 공통화 작업
• Suspense 및 ErrorBoundary 기반 에러 핸들링 구조 도입
• 타입스크립트 타입 안정성 확보 위한 체이닝 리팩토링

• 과도한 전역 상태 관리 및 useEffect 남용으로 디버깅 어려움
  • 상태 구조 단순화 후 redux 제거 및 hooks 기반으로 구조 재정비
• Localstorage 구조 변경으로 기존 저장값과 충돌 발생
  • 버저닝 가능한 LocalStorage 모듈을 도입해 구조 유연화

Typescript, React17-18, react-query, redux, actions

• Frontend libs: 공통 모듈 관리를 위해 FE 전용 모노레포 환경 구축
• Setup script: 신규 입사자들의 빠른 온보딩을 위한 셋업 스크립트 제공
• Build script: 환경 변수 최신 상태 유지 위한 로컬 빌드 스크립트 개선
• Actions: 깃허브 이벤트 → 슬랙 알림을 위한 커스텀 액션 개발 및 배포 Marketplace

• 공통 모듈 테스트 시 Lint 및 Jest 검사 시간이 과도하게 소요되는 문제
  • Barrel 파일 간 상호 참조로 러너 인스턴스가 무한 생성되는 현상 발견
  • Barrel 파일 제거로 빌드 및 테스트 시간 50% 이상 단축

Next11, Typescript, Redux, Docker, ECS, ECR, Fargate

php, jquery 로 되어 있던 기존 홈페이지를 리액트로 교체하는 작업

• PG 결제 연동
• 아토믹 디자인 패턴 활용
• 데이터 정규화를 통한 Redux store 관리
• AWS 인프라 구축

• redux-persist에서 store 타입이 제대로 작성 되지 않아 타입스크립트에서 타입에러 발생
  • redux-persit d.ts 파일 오픈소스 컨트리뷰트 통한 수정