정건우

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

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

• 프로젝트 리딩: 코드 리뷰, 기술 방향 설정, 스프린트 태스크 분배 및 일정 관리
• Turborepo 기반 모노레포 구조 설계: 3개 브랜드 포탈이 공통 컴포넌트/훅/유틸을 공유하는 구조 구축
• 디자인 토큰 시스템 구축: Figma 토큰을 CSS 변수로 자동 변환하는 파이프라인 구축, 3개 브랜드 간 UI 일관성 확보
• React Hook Form + Zod를 사용한 복잡한 폼 검증 구현
  • 다단계 폼 Wizard 상태 관리와 유효성 검증 통합
  • 비제어 컴포넌트로 전환하여 폼 렌더링 성능 개선 (React Profiler 측정)
• i18n 운영 자동화: 번역 키 누락 감지 CI 구축, 새 키 추가 시 번역 시트 자동 업데이트로 배포 후 번역 누락 0건 유지
• 글로벌 서비스에서 국가별 데이터 보호 규정(GDPR/CCPA) 대응: 국가별 데이터 처리 정책을 프론트엔드 미들웨어로 구현

• CloudFront 캐시 전략 수립으로 정적 자원 응답 시간 210ms -> 85ms로 개선 (CloudFront Metrics 기준)
• Prefetch 및 클라이언트 캐싱으로 페이지 전환 시 LCP 1.8s -> 0.9s (Lighthouse CI 측정)
• Home 페이지 초기 API 호출 지연 개선 (Playwright 환경별 네트워크 타이밍 측정)
  • Guard chain 순차 구조(useEffect 기반)로 ConsentGuard 완료까지 API 호출 지연 2.5~3s 발생
  • HomePrefetcher를 ConsentGuard의 sibling으로 배치, AuthGuard 통과 직후 Guard 검사와 병렬로 prefetchQuery 시작
  • Playwright로 3G/일반 네트워크 환경 Before/After API 타이밍 검증
    • 3G: ConsentGuard -> API 간격 1873ms -> 1207ms (36% 개선)
    • 일반: ConsentGuard -> API 간격 374ms -> 140ms (63% 개선)

• MSA 환경에서 도메인별 인증 방식과 요청 헤더가 달라 클라이언트 요청 실패 증가
  • 이중 액세스 토큰 구조: A 액세스 토큰으로 B 액세스 토큰을 발급받는 Child 인증 흐름 구현
  • A 토큰 만료 시 B 토큰도 연쇄 무효화되는 문제 해결: A 갱신 -> B 재발급 -> 대기 요청 재시도 순서 보장
  • 도메인별로 다른 요청 헤더 값을 관리하는 통합 HTTP 클라이언트 구현
  • 큐잉으로 토큰 갱신 중 동시 요청 최대 50건 처리, 인증 성공률 99.7% (Datadog 측정)
  • Mutex 패턴으로 중복 토큰 갱신 요청 방지

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

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

• 차량 등록/인허가 워크플로우 UI 및 상태 머신 기반 프로세스 관리 구현
• SSR + 클라이언트 하이드레이션 최적화로 초기 로딩 2.1s -> 1.2s (Lighthouse 측정)
• PDF 뷰어 컴포넌트 구현
  • 가상 스크롤링으로 대용량 문서(500p+) 렌더링 지원, 메모리 사용량 70% 절감 (Memory Profiler 힙 스냅샷 비교)
• 역할 기반 접근 제어(RBAC) UI 구현으로 3개 브랜드 × 48개국 권한 매트릭스 관리

• GitLab CI/CD 파이프라인 구축
  • 태그 기반 자동 빌드/배포, 테스트 커버리지 80% 이상 유지
  • Blue-Green 배포로 무중단 배포, 롤백 5분 이내
  • 배포 사이클 2주 -> 3일로 단축 (GitLab Analytics 기준)

Claude Code CLI, GitLab CI/CD, JIRA API, SonarQube API, Python, Shell Script

SonarQube CRITICAL/BLOCKER 이슈 탐지부터 JIRA 티켓 생성, AI 코드 수정, GitLab MR 생성까지 전 과정을 자동화한 CI/CD 파이프라인

• 매일 07:00 KST 스케줄 트리거로 SonarQube API에서 CRITICAL/BLOCKER 이슈를 자동 수집 (500건씩 페이지네이션, 최대 10,000건 처리)
• JIRA label 기반 중복 방지: SonarQube 이슈 key를 label로 저장해 별도 DB 없이 처리 이력 추적
• Claude Code CLI를 비대화형 모드로 실행, 파일별 이슈 목록을 프롬프트로 전달해 코드 자동 수정
  • 이슈 외 파일 접근, 스타일 변경, 무관한 리팩토링 금지 프롬프트로 수정 범위 제한
