김재경

Problem

API 명세와 실제 API 반환 값이 불일치 시 흰 화면이 보여 서비스를 이용할 수 없었습니다. 또한, 원인 필드 특정에 시간이 오래 걸렸습니다.

Solution

1. 01Typia로 API 응답 값과 명세를 비교해 런타임에 일치 여부 검증
2. 02불일치 필드는 즉시 로그로 기록하고 불일치하는 모든 필드를 undefined 처리
3. 03모든 API 응답 필드를 undefined 가능으로 가정하는 RecursiveUndefined(별칭 Pessimistic) 타입 설계로, 코드에서 undefined 예외 처리를 하도록 타입 레벨에서 강제
4. 04이 과정을 팩토리 함수로 공용화 → 타입만 넘기면 10개 앱 전체에 동일한 검증 자동 적용
5. 05Typia의 컴파일 타임 변환이 로컬 개발 서버까지 매번 실행되어 기동이 느려지자, 스크립트 이름으로 플러그인 적용 여부를 판단하는 needTypia 함수를 만들어 dev·dev-typia로 분리 — 평소엔 검증을 끄고 명세 불일치를 확인할 때만 켜되, build는 항상 검증을 유지

Problem

KOKKOK 플랫폼 내 서비스가 늘어날수록 관리해야 할 레포도 함께 늘어났고, 동일한 컴포넌트와 유틸이 레포마다 중복 복사됐습니다. 한 레포에서 컴포넌트 버그를 고쳐도 다른 레포에는 반영되지 않아 코드 불일치 문제가 반복됐습니다. 코드를 일치시키려면 레포 수만큼 같은 작업과 PR 확인을 반복해야 해서 업무 비효율이 컸습니다.

Solution

1. 0110개로 흩어져 있던 멀티 레포를 Turborepo 기반 모노레포 1개로 전환
2. 02공용 코드를 apis · components · hooks · utils · services · types · styles 7개 카테고리 패키지로 구조화 — 컴포넌트 164개, hooks 46개, utils 40개 등
3. 03Vitest + Testing Library로 hooks·utils·components에 테스트 2,245개 구축 → 공용 코드 변경 시 오류 사전 감지

Problem

React(SPA)는 로컬 빌드 → S3 업로드 → CloudFront 초기화 과정을 배포할 때마다 사람이 수동으로 반복해야 했습니다. 배포 절차가 문서로 작성되어 있었지만, 관리해야 할 문서도 많았고, 수동 작업이 많아 휴먼 에러도 자주 발생했습니다. 롤백도 수동 복구라 오래 걸렸습니다.

Solution

1. 01React(SPA) — 재빌드 없이 이미 올라간 버전으로 즉시 재배포·롤백할 수 있도록, 빌드·S3 업로드용과 배포·CloudFront 무효화용 GitHub Actions 2개로 단계를 분리
2. 02공용 validation 워크플로우로 배포 전 버전 형식·환경별 실행 권한·AWS 리소스 존재 여부를 자동 검증
3. 03모노레포 안에서도 10개 서비스를 한 번에 배포하지 않고, 원하는 서비스만 원하는 시점에 독립적으로 배포할 수 있도록 구성
4. 04시맨틱 버저닝으로 S3에 버전별 결과물을 보관해 문제 발생 시 즉시 이전 버전으로 롤백

Problem

초기 React 앱 빌드 결과물이 단일 index.js에 집중되어 초기 로딩이 느렸습니다.

Solution

1. 01lazy import 코드 스플리팅 — 페이지 단위로 분리해 초기 로드 범위 축소
2. 02Vite manualChunks 분리 규칙 설계 — 외부 라이브러리·공용 패키지·앱 코드를 종류별로 분리해, 변경 없는 라이브러리는 브라우저 캐시로 재사용
3. 03배럴 파일 1,600개 제거 + assets·i18n 앱별 이관 — 사용하지 않는 SVG·PNG·언어 파일이 번들에 포함되는 것을 차단

Problem

전역 상태를 ContextAPI로 관리하고 있었는데, 컴포넌트가 실제로 필요한 값보다 넓은 범위의 상태를 구독하는 구조였습니다. 그래서 상태 하나만 바뀌어도 관련 없는 하위 컴포넌트까지 전부 리렌더링됐고, 일부는 실제 버그로 이어졌습니다. useModal이 modals 배열 전체를 구독해 로그아웃 시 모달 상태 초기화 → 전체 리렌더링 → 만료된 토큰으로 API 재요청 → 401 오류 → 흰 화면이 뜨는 버그가 있었고, RoutePathProvider·AuthProvider 등도 ContextAPI 기반이라 NavigationBar를 클릭할 때마다 Header 내 모든 아이콘·버튼·드롭다운이 리렌더링되는 것을 React DevTools Profiler로 확인했습니다.

Solution

1. 01ContextAPI 기반 전역 상태를 Zustand + selector로 전환 — 컴포넌트가 실제로 쓰는 값이 바뀔 때만 리렌더링되도록 구독 범위를 좁힘
2. 02useModal 구독 범위를 필요한 함수 참조만으로 좁혀 로그아웃 버그 수정 — modals 배열 전체 구독 제거
3. 03RoutePathProvider, AuthProvider(class 인스턴스 + ContextAPI), useGoogleMap, Toast, Navbar 등을 Zustand selector와 React.memo로 전환
4. 04useLocation 의존성을 window.location.pathname과 router 싱글톤 패턴으로 대체해 react-router-dom 상태 변경에 의한 추가 리렌더링 제거
5. 05개선된 공통 코드(Auth.tsx, authStore.ts 등)를 packages/로 이동해 10개 앱 전체에 일괄 적용