[Korean FE Article] 프런트엔드 아키텍처 시각화하기
이해하기 쉬운 프런트엔드 아키텍처 다이어그램을 그리는 방법
소개
오늘은 12월 이진우님이 공유해주신 2024 프론트엔드 뉴스 한 방에 몰아 보기 글에서 알게 된 C4 모델을 활용해 아키텍처를 시각화하는 방법에 대한 글을 번역해 봤습니다. C4 모델은 소프트웨어 시스템을 다양한 추상화 수준(시스템 컨텍스트, 컨테이너, 컴포넌트, 코드)에서 시각화하는 방법론으로 다양한 분야에서 사용하고 있는데요. 이 글에서는 저자가 프런트엔드 계층을 추상화 수준에 맞춰 정리하고 시각화하는 방법에 대해 이야기하고 있습니다. 도움이 되셨으면 좋겠습니다. 😃
목차
프런트엔드 아키텍처 시각화하기
코드의 지도
레벨 1: 시스템 컨텍스트 다이어그램
레벨 2: 컨테이너 다이어그램
레벨 3: 컴포넌트 다이어그램
레벨 4: 코드 다이어그램
프런트엔드 아키텍처를 위한 C4 모델 적용
레벨 3: 컴포넌트 → 모듈
레벨 4: 코드 → UI 분해
살펴볼만한 링크들