• Dynamic Child Pipeline으로 JIRA 티켓 수에 따라 병렬 잡을 동적 생성, FO/BO 동시 처리
• 가장 최신 release/YYMMDD 브랜치를 자동 감지하여 티켓별 독립 MR 생성 (cherry-pick 기반)

• 타임아웃 문제: 단일 잡에서 전체 이슈 순차 처리 후 GitLab 15분 타임아웃 초과
  • JIRA 티켓(파일 그룹) 단위로 잡 분리 + 병렬 실행으로 해결, 일부 잡 실패 시 나머지 잡 정상 완료
• 이슈 외 코드 수정 문제: 느슨한 프롬프트로 Claude가 관련 없는 코드까지 수정
  • 허용 파일 목록 명시, 스타일, 리팩토링 변경 금지 항목 구체화로 해결

• 이슈 발견 -> 코드 수정 -> JIRA 티켓 -> MR 생성 4단계 전 과정 자동화로 반복 작업 공수 91% 절감 (수동 6SP -> 코드리뷰 0.5SP, 스프린트 추정 기준)
• 처리 속도 5배 향상, 동시 처리 건수 10배 증가 (FO/BO 병렬 + 티켓별 병렬)

Claude Code CLI, Playwright MCP, GitLab MCP, TypeScript

팀 6명 규모의 프론트엔드 개발 효율화를 위한 Claude Code 커스텀 스킬, 에이전트 체계 설계 및 Playwright MCP 기반 E2E 테스트 플랜 자동화 환경 구축

• Claude Code 커스텀 스킬 7종 설계 및 팀 배포
  • 구현 중심: react-component-implementation, tanstack-query-pattern, form-validation-pattern
  • 협업/자동화: review-checklist, jira-ticket-implementation, gitlab-mr-draft, playwright-automation
• 역할 분리 Agent 3종 설계: frontend-implementer(구현), reviewer(검증), refactor-agent(개선) - 책임 경계 명문화로 AI 작업 중첩 방지
• Playwright MCP 연동: 브라우저 E2E 테스트 시나리오 자동화, ID/PWD 자동 입력 + OTP 수동 입력 하이브리드 인증 플로우 구현, 인증 상태 저장, 재사용으로 반복 로그인 제거
• GitLab MCP 연동: Claude Code 내에서 직접 MR 생성, 조회 가능한 워크플로우 구축
• GitLab CI/CD 연동: Playwright 테스트 플랜을 파이프라인에 통합하여 PR 시 E2E 검증 자동 실행

• JIRA 티켓 수신 -> 코드 구현 -> 리뷰 -> MR 생성 전 단계 자동화, 개발자 투입 공수 97% 절감 (이슈 확인/코드수정/티켓작성/MR생성 전 단계 자동화)
• 팀 코드 패턴을 스킬로 문서화하여 코드 리뷰 지적 사항 감소 및 신규 팀원 온보딩 시간 단축

Next.js 13, TypeScript, React Query, Turborepo

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

• SSR + JSON-LD 기반 SEO 최적화로 검색 노출 순위 개선 (Google Search Console 측정)
• 차량 상세 페이지 로딩 최적화로 이탈률 18% 감소, 체류 시간 25% 증가 (GA 분석)
• WCAG 2.1 AA 준수, 접근성 점수 67 -> 91 (Lighthouse 측정)
• 지연 로딩 + next/image 최적화로 LCP 2.4s -> 1.1s, CLS 0.25 -> 0.05 (WebPageTest 측정)

React 18, TypeScript, Redux, React Query, AntDesign, Webpack, Jenkins

연동사 의존 서비스를 자체 플랫폼으로 전환. 복잡한 체이닝 폼 UI 구현 담당

• 체이닝 폼 상태 관리: 20단계 이상의 입력 플로우를 상태 머신으로 관리
• 캘린더 컴포넌트 렌더링 구조 개선으로 셀 단위 렌더링 비용 85% 절감 (React Profiler 측정)

• table 기반 캘린더에서 input 삽입 시 전체 리렌더링 발생 (Performance 탭 측정, 800ms+)
  • div 기반 가상화 구조 + React.memo로 120ms로 개선
  • row 단위 격리 렌더링으로 변경 영향 범위를 단일 행으로 제한
• 입력 폼 30개+ 필드의 실시간 렌더링으로 성능 저하
  • ContextAPI + Ref 기반 uncontrolled 패턴으로 전환, 렌더링 횟수 90% 감소 (Profiler commit 횟수 비교)
• Webpack HMR 사용 시 메모리 누수 (30분 내 힙 2GB+ 도달)
  • 힙 스냅샷으로 hash 옵션에 의한 번들 누적 원인 파악, 해당 옵션 제거로 해결

연동사 월 구독 비용 약 300만 원 절감, 상품 품질 개선으로 전환율(CVR) 5% 상승 (내부 A/B 테스트 기준)

