liminfo

AST Explorer

JS/TS/CSS/HTML 추상 구문 트리 인터랙티브 탐색기

-Program
-VariableDeclaration
kind: const
Identifiergreeting
init= hello
-FunctionDeclarationadd
params= a, b
body= return a + b ;
-VariableDeclaration
kind: let
Identifierresult
init= add ( 1 , 2 )
-IfStatement
test= result > 0
토큰 (44)
constgreeting=hello;functionadd(a,b){returna+b;}letresult=add(1,2);if(result>0){console.log(result);}

간소화된 파서입니다. 변수 선언, 함수, if문, 표현식을 지원합니다.

AST Explorer 소개

AST Explorer는 입력한 JavaScript 코드를 구조화된 추상 구문 트리(AST)로 파싱하여 브라우저에서 바로 대화형 접이식 트리 뷰로 렌더링합니다. 파서는 변수 선언(var, let, const), 파라미터와 본문 토큰이 있는 함수 선언, return 문, 조건식이 있는 if 문, 일반 표현식 문을 처리합니다. 각 노드는 타입별로 색상이 지정됩니다: Program은 보라색, FunctionDeclaration은 파란색, VariableDeclaration은 초록색, ReturnStatement는 빨간색, IfStatement는 주황색입니다.

추상 구문 트리를 이해하는 것은 컴파일러, 트랜스파일러, 린터, 코드 포매터, Babel/ESLint 플러그인 작업을 하는 모든 개발자에게 필수입니다. 이 도구는 소스 코드가 어떻게 타입이 지정된 노드 트리로 표현되는지 시각적으로 보여주어, Babel·TypeScript·ESLint 같은 도구들이 코드를 구조적 수준에서 어떻게 분석하고 변환하는지 배우기에 좋습니다.

코드 편집기는 PrismJS를 사용하여 문법 강조를 적용하며, 투명한 textarea를 강조된 pre 요소 위에 레이어링하여 외부 IDE 없이도 풍부한 편집 경험을 제공합니다. 토큰 목록 섹션에는 코드의 모든 토큰(키워드, 식별자, 숫자, 문자열, 연산자, 구두점)이 색상과 함께 표시되어 코드의 어휘적 구조를 한눈에 파악할 수 있습니다.

주요 기능

  • 실시간 JavaScript 파싱 — 키 입력마다 AST 즉시 업데이트
  • 깊은 트리를 위한 접기/펼치기 가능한 트리 노드
  • 노드 타입별 색상 구분: Program, FunctionDeclaration, VariableDeclaration, ReturnStatement, IfStatement
  • 모든 어휘 토큰을 타입과 색상으로 표시하는 토큰 목록 뷰
  • JavaScript용 PrismJS 기반 문법 강조 코드 편집기
  • 소스 코드와 AST를 나란히 보여주는 분할 레이아웃
  • var/let/const, 함수 선언, if문, 표현식 파싱 지원
  • 100% 클라이언트 사이드 — 코드가 서버로 전송되지 않음, 로드 후 오프라인 동작

자주 묻는 질문

추상 구문 트리(AST)란 무엇인가요?

추상 구문 트리는 소스 코드의 구문 구조를 나타내는 트리 형태의 자료구조입니다. 트리의 각 노드는 변수 선언, 함수, 조건문, 표현식 등 언어의 구조에 해당합니다. 컴파일러, 트랜스파일러, 린터, 코드 포매터 모두 소스 코드를 AST로 파싱한 후 그 트리를 순회하거나 변환하여 동작합니다.

이 파서는 어떤 JavaScript 문법을 지원하나요?

내장 파서는 변수 선언(var, let, const), 이름 있는 파라미터와 본문이 있는 함수 선언, return 문, 조건이 있는 if 문, 일반 표현식 문을 지원합니다. 키워드, 식별자, 숫자 및 문자열 리터럴, 산술 및 비교 연산자, 일반 구두점을 처리합니다.

AST 노드는 어떻게 색상으로 구분되나요?

각 노드 타입은 고유한 색상을 사용합니다: Program(보라색), FunctionDeclaration(파란색), VariableDeclaration(초록색), ReturnStatement(빨간색), IfStatement(주황색), ExpressionStatement(회색). params, body, init 같은 자식 속성 노드는 기본 회색을 사용합니다. 다양한 구조 타입을 한눈에 식별하기 쉽습니다.

토큰 목록 섹션은 무엇을 보여주나요?

토큰 목록(트리 아래 접이식 토큰 섹션에 표시)은 파싱 전에 렉서가 생성한 모든 토큰을 보여줍니다. 토큰은 Keyword(보라색), Identifier(파란색), Number(초록색), String(노란색), Operator, Punctuation으로 분류됩니다. 현재 입력의 전체 토큰 수도 표시됩니다.

문법 강조 편집기는 어떻게 작동하나요?

편집기는 PrismJS로 강조된 pre 요소 위에 투명한 textarea를 겹칩니다. 입력 시 textarea가 입력을 캡처하고 코드 상태를 업데이트하면 PrismJS가 pre 레이어를 다시 강조합니다. 두 요소가 함께 스크롤되어 강조가 커서와 항상 정렬됩니다.

Babel이나 ESLint의 작동 방식을 배우는 데 사용할 수 있나요?

네. 이 도구는 Babel, ESLint, TypeScript 같은 실제 도구들이 사용하는 것과 동일한 개념적 단계(토큰화 후 재귀적 노드 트리 파싱)를 보여줍니다. 내장 파서는 간소화되어 있지만, 코드 구조가 트리 노드에 어떻게 매핑되는지 탐색하면 Babel 플러그인 API와 ESLint 규칙 선택자를 이해하는 데 도움이 됩니다.

파서가 모든 JavaScript 문법을 처리하지 못하는 이유는 무엇인가요?

이 파서는 교육 목적의 간소화된 구현으로 가장 일반적인 구조만 처리합니다. 화살표 함수, 클래스, 구조 분해, 템플릿 리터럴, async/await, 모듈 import는 처리하지 않습니다. 모든 ECMAScript 문법의 완전한 AST 탐색을 위해서는 Babel이나 Acorn 파서가 탑재된 공식 AST Explorer 웹사이트를 사용하세요.

도구가 문법 오류를 잘 처리하나요?

네. 파서는 오류에 내성을 갖도록 설계되었습니다. 인식하지 못하는 토큰 패턴을 만나면 오류를 발생시키는 대신 나머지 토큰으로 ExpressionStatement를 생성하여, 불완전하거나 문법적으로 잘못된 입력에서도 항상 트리가 렌더링됩니다.