이중표

Frontend Developer

leejpsd@gmail.com/010-4615-7794/github.com/leejpsd

About

사용자가 한 순간에 몰려도 실시간 UX와 성능을 지키고, 없는 도구는 직접 만들어 배포하는 프론트엔드 개발자입니다. Django 기반 MAU 90만 서비스를 Next.js App Router로 마이그레이션하며 데이터 특성별 렌더링 전략과 캐시 무효화 아키텍처를 설계했고, WebView 하이브리드 환경의 네이티브 브리지 설계와 앱-웹 인증 동기화 경험을 갖추고 있습니다. Lighthouse 성능 점수 73→99, 렌더링 서버 비용 54% 절감, 검색 클릭 105% 증가 — 기술 개선을 검증 가능한 수치로 남기며 일합니다.

Core Competencies

01

캐시 전략 설계

캐시는 끄는 것이 아니라 제어한다 — ISR 3가지 패턴(시간/Webhook/사용자 이벤트) 설계, revalidateTag 기반 정밀 무효화로 실시간 UX와 캐시 성능 양립.

02

선언적 비동기 UI

React Query + Suspense + ErrorBoundary로 로딩/에러/성공 상태를 선언적 관리. Streaming SSR과 Skeleton UI 타이밍 설계로 체감 속도 개선.

03

WebView 최적화

iOS/Android WebView 네이티브 브리지 설계, 앱-웹 인증 동기화, 생체 인증 연동. scroll → IntersectionObserver 전환으로 60fps 확보.

04

도구 제작 & 실측 검증

필요한 도구는 직접 만들어 npm 배포 — nextjs-cache-handler, shopby-mcp, Agent Skill. AWS 인프라를 직접 구성해 실측으로 검증.

Experience

플래튼 (FLATTEN)

Frontend Developer
2022.11 — 현재
  • Django → Next.js 14(App Router) 마이그레이션 설계·주도 — Lighthouse 성능 점수 73→99 (LCP 8.6s→0.9s)
  • 데이터 특성별 렌더링 전략과 revalidateTag 캐시 무효화 설계 — 렌더링/웹 서버 13→6대 (비용 54% 절감)
  • 커뮤니티 웹/네이티브 경계 설계 — 읽기는 웹, 쓰기는 네이티브, 서버 refetch 없는 4단계 병합
  • Shopby + 사내 API 이원화 인증 설계 — race condition 중앙 제어, 만료 10분 전 선제 갱신, 앱-웹 동기화
  • 신한 SOL·솔드아웃 제휴 대응 UI/UX 개편 주도
  • Sentry 커스텀 계측 체계 구축 — 일 400건 로그인 풀림의 원인을 데이터로 증명·종결, 에러→커밋 추적 일원화
  • SEO TF(PM·AOS·BE·FE 4명) 리딩 — 3주에 검색 클릭 105%↑ · 평균 순위 12.5→6.8
  • AI 실무 적용 — Claude Code + MCP로 Sentry 고유 이슈 90% 정리(2주), npm 도구 2종 직접 배포
  • PR 리뷰 프로세스 도입, 렌더링·캐시 가이드 문서화 — 마이그레이션 기간 팀원 2명 리드

Projects

Shoeprize 슈프라이즈

MAU 90만, 동시접속 3만(서버 모니터링 기반) | 한정판 스니커즈 발매정보 플랫폼

2022.11 — 2025.08Frontend Lead

Challenge

한정판 발매 알림 시 동시접속 3만 명이 같은 순간 진입. Django SSR 구조에서 TTFB 2.8초, LCP 8.6초 발생, Lighthouse 성능 점수 73점으로 사용자 이탈 및 SEO 성능 제약. 발매 트래픽을 직접 받아내던 렌더링 서버 13대로 비용 과다 — 프론트엔드가 성능과 캐시를 독립 제어할 구조가 필요한 상황.

Solution

  • 렌더링 전략 분리: 랭킹 ISR(1h) · 투표 ISR+revalidateTag · 상품 ISR(Webhook 재검증) · 응모/개인화 CSR · 불변 데이터 SSG
  • ISR(시간 기반): 랭킹/피드 등 주기 갱신 영역에 revalidate 적용
  • ISR(이벤트 기반): Webhook → revalidatePath로 어드민 수정 시 즉시 무효화
  • ISR(사용자 이벤트): Server Action에서 revalidateTag 호출 — 투표 직후 최신 데이터 보장
  • Suspense 경계를 첫 화면(뷰포트) 기준으로 분리, Streaming SSR로 핵심 콘텐츠 우선 전달 + Skeleton UI 타이밍 설계
  • 커뮤니티 웹/네이티브 경계: 네이티브 콜백을 Zustand getState()로 스토어에 주입, useEffect 감지 후 즉시 클리어 — 서버 refetch 없이 4단계 병합으로 정확한 위치에 반영
  • WebView 브리지 설계: 웹뷰 컨트롤 및 브리지 함수 구현, 앱 개발자와 협업한 네이티브 연동

Results

