브라우저에서 보기 ↗
김재경 프로필

김재경

Frontend Engineer

문제를 끝까지 파고들어 구조로 개선하는 개발자

6년차 프론트엔드 엔지니어로, 라오스 O2O 플랫폼 KOKKOK의 React 기반 서비스 10개와 랜딩 페이지 3개를 설계·개발하며 2~6인 규모의 팀을 리드해왔습니다.

10개의 서비스를 모노레포로 통합하고, 수동 배포를 CI/CD로 자동화했으며, 런타임 타입 검증 체계를 도입해 API 불안정성으로 인한 장애를 줄이는 등, 초기 번들 최대 92% 감소와 개발 서버 기동 최대 88% 단축까지 팀 전체의 개발 속도와 안정성을 끌어올려왔습니다.

Tech Stack

Core

ReactTypeScriptNext.jsTanStack QueryZustandReact Hook FormZodEmotion

Platform / DX

TurborepoTypiaMSWi18nextGoogle Maps APIpnpmViteVitest

Infra

GitHub ActionsAWS S3/CloudFrontAWS ECR/EC2DockerVercel

Side

SupabaseFlutterDartR2Drizzle ORMRechartsTailwindCSSPlaywright

Experience

StorybookReduxRedux-ToolkitRedux-SagaStyled-components

타입 안전 API 검증

글 읽기 →

Typia 런타임 검증 + RecursiveUndefined(별칭 Pessimistic) 타입 설계. API 명세 불일치 시 서비스 중단 없이 대응, 불일치 필드 즉시 특정으로 디버깅 시간 단축. 팩토리 함수로 공용화해 10개 앱 전체에 동일한 검증 자동 적용. 검증 dev 모드 분리로 개발 서버 기동 최대 88% 단축 (53.8초 → 6.3초)

모노레포 아키텍처

글 읽기 →

pnpm workspace + Turborepo 기반 전환. 10개 앱이 동일 공용 패키지 사용, 공용 코드 200개+ · 테스트 2,245개로 핵심 로직 안전망 확보

CI/CD 자동화

글 읽기 →

React(SPA) 배포 파이프라인을 빌드·배포 2단계로 분리, validation 워크플로우로 배포 전 자동 검증. 모노레포 안에서도 서비스별 독립 배포, 배포·롤백 수 분 내 처리

번들 최적화

lazy import · manualChunks · 배럴 파일 1,600개 제거. 초기 번들 최대 92% 감소 (4,990kB → 375kB), index.js 최대 91% 감소 (925kB → 86kB)

전역 상태 최적화

ContextAPI 기반 전역 상태를 Zustand + selector로 전환해 리렌더링 범위 최소화. useModal 과도한 구독으로 인한 로그아웃 시 401 + 흰 화면 버그 수정, Header 전체 리렌더링 제거 (React DevTools Profiler 확인). 공통 코드를 packages/로 이동해 10개 앱 전체 일괄 적용.

Career

코코넛사일로

Frontend Engineer / FE Team Lead

2020.12 ~ 현재

라오스 O2O 플랫폼 KOKKOK. React 기반 서비스 10개, Next.js 랜딩 페이지 3개 설계·개발·운영. 2021년부터 2~6인 FE 팀 리드.

  • TypeScript 도입, 모노레포 전환, Vite 마이그레이션 등 스택 전환 시점과 방향 결정
  • 로컬 셋업·코드 컨벤션·아키텍처·배포 프로세스 문서화 — 신규 입사자가 문서만으로 자립 온보딩, 커뮤니케이션 비용 절감
  • 타입 네이밍 규칙, 컴포넌트 패턴, 사전 PR 체크리스트 수립
기술 전환TypeScriptTanStack QueryVitepnpmTurborepoMSW

Side Projects

자산 관리 스튜디오

Live ↗

Solo (기획·설계·개발·배포 전 과정)

2026.05

주식·ETF·예금·부동산·코인 등 12개 자산 유형을 통합 관리하는 풀스택 웹앱. 수익률·IRR 자동 계산, 실시간 시세 연동, Playwright E2E·Vitest 단위 테스트.

Next.jsReact 19TypeScriptSupabasePlaywrightVercel

주보 뷰어 PWA (잠실중앙교회)

Live ↗

Solo (기획·설계·개발·배포 전 과정)

2026.06

모바일·태블릿·웹 전 기기에서 쓸 수 있는 반응형 PWA로 실사용자 대상 운영 중. R2 Cache-Control · next/image · cache tag revalidate 3중 캐싱으로 이미지 네트워크 요청 최소화, 크롤링 기반 일괄 등록 파이프라인 구현. Flutter 기반 iOS/Android 앱도 함께 개발해 출시 준비 중.

Next.js 16TypeScriptDrizzle ORMSupabaseR2Flutter

Education

삼성 청년 소프트웨어 아카데미 (SSAFY 3기)

2020.01 ~ 2020.12

고려대학교 (세종) 제어계측공학과

2013.03 ~ 2020.02