피드로 돌아가기
Where React for IaC came from
Dev.toDev.to
Infrastructure

TSX의 계층 구조를 활용한 Terraform JSON 렌더링 엔진 Dinghy 설계

Where React for IaC came from

mrduguo2026년 5월 17일5intermediate

Context

환경별 중복 설정이 많은 Terraform HCL 코드의 유지보수 한계 및 CDKTF의 Boilerplate 코드 증가로 인한 가독성 저하 발생. 특히 리소스 간 관계 설정을 위해 부모 참조를 수동으로 전달하는 Handle Threading 방식의 구조적 비효율성 확인.

Technical Solution

  • TSX의 중첩 구조를 인프라의 계층 구조(VPC > Subnet > Instance)와 일치시켜 소스 코드와 런타임 형태를 동기화한 설계
  • React의 상태 관리 및 라이프사이클을 배제하고 단일 방향 Tree-walker를 통한 Terraform JSON 일회성 렌더링 엔진 구현
  • useContext를 활용하여 하위 리소스가 부모 리소스의 참조값을 자동으로 획득하게 함으로써 명시적 Prop Drilling 제거
  • React를 웹 UI 라이브러리가 아닌 일반 목적의 Tree-building 엔진으로 정의하여 렌더링 타겟을 HTML에서 Infrastructure JSON으로 확장
  • 선언적 UI 패턴을 IaC에 적용하여 인프라 구성 요소의 시각적 관계를 코드로 직접 표현하는 추상화 계층 구축

- 반복적인 IaC 설정 시 단순 모듈화를 넘어 구성 요소 간의 계층 구조를 반영할 수 있는 추상화 모델 검토 - 복잡한 종속성 전달이 필요한 시스템 설계 시 Context API와 유사한 의존성 주입 패턴 적용 가능성 확인 - 특정 프레임워크의 핵심 엔진(Tree Rendering)과 부가 기능(State Management)을 분리하여 목적에 맞게 선택적으로 활용

원문 읽기