tag · 15 posts

#system-design

부록: 조직 경계와 콘웨이의 법칙 - 디자인 패턴, 시스템 수준 편 ep.14
  • series
  • develop
  • design
  • architecture
  • system-design
  • organization
  • conway-law
  • design-system
  • governance

부록: 조직 경계와 콘웨이의 법칙 - 디자인 패턴, 시스템 수준 편 ep.14

콘웨이의 법칙과 역콘웨이 기동, 팀 토폴로지의 네 유형을 정리하고 디자인 시스템 거버넌스 세 모델을 비교합니다. 기술 부채의 소유권, 문서가 코드가 되는 지점, 그리고 제품 경계와 시스템 경계가 어긋날 때 벌어지는 일을 함께 봅니다.

read →
배포 경계와 마이크로 프론트엔드 - 디자인 패턴, 시스템 수준 편 ep.11
  • series
  • develop
  • frontend
  • devops
  • architecture
  • system-design
  • typescript
  • micro-frontend
  • feature-flag
  • deployment

배포 경계와 마이크로 프론트엔드 - 디자인 패턴, 시스템 수준 편 ep.11

모놀리스에서 마이크로서비스까지의 스펙트럼을 비용 관점으로 정리하고, Module Federation과 코드 스플리팅, feature flag의 수명 주기를 다룹니다. 한 화면에 두 버전의 디자인 시스템이 섞이는 순간과 점진 롤아웃의 UX를 함께 봅니다.

read →
변경 경계와 Strangler Fig - 디자인 패턴, 시스템 수준 편 ep.12
  • series
  • develop
  • backend
  • frontend
  • architecture
  • system-design
  • typescript
  • migration
  • versioning
  • design-system

변경 경계와 Strangler Fig - 디자인 패턴, 시스템 수준 편 ep.12

Strangler Fig로 오래된 시스템을 점진적으로 교체하는 방법과 Expand-Contract로 스키마를 무중단 변경하는 순서를 정리합니다. API 버저닝의 비용과 디자인 시스템 v1에서 v2로 넘어가는 deprecation 정책, 릴리스 노트가 곧 계약서인 이유를 함께 봅니다.

read →
관측 경계와 분산 추적 - 디자인 패턴, 시스템 수준 편 ep.13
  • series
  • develop
  • backend
  • frontend
  • devops
  • architecture
  • system-design
  • typescript
  • observability
  • opentelemetry

관측 경계와 분산 추적 - 디자인 패턴, 시스템 수준 편 ep.13

로그·메트릭·트레이스의 역할을 나누고 correlation ID가 경계를 넘는 방법과 OpenTelemetry, SLI·SLO를 정리합니다. Error Boundary가 놓치는 것과 RUM, 그리고 사용자에게 보여줄 에러 ID의 설계를 함께 봅니다.

read →
상태의 경계와 서버 상태 분리 - 디자인 패턴, 시스템 수준 편 ep.07
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • state-management
  • cqrs
  • url-state

상태의 경계와 서버 상태 분리 - 디자인 패턴, 시스템 수준 편 ep.07

상태를 둘 수 있는 여섯 위치를 비교하고 서버 상태와 클라이언트 상태를 가르는 기준을 세웁니다. CQRS와 Repository를 TypeScript로 정리하고, URL이 상태를 가질 때 얻는 공유·뒤로가기·새로고침을 함께 봅니다.

read →
캐시 경계와 무효화 전략 - 디자인 패턴, 시스템 수준 편 ep.08
  • series
  • develop
  • frontend
  • backend
  • infra
  • architecture
  • system-design
  • typescript
  • caching
  • http

캐시 경계와 무효화 전략 - 디자인 패턴, 시스템 수준 편 ep.08

CDN부터 메모리까지 다섯 계층의 캐시를 짚고 TTL·태그·이벤트 기반 무효화를 비교합니다. stale-while-revalidate와 캐시 스탬피드를 TypeScript로 정리하고, 낡은 데이터를 숨기지 않고 드러내는 UI 패턴을 함께 봅니다.

read →
일관성 경계와 Saga 패턴 - 디자인 패턴, 시스템 수준 편 ep.09
  • series
  • develop
  • backend
  • frontend
  • architecture
  • system-design
  • typescript
  • saga
  • transaction
  • eventual-consistency

일관성 경계와 Saga 패턴 - 디자인 패턴, 시스템 수준 편 ep.09

트랜잭션이 닿는 범위와 닿지 않는 범위를 나누고, Saga의 보상 트랜잭션과 Event Sourcing, 최종 일관성을 TypeScript로 정리합니다. 부분 실패 상태를 사용자에게 어떤 문장으로 알릴 것인가, 되돌릴 지점을 어디에 둘 것인가를 함께 봅니다.

read →
신뢰 경계와 검증의 위치 - 디자인 패턴, 시스템 수준 편 ep.10
  • series
  • develop
  • backend
  • frontend
  • security
  • architecture
  • system-design
  • typescript
  • authorization
  • authentication

신뢰 경계와 검증의 위치 - 디자인 패턴, 시스템 수준 편 ep.10

