AST에 대한 고찰

 

 

---

 

AST란?

 

배경

 

자바스크립트는 1995년 브렌던 아이크가 설계한 당시부터 지금까지 계속해서 발전하였다.

아무 자바스크립트 프로젝트의 Dependencies만 확인해봐도 JS 툴들이 얼마나 많이 발전했는지 알 수 있을 것이다!

현재는 JavaScript 툴링, 코드 압축(minification), CSS 전처리기, ESLint, Prettier 등 수많은 도구들이 존재한다.

 

이러한 확장 프로그램들은 프로덕션 코드에는 포함되지 않는 자바스크립트 모듈임에도 불구하고  개발 과정에서 중요한 역할을 수행한다.

그렇다면 해당 모듈들은 어떻게 사용될 수 있는 것일까?

왜냐하면, 이러한 도구들은 모두 AST 처리를 기반으로 구축되었기 때문이다.

 

 

---

 

AST의 정의

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

추상 구문 트리(Abstract Syntax Tree, AST) : 프로그래밍 언어에서 코드의 문법적 구조를 추상화하여 표현한 트리 구조

 

각각의 노드는 소스코드의 변수, 연산자, 제어문, 함수 호출과 같은 구성 요소를 나타낸다.

AST는 코드의 구조적 의미를 표현하는 데 집중하기 때문에 괄호, 들여쓰기, 세미콜론 등의 구체적인 문법 요소는 포함하지 않는다.

 

---

 

1. AST 생성

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

AST는 컴파일러에 의해 소스코드로 부터 추출된다.

High-Level Language가 AST가 되려면 다음 두 단계를 거쳐야 한다.

1. Lexical analysis : 어휘 분석
2. Syntax analysis : 구문 분석

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

첫 번째 단계인 Lexical analysis(어휘 분석)는 Lexical analyzer(어휘 분석기)가 수행한다.

Lexical analyzer은 Lexer(렉서), Scanner(스캐너)라고도 불린다.

 

어휘 분석기는 사전 정의된 규칙을 통해, 코드(문자 스트림)을 토큰으로 결합한다.

소스코드가 문자 단위로 하나하나 스캔되며 공백, 연산자 기호, 특수 기호가 발견되면 단어가 완성되었다고 간주된다.

이 과정에서 공백 문자, 주석 등에 제거된다.

결과적으로, 전체 코드 문자열은 토큰 목록으로 분할된다.

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

두 번째 단계인 Syntax analysis(구문 분석)은 Syntax analyzer(구문 분석기)가 수행한다.

Syntax analyzer은 Parser(파서)라고도 불린다.

 

구문 분석기는 어휘 분석으로 만들어진 토큰 목록의 언어 구문을 검증한다.

구문 오류가 있다면 에러를 검증하며, 오류가 없다면 토큰 목록을 트리 구조로 변환한다.

 

구문 분석기에 따라 완성되는 트리 구조는 두 종류이다.

• AST (Abstract Syntax Tree)
• CST (Concrete Syntaxt Tree)

AST는 언어를 실행하는 데 필요한 최소한의 의미를 남기거나, Syntactic Sugar 등이 처리된 결과이다.

반면, CST는 코드 실행에 무관한 공백, 주석 등의 정보도 100% 포함한다.

 

---

 

2. AST 사용

 

지금까지 AST를 생성하는 과정을 보았다.

이제 여러 사례를 보며 AST가 어떻게 사용되는지 알아보자!

 

Babel

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

Babel : 자바스크립트 컴파일러

 

Babel은 다음 3단계를 거치며 컴파일을 수행한다.

1. parse : 파싱
2. transform : 변환
3. generate : 생성

이 과정에서 Babel은 AST를 구축하고, 적용된 플러그인에 기반하여 AST를 탐색 및 수정한 후, 수정된 AST에서 새로운 코드를 생성한다.

 

JSCodeShift

 

출처 : https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

 

JSCodeShift : 페이스북에서 만든 JavaScript/TypeScript 코드 수정 도구

 

대량의 코드 수정이 필요하면 IDE의 Find & Replace 기능을 사용할 수 있다.

그러나, 해당 기능은 안전하게 코드를 수정하는 데에는 한계가 많다.

 

JSCodeShift를 사용하면 모든 익명 함수를 arrow function으로 변환하거나, 모든 console.log() 문을 삭제하는 등의 코드 수정 작업을 원클릭으로 안전하게 수행할 수 있다.

JSCodeShift는 AST를 통해 다음과 같은 과정으로 코드를 수정한다.

1. AST 파싱 : 파일의 소스코드를 AST로 파싱
2. 수정할 노드 선택 : AST에서 수정할 노드를 선택
3. 수정 : 선택한 노드를 JSCodeShift가 제공하는 유틸리티로 변경
4. 내보내기 : 수정된 AST를 자바스크립트 소스코드로 내보내기

 

Prettier

 

 

Prettier : 코드의 형식을 변환하는 라이브러리

 

프리티어는 코드의 긴 줄을 끊거나, 공백 및 괄호를 제거한다.

이를 위해, 프리티어는 소스코드를 입력받고, 수정된 코드를 반환한다.

역시나, 이러한 과정에서 AST가 사용된다.

 

 

---

 

 

참고:

https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers