1,000라인의 Custom Expression Engine으로 템플릿 폭증 문제 해결

How We Built an Expression Engine Inside Image Templates

Suyash Thakur2026년 4월 16일17분intermediate

AI 요약

Context

단순 변수 치환 방식의 이미지 템플릿 구조로 인해 조건별 템플릿 수가 기하급수적으로 증가하는 Combinatorial Nightmare 발생. 비즈니스 로직이 템플릿 내부가 아닌 애플리케이션 코드에 산재하여 마케터와 디자이너의 잦은 엔지니어링 요청이 병목 지점으로 작용.

Technical Solution

보안 위협이 큰 eval()과 HTML 기반의 String Template Language를 배제하고 FabricJS Canvas Object 속성을 직접 제어하는 전용 엔진 설계
Tokenizer와 Recursive Descent Parser를 구현하여 사용자 입력 식을 안전하게 분석하고 Sandboxed Context 내에서 실행하는 구조 채택
JSONPath 기반의 Data Mapper를 통해 API 요청 데이터를 추출하고 이를 Expression Engine의 변수 컨텍스트로 매핑하는 파이프라인 구축
Short-circuit Evaluation 기법을 적용하여 논리 연산의 효율성을 높이고 structuredClone()으로 루프 처리 시 객체 복제 성능 최적화
45개의 내장 함수를 포함한 1,000라인 규모의 경량 엔진을 통해 Canvas 객체의 가시성 및 속성을 동적으로 결정하는 로직 구현

실천 포인트

1. 사용자 입력 기반의 로직 실행 시 eval() 대신 Tokenizer-Parser 기반의 샌드박스 엔진 검토

2. 복잡한 조건부 렌더링이 필요한 경우 템플릿 분리보다 템플릿 내 조건부 표현식(Expression) 도입 고려

3. 데이터 변환(Data Mapper) -> 로직 처리(Expression Engine) -> 최종 렌더링(Canvas Renderer)의 단계적 파이프라인 분리 설계

태그

#Sandboxing #Recursive Descent Parser #DSL #Expression Engine #FabricJS

원문 읽기