73 → 99Lighthouse 성능
8.6s → 0.9sLCP
0.25 → 0.009CLS
2.8s → 1.2sTTFB
13 → 6대렌더링/웹 서버
54% 절감서버 비용
+105%검색 클릭
12.5 → 6.8평균 순위

Troubleshooting: 라우터 캐시와 실시간 UX

문제

투표 후 페이지 이동 → 복귀 시 최신 투표 수 미반영. 백엔드는 정상이나 라우터 캐시가 이전 데이터 노출. 사용자는 '내 투표가 반영 안 됐다'는 불신.

분석

Next.js 14.1 라우터 캐시는 opt-out 불가. prefetch 기본값(null)은 동적 경로 30초, prefetch={true}는 5분 캐시. prefetch={false}도 방문 이력은 30초간 캐시 유지.

해결

API 응답에 태그 부여 + Server Action에서 revalidateTag 호출로 해당 캐시만 정밀 무효화. 투표 직후 캐시 정리 → 재방문 시 항상 최신 데이터.

인사이트

캐시를 끄는 것이 아닌, 사용자 이벤트에 맞춘 정밀 무효화가 실시간 UX와 캐시 성능을 양립시키는 핵심. 이 경험을 페이지별 렌더링 경계 문서와 팀 가이드로 정리해 의사결정 기준으로 삼음.

Kasina 카시나

프리미엄 스니커즈 커머스 플랫폼 | Shopby + 사내 API 이원화

2023.08 — 현재Frontend Engineer (2025.08~ 전담)

Challenge

ShopbyAPI + 사내 API 이원화로 토큰 refresh race condition 발생 — 병렬 API 호출 시 동시 401 → 각각 refresh 시도 → 인증 실패 누적. WebView 환경에서 앱-웹 인증 동기화 구조 부재.

Solution

  • 인증 중앙 제어: isTokenRefreshing 플래그 — 첫 401만 refresh, 후속 요청은 Promise 큐 적재 후 갱신 토큰으로 일괄 재시도, 실패 시 일괄 로그아웃
  • 액세스토큰 만료 10분 전 선제 갱신(JWT exp 기반)으로 401 발생 자체를 최소화
  • AbortController 기반 요청 취소 + 멱등 요청만 선택적 재시도 (중복 결제·주문 방지)
  • Axios 래퍼로 단일 엔드포인트 인터페이스 통합, Shopby/사내 API 독립 토큰 관리
  • WebView: 네이티브 브리지로 앱-웹 인증 컨텍스트 동기화·생체 인증 연동, iOS 스크롤 scroll → IntersectionObserver 전환(60fps)
  • React Query 캐시 키 설계(사용자/장바구니/주문 도메인 분리), 낙관적 업데이트 적용
  • 운영 신뢰성: Sentry 릴리즈 트래킹·소스맵 + generateBuildId git 해시 임베딩으로 에러→커밋 추적 일원화
  • 운영 중 커머스에 테스트 127개 도입(Vitest+MSW) — 돈이 오가는 흐름부터 ROI 순서, ShopbyAPI 개편을 배포 전 탐지

Results

일 400건 → 원인 종결로그인 풀림
127개 · 2.3초테스트
만료 10분 전선제 갱신
60fps 확보iOS 스크롤

Troubleshooting: 동시 API 요청의 토큰 갱신 Race Condition

문제

장바구니·주문·사용자 정보 등 여러 API가 병렬 호출 시 토큰 만료되면 모두 401 → 각각 refresh 요청 시도 → race condition 발생. 불필요한 네트워크 비용, 일부 요청 실패.

분석

React Query의 retry 로직이 각 요청마다 독립적으로 동작. 토큰 갱신 상태를 공유하지 않아 동시에 여러 refresh 요청 발생. Shopby·Kasina 이중 API 구조에서 복잡도 가중.

해결

isTokenRefreshing 플래그로 중앙 상태 관리 — 첫 401만 refresh를 수행하고 후속 요청은 Promise 큐에 적재, 갱신된 토큰으로 일괄 재시도. refresh 실패 시 큐 전체 reject + 일괄 로그아웃. 만료 10분 전 선제 갱신으로 401 발생 자체를 최소화.

인사이트

동시 요청의 race condition을 구조적으로 방지. 분산된 비동기 요청의 동시성 제어가 커머스 안정성에 직결됨을 확인 — 단순 재시도보다 중앙화된 상태 관리가 인증 플로우의 핵심.

Flatten Corporate Site

플래튼 기업 홍보 사이트

2025.04 — 2025.05단독 담당

Challenge

신규 파트너사 영입을 위한 기업 홍보 사이트 필요. 한 달 내 기획→배포 완료 목표.

Solution

  • requestAnimationFrame + Lenis로 60fps 패럴렉스 구현
  • GPU 합성 레이어 최적화
  • 한 달 내 기획→배포 완료

Results

1개월개발 기간
파트너사 영입 기여성과

Featured Work

Education

스파르타 코딩클럽

항해99 프론트엔드 집중 과정 수료

2022.07 — 2022.10

신구대학

색채디자인과 졸업 (컬러리스트 산업기사)

2012.03 — 2017.02