JavaScript 컴파일러에 대한 이해
소개
Custom JavaScript 컴파일러에 대한 인사이트는 무엇이 있을까??
왜 JavaScript 컴파일러를 만들어야할까?
JavaScript 컴파일러를 만드는 과정
1. JavaScript 실행 파이프라인 이해
JavaScript 코드는 브라우저 엔진(예: V8)에서 다음과 같은 단계를 거쳐 실행됩니다:
예시:
let x = 5 + 3;이라는 코드가 실행되기까지 구문 분석 → 컴파일 → 실행 과정을 거친다.
2. 어휘 분석(Lexical Analysis)
어휘 분석은 코드에서 키워드, 식별자, 연산자 등 의미 있는 최소 단위인 토큰으로 분리합니다.
예시 코드:
let x = 5 + 3;생성된 토큰:
3. 추상 구문 트리 생성
AST는 프로그램의 구문적 구조를 계층적인 트리 형태로 나타낸 것입니다. 이는 코드의 논리와 구성 요소를 검사할 수 있게 합니다.
예시 코드:
let x = 5 + 3;생성된 AST:
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": { "type": "Identifier", "name": "x" },
"init": {
"type": "BinaryExpression",
"operator": "+",
"left": { "type": "Literal", "value": 5 },
"right": { "type": "Literal", "value": 3 }
}
}
]
}
]
}4. 의미 분석
AST의 의미를 분석해 코드가 언어 규칙을 준수하는지 확인합니다.
예시:
let x = "hello" + 5; // 올바른 코드, 결과는 "hello5"
let y = "hello" - 5; // 에러 발생: 문자열에서 숫자를 뺄 수 없음5. 코드 생성
AST가 의미적으로 유효하다면 이를 실행 가능한 코드로 변환합니다.
예시:
위 AST는 다음과 같은 JavaScript 코드로 변환됩니다:
let x = 5 + 3;