손으로 그린 그림이 아니다.
소스에서 추출한 실제 그래프다.
세 개 템플릿의 모든 모듈과 import를 소스에서 그대로 추출했다. 높이는 계층(layerIndex) — 중력이 곧 의존성 방향이다. 엣지는 오직 아래로만 흐르고, 그래프는 눈으로 보기에도 shared 위에 얹혀 있다. 위로 향하는 엣지 하나면 위반이고, 지금은 0개다.
모듈 그래프 로딩…
읽는 법
- 높이(Y) = 계층. 아래가 원시(
shared/lib), 위가 조립 루트(app). - 깊이(Z) = 세 런타임 레인 — 같은 원리가 세 판에서 같은 모양으로 반복된다.
- 크기 = 모듈의 파일 수.
- 모듈 클릭 = 그 모듈의 의존성 cone( 무엇을 import하는지, 전이적으로)만 남기고 나머지를 흐린다 — 변경의 폭발 반경을 눈으로 본다.
Invariants (live from data)
39modules
65imports
0upward edges
0cycles
React · Next.js · React Native — 동일한 코어(shared → entities → features)와 4상태 실패 모델을 공유하고, 차이는 플랫폼이 강제하는 것뿐이다. 이 표의 숫자는 소스에서 재생성되며, 위반이 생기면 그 즉시 바뀐다.