AST 익스플로러 및 시각화 가이드: 추상 구문 트리 이해하기
코드 에디터가 구문 오류를 어떻게 감지하는지, 혹은 ESLint가 어떻게 코드를 자동으로 수정하는지 궁금해한 적이 있나요? 그 답은 바로 **추상 구문 트리(AST)**에 있습니다. AST는 소스 코드 구조를 트리 형태로 나타낸 것이며, Babel, Prettier, TypeScript와 같은 현대적인 웹 개발 도구의 근간이 됩니다.
1. 추상 구문 트리(AST)란 무엇인가요?
컴파일러나 도구가 소스 코드를 읽을 때, 단순히 긴 문자열로만 처리하지 않습니다. 대신 다음과 같은 여러 단계를 거칩니다.
- 어휘 분석(Tokenizing): 코드를 "토큰"(예: 키워드, 식별자, 연산자)으로 분해합니다.
- 구문 분석(Parsing): 이러한 토큰을 언어의 문법을 반영하는 트리 구조로 배열합니다.
결과물인 AST는 주석, 공백, 세미콜론과 같은 불필요한 세부 사항을 제거하고(그래서 "추상"이라고 합니다), 코드의 서로 다른 부분 간의 구조적 관계에 집중합니다.
2. 컴파일러, 린터, 포매터에 AST가 왜 유용한가요?
AST는 코드를 분석하거나 변환하는 도구들을 위한 공용 언어입니다.
- 컴파일러 (예: Babel, TypeScript): 최종 JavaScript를 생성하기 전에 AST의 한 버전(예: ES6)을 다른 버전(예: ES5)으로 변환합니다.
- 린터 (예: ESLint): AST를 순회하며 규칙을 위반하는 패턴(예: "no-unused-vars")을 찾고, 트리를 수정하여 오류를 "자동 수정"할 수도 있습니다.
- 포매터 (예: Prettier): 코드를 파싱하여 AST로 만든 다음, 원래의 포맷은 무시하고 일관된 규칙 세트에 따라 처음부터 코드를 다시 생성합니다.
3. JS, TS, CSS용 AST 시각화
언어마다 서로 다른 AST 사양을 사용합니다.
- JavaScript/TypeScript (ESTree): 대부분의 JS 도구는 ESTree 사양을 따릅니다. 이 트리에서 변수 선언은
VariableDeclaration노드로 표현되며, 그 안에VariableDeclarator노드가 포함됩니다. - CSS (PostCSS/CSSTree): CSS도 AST로 파싱됩니다. PostCSS와 같은 도구는 이를 사용하여 벤더 프리픽스, 변수, 중첩 등을 처리합니다.
4. AST 익스플로러 사용 방법
AST를 이해하는 가장 좋은 방법은 실제로 작동하는 모습을 보는 것입니다. **AST Explorer (astexplorer.net)**는 개발자에게 필수적인 온라인 도구입니다.
- 코드 붙여넣기: 왼쪽 창에 코드 스니펫을 넣습니다.
- 파서 선택: 언어(JavaScript, CSS, JSON 등)와 파서(예:
@babel/parser,typescript)를 선택합니다. - 트리 검사: 코드의 각 부분을 클릭하면 오른쪽 트리 구조에서 해당하는 노드를 볼 수 있습니다.
5. AST를 사용하는 일반적인 도구들
- Babel: JavaScript 트랜스파일링을 위한 업계 표준.
- ESLint:
espree파서를 사용하여 AST를 생성하는 가장 인기 있는 린터. - Prettier: 여러 파서(Babel, TypeScript, Flow)를 사용하여 AST를 구축하는 코드 포매터.
- SWC: 변환에 AST를 사용하는 빠른 Rust 기반 컴파일러.
자주 묻는 질문 (FAQ)
Q: 파서(Parser)란 무엇인가요?
A: 파서는 소스 코드를 입력으로 받아 AST를 출력으로 생성하는 소프트웨어 조각입니다. 예로는 Acorn, Babel Parser, Esprima 등이 있습니다.
Q: 소스 맵(Source Map)과 AST의 차이점은 무엇인가요?
A: AST는 분석 및 변환에 사용되는 구조적 표현입니다. 소스 맵은 변환/압축된 코드가 원본 소스 코드와 어떻게 연결되는지 브라우저에 알려주어 디버깅을 쉽게 해주는 매핑 파일입니다.
Q: AST를 사용하여 나만의 린터를 만들 수 있나요?
A: 네! ESLint와 같은 도구를 사용하면 커스텀 규칙을 작성할 수 있습니다. AST의 특정 노드 유형을 "방문"하는 방문자 함수를 정의하고 특정 조건이 충족될 때 오류를 보고하도록 합니다.