Featured Articles

Decision Records

  1. Architecture
    Jan 2026
    Details
    Cesium Viewer Lifecycle Management and Crash Prevention
    ADRCesiumReactWebGLcontextlifecycle

    Fixed viewer crashes during rapid navigation by implementing per-route isolation, separated effects, and async guards

  2. Architecture
    Dec 2025
    Details
    Package Build Pipeline and Type Safety in CI
    ADRBuildCIMonorepoTurborepoTypeScripttsup

    Migrated from source-based imports to proper package builds with full TypeScript validation in CI

  3. Architecture
    Dec 2025
    Details
    RSC Directives and Bundler Limitations
    ADRArchitectureDXNext.jsRSCReactbundler

    Discovered bundler ecosystem gap with React Server Components directives, migrated UI package into web app

  4. Infrastructure
    Dec 2025
    Details
    Automatic Type Generation for OpenAPI
    APIDXOpenAPISwaggerTypeScriptautomation

    Integrated automated TypeScript type generation from Swagger/OpenAPI specs

  5. Architecture
    Dec 2025
    Details
    Renewal of Header Component
    ADRFramer MotionUI/UXdesignexperimentalstate-driven

    Redesigned header as state-driven multi-role component: landing page, navigation bar, and transition mask in one

  6. Infrastructure
    Dec 2025
    Details
    Storybook + Vitest Integration for Component Testing
    DXStorybooktesting

    Integrated Storybook stories with Vitest using @storybook/addon-vitest for unified component testing in browser environment

  7. Performance
    Nov 2025
    Details
    Timeline Improvement
    ADRNextJSSSRSoCarchitectureoptimizationperformancerefactoring

    Reduced HTML from 319 KB to 257 KB (19% reduction) and separated markdown parsing so detail sections are parsed individually using Next.js parallel & intercepting route pattern

  8. Architecture
    Nov 2025
    Details
    Portfolio to Playground Reconstruction
    ADRNextJSarchitecturerefactoring

    Redefined portfolio as playground, and migrated system from file-based dynamic routes to static routes with centralized configuration, following `cesium-utils` page's architectural pattern

  9. Architecture
    Nov 2025
    Details
    Blog System Migration
    PlaygroundADRASTCMSMarkdowncompatibilitydatabase-drivenmigrationpipeline

    Migrated the blog system and routes of this project from file-based to database-driven having custom content management system.

    Related:Playground
  10. Infrastructure
    Oct 2025
    Details
    Serverless Database Integration
    ArticleNeonPrismadatabaseedge computingserverless

    Integrated Prisma ORM with Neon PostgreSQL for serverless architecture, eliminating traditional backend framework

    Related:Article
  11. Architecture
    Oct 2025
    Details
    Timeline Implementation
    ADRcomponentdesign

    Designed and implemented timeline for the project, inspired by monolith from 2001: A Space Odyssey

  12. Infrastructure
    Sep 2025
    Details
    Testing Framework Migration
    DXJestPlaywrightVitesttesting

    Migrated from Jest to Vitest for unit tests, added Playwright for E2E testing

  13. Architecture
    Sep 2025
    Details
    Cesium Utils Page Architecture Overhaul
    ArticleNextJSSoCZustandarchitecturecontextportabilityrefactor

    Complete refactoring for portability, high cohesion, and separation of concerns using private folders and route-scoped context

    Related:Article
  14. Performance
    Sep 2025
    Details
    Resium Removal: Native Cesium
    CesiumReactbundleoptimizationperformance

    Removed Resium wrapper library (-1MB), implemented direct Cesium integration with custom React wrapper

  15. Experiment
    Jul 2025
    Details
    Micro-Frontend Experiment
    ArticleMFEmulti-zoneperformancereversal

    Implemented Next.js multi-zone architecture, then removed it after discovering 77% performance degradation

    Related:Article
  16. Infrastructure
    Jul 2025
    Details
    Docker Build Optimization
    ArticleCI/CDDevOpsDockeroptimization

    Reduced Docker image from 526MB to 346MB (34% reduction) with 99% layer efficiency

    Related:Article
  17. Performance
    Jun 2025
    Details
    Bundle Optimization
    Articlebundlelazy loadingoptimizationperformance

    Achieved 66-72% bundle size reduction through strategic lazy loading and dependency analysis

    Related:Article
  18. Infrastructure
    Mar 2025
    Details
    Package Manager Migration
    ArticlePNPMYarn Berrymonorepopackage manager

    Migrated from Yarn Berry PnP to PNPM due to Next.js standalone and Vercel monorepo incompatibility

    Related:Article
  19. Architecture
    Mar 2025
    Details
    Monorepo Architecture
    ADRYarn Berryarchitecturemonoreposcalability

    Restructured from single Next.js app to monorepo with shared packages

  20. Foundation
    Sep 2024
    Details
    Project Inception
    NextJSPnPTypeScriptYarn Berry

    Initial commit with standard single Next.js application, including various development tools and Yarn Berry PnP.

Blog

Technology-Agnostic

Architectural Playground

Juun

Playground
  1. Home
The Three Discovery Layers of Organizational DysfunctionThe Three Discovery Layers of Organizational Dysfunction
Analysis
2026년 1월 9일
5분 소요
The Three Discovery Layers of Organizational Dysfunction
소프트웨어 아키텍쳐가 드러내는 조직의 병폐: 누가, 어떻게 발견할 수 있을까?
Software Architecture: A Mirror Of OrganizationSoftware Architecture: A Mirror Of Organization
Analysis
2025년 12월 4일
8분 소요
Software Architecture: A Mirror Of Organization
소프트웨어 아키텍쳐는 왜, 어떻게 조직 구조를 반영하는가?
Micro Frontend (MFE): Common Misconceptions and Case StudiesMicro Frontend (MFE): Common Misconceptions and Case Studies
Analysis
2025년 8월 5일
9분 소요
Micro Frontend (MFE): Common Misconceptions and Case Studies
Micro Frontend (MFE) 의 개념, 과장된 장점들, 오해들과 함께 구현 방법 조사 및 사례 연구
Cloud Native Application and MSA: compared to Android OSCloud Native Application and MSA: compared to Android OS
Analysis
2025년 5월 22일
7분 소요
Cloud Native Application and MSA: compared to Android OS
Cloud Native 어플리케이션과 Microservices Architecture (MSA) 에 대한 Android OS 와의 비교 분석 및 MSA 설계의 핵심 고려사항들