구문 트리 질의 실험실
정규식은 문자열 조각을 찾지만 이 도구는 ES2020 구문을 ESTree 노드로 파싱합니다. FunctionDeclaration >> Identifier처럼 조상·자손 관계를 질의하고 위치와 선택 노드 JSON을 확인하세요. 코드 평가는 전혀 하지 않으며 주석은 구문 노드와 구별한 별도 어휘 항목입니다.
주요 기능
- Acorn의 고정 ES2020 Script/Module 프로필로 실제 ESTree 구문 분석
- 노드 타입·name/value/operator/kind/callee 속성의 정확 일치와 > 직접 자식·>> 자손 질의
- 중첩 함수, 식별자, 문자열 Literal과 별도 LineComment/BlockComment를 구별
- 결과의 행·열·문자 범위를 소스에서 강조하고 트리에서 다른 노드 선택
- 선택한 전체 ESTree 노드를 JSON으로 복사·다운로드하고 구문·질의 오류 위치 표시
사용 방법
- 중첩 함수·모듈·주석 예제를 선택하거나 로컬 JavaScript 코드를 붙여넣습니다.
- Script 또는 Module 파싱 목표를 고르고 ES2020 범위의 코드를 확인합니다.
- FunctionDeclaration >> ReturnStatement 또는 Literal[value="hello"] 같은 질의를 입력합니다.
- 분석을 실행하고 일치 목록이나 노드 트리에서 항목을 선택해 소스 범위를 봅니다.
- 선택 노드 JSON을 복사·다운로드하고 필요하면 질의 조건을 수정합니다.
활용 예시
- 중첩 함수 내부의 return과 바깥 return 구별
- 동일 단어가 주석·문자열·식별자 중 어디에 있는지 판별
- 특정 함수 이름의 선언과 자손 호출·식별자 위치 조사
- 모듈 export 아래 노드의 계층 관계 확인
- 간단한 코드 리뷰나 파서 학습에 쓸 ESTree 노드 JSON 살펴보기
자주 묻는 질문
어떤 문법을 지원하나요?
JavaScript ES2020의 Script와 Module만 지원합니다. TypeScript 타입 주석, JSX, 최신 ES2020 이후 구문, CSS, Python은 파싱하지 않습니다. 선택한 목표에서 유효하지 않은 코드는 오류와 위치를 표시합니다.
질의 문법은 무엇인가요?
노드 타입 또는 *를 쓰고 선택적으로 [name=value], [value="문자열"], [operator=+], [kind=const], [callee=log] 같은 속성 하나를 붙입니다. >는 직접 자식, >>는 모든 깊이의 자손입니다. 여러 조건·OR·CSS 의사 클래스·정규식 질의는 지원하지 않습니다.
주석도 AST 노드인가요?
ECMAScript 주석은 구문 트리 노드가 아닌 어휘 요소입니다. Acorn의 주석 콜백으로 따로 수집하고 가장 작은 둘러싼 노드 아래에 탐색 항목으로 배치합니다. LineComment·BlockComment 질의가 가능합니다.
코드가 실행되거나 서버로 전송되나요?
아니요. 파싱과 질의는 브라우저에서만 진행하며 eval, import, 함수 실행, 서버 요청을 하지 않습니다. JSON 저장은 사용자가 누른 뒤에만 일어납니다.
왜 결과 일부만 보이나요?
입력은 최대 16,000자, 노드는 2,500개, 질의는 240자·8단계로 제한합니다. 트리 첫 180개와 일치 첫 80개를 화면에 보여주고 전체 일치 수는 표시합니다. 노드 상한 초과는 부분 결과 대신 오류로 거부합니다.
개인정보 안내
붙여넣거나 선택한 코드는 브라우저에서만 해석합니다. 실행·eval·서버 업로드를 하지 않습니다. 내려받은 노드 JSON에는 소스 문자열이 포함될 수 있으니 공유 전 검토하세요.
댓글과 질문