인증과 인가를 분리하고 서버 권위 원칙과 최소 권한을 정리합니다. 토큰 저장 위치의 트레이드오프를 비교하고, 숨김과 비활성화의 차이, 에러 메시지가 흘리면 안 되는 정보, 위험한 행동 앞의 마찰 설계를 함께 봅니다.

read →
실행 경계와 렌더링 전략 - 디자인 패턴, 시스템 수준 편 ep.04
  • series
  • develop
  • frontend
  • architecture
  • system-design
  • typescript
  • rendering
  • ssr
  • rsc
  • bff

실행 경계와 렌더링 전략 - 디자인 패턴, 시스템 수준 편 ep.04

빌드 타임과 런타임, 서버와 클라이언트라는 두 축으로 실행 지점의 사분면을 그리고 SSG·ISR·SSR·CSR·RSC·Islands의 좌표를 정리합니다. hydration 비용과 BFF를 짚고, 스켈레톤 UI와 레이아웃 시프트가 이 경계의 산물임을 함께 봅니다.

read →
네트워크 경계와 회복 탄력성 - 디자인 패턴, 시스템 수준 편 ep.05
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • resilience
  • circuit-breaker
  • error-handling

네트워크 경계와 회복 탄력성 - 디자인 패턴, 시스템 수준 편 ep.05

Timeout, Retry, Circuit Breaker, Bulkhead, Fallback을 TypeScript로 정리하고 워터폴과 병렬 페칭의 차이를 짚습니다. 로딩·에러·빈 상태 3종 세트와 재시도 버튼의 정직함, 낙관적 업데이트의 롤백을 사용자에게 어떻게 알릴 것인가를 함께 봅니다.

read →
시간의 경계와 이벤트 기반 처리 - 디자인 패턴, 시스템 수준 편 ep.06
  • series
  • develop
  • backend
  • frontend
  • architecture
  • system-design
  • typescript
  • event-driven
  • message-queue
  • idempotency

시간의 경계와 이벤트 기반 처리 - 디자인 패턴, 시스템 수준 편 ep.06

동기와 비동기의 경계를 시간축에서 정리하고 메시지 큐, Pub/Sub, Outbox 패턴, at-least-once와 멱등성을 TypeScript로 다룹니다. 디바운스와 오프라인 큐를 짚고, "완료했습니다"라고 말했지만 큐에 넣은 것뿐인 상황을 정직하게 쓰는 방법을 함께 봅니다.

read →
시스템의 형태는 경계가 결정한다 - 디자인 패턴, 시스템 수준 편 ep.00
  • series
  • cover
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • boundaries

시스템의 형태는 경계가 결정한다 - 디자인 패턴, 시스템 수준 편 ep.00

객체 하나의 책임 위 층위에서 우리가 실제로 결정하는 것은 경계입니다. 이 시리즈는 코드·실행·데이터·수명이라는 네 층위에서 열세 개의 경계를 다루고, 각 경계에 이미 붙어 있는 패턴의 이름과 그 경계가 화면에 드러나는 자리를 함께 봅니다.

read →
모듈 경계와 폴더 구조 전략 - 디자인 패턴, 시스템 수준 편 ep.01
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • modularity
  • design-system

모듈 경계와 폴더 구조 전략 - 디자인 패턴, 시스템 수준 편 ep.01

응집도와 결합도를 기준으로 Package by Layer와 Package by Feature를 비교하고, 배럴 파일과 순환 참조, 모듈 경계와 번들 청크 경계의 불일치를 짚습니다. 같은 결정이 디자인 시스템과 프로덕트 사이의 선을 긋는 일에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
의존 방향과 헥사고날 아키텍처(Hexagonal Architecture) - 디자인 패턴, 시스템 수준 편 ep.02
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • hexagonal-architecture
  • dependency-inversion
  • design-tokens

의존 방향과 헥사고날 아키텍처(Hexagonal Architecture) - 디자인 패턴, 시스템 수준 편 ep.02

의존성 역전 원칙과 Ports and Adapters 구조를 TypeScript로 정리하고, 프론트엔드에서 컴포넌트가 API 스키마를 직접 아는 문제를 짚습니다. 같은 결정이 디자인 토큰의 단방향 흐름(토큰에서 컴포넌트로, 컴포넌트에서 화면으로)에서 어떻게 다시 나타나는지를 함께 봅니다.

read →
계약 경계와 런타임 타입 검증 - 디자인 패턴, 시스템 수준 편 ep.03
  • series
  • develop
  • frontend
  • backend
  • architecture
  • system-design
  • typescript
  • zod
  • schema
  • design-system

계약 경계와 런타임 타입 검증 - 디자인 패턴, 시스템 수준 편 ep.03

타입 소거와 as 단언의 위험을 짚고, Parse don't validate 원칙과 zod 기반 파싱을 TypeScript로 정리합니다. 스키마 우선과 코드 우선, codegen과 tRPC가 실제로 보장하는 것을 구분하고, 컴포넌트 계약과 headless·slot 확장점 설계, 디자인 토큰 계약까지 함께 봅니다.

read →