AST 추상 구문 트리

💡 코드를 작성하게 되면, 컴파일링 과정에서 코드들을 분석하여 "AST" 라는 것으로 변환을 한다.

AST는 "추상 구문 트리"이며, 프로그램의 소스코드를 쉽게 다룰 수 있도록 도와주는 자료구조이다.
쉽게 말해 우리가 쓴 소스코드를 문법에 맞게 노드들로 쪼개서 만든 트리이다.
예를 들어, 자바스크립스 컴파일 과정에서는 만들어진 AST를 기반으로 인터프리터는 바이트 코드를 생성하는 식으로 사용된다.

scanner

= Lexical analyzer(어휘 분석기)

scanner는 문자들을 하나하나씩 다 읽어서 단어단위로 끊어 다 분리시킨다.

let a = '가나다';
위와 같은 코드가 있다고 치면 아래와 같은 느낌으로 분리시키는 것이다.

[
	{value:'let', type:'keyword'},
	{value:'a', type:'identifier'}, 
	{value:'가나다', type:'Literal'}
]

위에서 말했지만, 이 스캐너는 문자들을 하나하나씩 다 읽는데, 읽다가 공백이나 연산자 또는 특수문자 등을 발견하면 분할이 된다. (주석같은 것들은 모두 제거한다.)

parser

= Syntax analyzer(구문 분석기)

scanner를 거친 뒤 만들어진 내용을 가져와 구문을 확인해보고 AST로 변환

let a = "가나다";

위와 같은 코드가 있다고 치면

{
      "type": "VariableDeclaration",
      "start": 482,
      "end": 496,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 486,
          "end": 495,
          "id": {
            "type": "Identifier",
            "start": 486,
            "end": 487,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 490,
            "end": 495,
            "value": "가나다",
            "raw": "'가나다'"
          }
        }
      ],
      "kind": "let"
    }

AST explorer

usage

AST 는 프로그램 분석, 프로그램 변환 시스템에서 사용된다.

• 트랜스 파일링
  • 바벨은 크게 3단계로 이루어진다. (parsing, transforming, generation)
  • 바벨에 자바스크립트 코드를 넘기면, AST를 활용해서 코드를 트랜스 파일링한다.
  • AST에서 노드를 제거하여 AST를 조작함으로써 변환

    import * as parser from '@babel/parser' // sanner, parser
    import generate from '@babel/generator'
    
    // string code
    const pureCode = `
     const welcome = 'hello world'
    `
    // ast
    const ast = parser.parse(pureCode)
    
    // generate
    const finalCode = generate(ast)

• 코드를 자동으로 리팩토링 해주는 JSCodeShift

JSCodeShift로 기술 부채 청산하기

• 컴파일 할 때 왜 AST를 사용한건지? // 보충
• js 엔진