AST를 활용해 업데이트가 필요 없는 퍼널 문서 만들기

판매자 입점 과정처럼 조건에 따라 수많은 분기가 발생하는 퍼널(Funnel) 구조는 수기로 문서를 작성할 경우 코드 변경을 즉각 반영하지 못해 금방 Outdated된다는 문제가 있다.

이를 해결하기 위해 코드를 실행하며 경로를 기록하는 런타임 분석 대신, 코드를 트리 구조로 파싱하여 분석하는 정적 분석(Static Analysis) 방식을 도입했다. **AST(Abstract Syntax Tree)**를 활용해 코드 내의 내비게이션 정보를 추출함으로써 문서와 코드의 동기화를 자동화한다.

구현 프로세스는 다음과 같다:

• FileScanner: glob 패턴을 사용하여 Next.js 프로젝트 내의 페이지 파일들을 탐색한다.
• Data Structure: 출발지, 목적지, 이동 방식(push/replace), 분기 조건, 쿼리 파라미터 등을 포함하는 NavigationEdge 구조를 설계한다.
• NavigationExtractor: ts-morph 라이브러리로 AST를 파싱하여 router.push() 등의 호출 패턴을 찾고, 부모 노드를 추적해 조건문(if 문 등)을 추출한다.

이 과정을 통해 코드의 변경 사항이 문서에 즉각 반영되는, '절대 낡지 않는' 퍼널 문서를 구축할 수 있다.