Jaegyeong Kim

Problem

When the API spec drifted, the service went down, and pinpointing the offending field took a long time. Components that missed undefined handling also caused repeated screen-breaking incidents.

Solution

1. 01Typia runtime validation — on every API response, mismatched fields are logged immediately and treated as undefined so the service keeps running
2. 02Generalized via a factory function — pass a type, and every one of the 10 apps gets the same validation automatically
3. 03RecursiveUndefined (alias: Pessimistic) type design — every API response field is assumed possibly undefined, forcing components to handle undefined at the type level
4. 04Typia's compile-time transform ran on every local dev server start, slowing startup — added a needTypia helper that decides whether to apply the plugin from the script name, splitting dev from dev-typia so validation stays off by default, is enabled only when checking for spec drift, and always stays on for builds

Problem

As services grew, shared components and utilities kept getting copy-pasted across repos. Fixing a bug in one place didn't propagate to the others, causing repeated version drift.

Solution

1. 01Migrated 10 scattered multi-repos into a single Turborepo-based monorepo
2. 02Structured shared code into 7 category packages — apis · components · hooks · utils · services · types · styles — with 164 components, 46 hooks, and 40 utils
3. 03Built 2,245 tests across hooks, utils, and components with Vitest + Testing Library, catching regressions before they ship

Problem

Even though 10 apps lived in one monorepo, every deploy meant a person manually repeating the same steps — a local build, S3 upload, and CloudFront invalidation for React. The procedure lived in people's heads instead of being automated, so it had to be re-explained every time ownership changed, and all that manual work meant human error kept creeping in. Rollbacks were manual recoveries that took a long time too.

Solution

1. 01React (SPA) — split build/upload from deploy across 2 GitHub Actions workflows, so an already-built version can redeploy or roll back instantly without rebuilding
2. 02A shared validation workflow automatically checks version format, per-environment permissions, and that the target AWS resources exist before every deploy
3. 03Even inside the monorepo, services deploy independently rather than all at once — any service can ship on its own schedule
4. 04Semantic versioning keeps every build in S3, enabling instant rollback

Problem

The React apps' build output was concentrated into a single index.js, making initial load slow.

Solution

1. 01Code-split with lazy imports, scoping the initial load to a per-page basis
2. 02Designed Vite manualChunks separation rules — vendor libraries, shared packages, and app code split by kind, so unchanged libraries reuse the browser cache
3. 03Removed 1,600 barrel files and moved assets/i18n into each app — blocking unused SVGs, images, and language files from being bundled

Problem

Global state was managed through ContextAPI, and components subscribed to a wider slice of state than they actually needed. So a single state change re-rendered unrelated child components too, and some of that turned into real bugs. Because useModal subscribed to the entire modals array, logging out triggered modal state reset → full re-render → API re-request with an expired token → 401 error → a blank white screen. We also confirmed via React DevTools Profiler that, since RoutePathProvider, AuthProvider, and others were ContextAPI-based, every click on the NavigationBar re-rendered every icon, button, and dropdown inside the Header.

Solution

1. 01Converted ContextAPI-based global state to Zustand + selectors, narrowing subscriptions so components only re-render when the value they actually use changes
2. 02Fixed a logout bug by narrowing useModal's subscription to only the function references it needed, removing the full modals-array subscription
3. 03Converted RoutePathProvider, AuthProvider (class instance + ContextAPI), useGoogleMap, Toast, Navbar, and others to Zustand selectors and React.memo
4. 04Replaced the useLocation dependency with window.location.pathname and a router singleton pattern, removing extra re-renders from react-router-dom state changes
5. 05Moved the improved shared code (Auth.tsx, authStore.ts, etc.) into packages/ and rolled it out across all 10 apps at once