Next.js 13, TypeScript, React Query, Turborepo, SWC, Sentry, Jenkins, Docker, AWS ECR/ECS/EC2, Lighthouse, Github Actions

마이리얼트립 숙소/투어/렌터카 상품 통합 플랫폼. MSA 기반 서브도메인 구조의 프론트엔드 담당, 프로젝트 메인테이너

• MSA 기반 서브도메인 프론트엔드 모듈 구현 및 의존성 정의
• React Query 캐싱 전략: staleTime/cacheTime 최적화로 API 호출 40% 절감 (Datadog APM 측정)
• 쿼리스트링 <-> UI 상태 양방향 싱크 구현 (deep-link 지원)
• 신입 개발자 1명 멘토링
• PR 시 Lighthouse CI 기반 성능 회귀 방지 파이프라인 구축

• 로컬스토리지 기반 상태 훅이 탭 간 동기화되지 않아 결제 플로우 이탈 발생
  • StorageEvent + 커스텀 이벤트 기반 크로스 탭 동기화 훅으로 해결
• @tanstack/react-virtual에서 Safari 크로스 브라우징 이슈 (Sentry 기준 iOS 유저 15% 영향)
  • 오픈소스 라이브러리에 직접 PR 제출하여 해결
  • https://github.com/TanStack/virtual/pull/518

숙소 상품 GMV 월 7000만 원 증가, 예약 전환율 3.2% 개선 (내부 BI 및 GA 퍼널 분석)

React, TypeScript, Emotion, framer-motion, Storybook, yarn berry

마이리얼트립 리브랜딩에 맞춘 디자인 시스템 구축. 6개 프로덕트 팀에 컴포넌트 제공

• Compound Component 패턴 기반 컴포넌트 구현
• 웹뷰 네이티브 브릿지 컴포넌트(바텀시트, iOS DatePicker) 구현
• Conventional Commits 기반 자동 버전 범핑 + Changesets 배포 파이프라인 구축
• 신입 개발자 페어 프로그래밍 및 QA 프로세스 정립

• Scroll prevent가 iPad OS 13에서 미작동 (Sentry 기준 해당 기기 사용자 8%)
  • navigator.maxTouchPoints로 디바이스 구분하여 해결
• 상호작용 컴포넌트 중첩 시 validateDOMNesting 에러
  • ContextAPI로 컴포넌트 중첩 제약을 두어 빌드 타임에 방지
  • 해결 과정 블로그 공유: https://www.zigae.com/react-nested-components/

TypeScript, React 17-18, React Query, Redux

관리자 부재 상태의 숙소/렌터카 도메인 인수, 레거시 정리 및 코드 현대화

• 레거시 코드 분석 후 점진적 리팩토링 로드맵 수립
• Suspense + ErrorBoundary 기반 에러 핸들링 구조 도입
• Redux -> React Query 마이그레이션으로 보일러플레이트 60% 제거 (git diff stat 기준)

• useEffect 남용(컴포넌트당 평균 3-4개+)으로 무한 루프 및 디버깅 어려움
  • hooks 기반 단방향 데이터 플로우로 재구성
  • 컴포넌트당 useEffect 평균 0.7개로 감소, useEffect 버그 약 80% 감소 (Jira 레이블 추적)
• LocalStorage 스키마 변경 시 기존 데이터 충돌로 에러 증가
  • 버전 관리 가능한 LocalStorage 어댑터로 하위 호환성 보장

TypeScript, React 17-18, React Query, Github Actions

• Frontend libs: FE 공통 모듈 모노레포 구축, 8개 프로젝트에서 공유 모듈 활용
• Setup script: 신규 입사자 온보딩 자동화 스크립트로 셋업 시간 2시간 -> 15분 단축 (온보딩 리트로 5회 실측 평균)
• Actions: 깃허브 액션 이벤트 슬랙 알림 커스텀 액션 개발 및 Marketplace 배포 Marketplace

• 공통 모듈 테스트 시 Lint + Jest 12분+ 소요로 CI 병목 (Actions workflow 로그 기준)
  • Barrel 파일 간 순환 참조로 모듈 해석 인스턴스 무한 생성 원인 파악
  • Barrel 파일 제거 + 직접 import로 전환, 빌드/테스트 시간 12분 -> 5분 (CI 전후 비교)

Next.js 11, TypeScript, Redux, Docker, AWS(ECS, ECR, Fargate)

PHP/jQuery 기반 레거시 커머스 플랫폼을 React/Next.js로 전환하는 프로젝트에 참여

• PG 결제 모듈 연동 및 결제 플로우 구현
• 아토믹 디자인 패턴 기반 컴포넌트 설계 참여
• Redux 상태 정규화 및 redux-persist 타입 이슈 오픈소스 기여로 해결
• Docker 기반 AWS ECS/Fargate 배포 환경 구축 참여