Files
2nd/10_Wiki/Topics/Frontend/Parser.md
T
2026-05-10 22:08:15 +09:00

4.8 KiB
Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-parser Parser 10_Wiki/Topics verified self
JS Parser
JavaScript Parser
AST Parser
none A 0.9 applied
frontend
parser
ast
swc
oxc
babel
2026-05-10 pending
language framework
JavaScript/Rust SWC/oxc/Babel

Parser

매 한 줄

"매 source code → AST 의 변환기". 매 tokenizer (lexer) → parser → AST tree. 2026 frontend 매 Babel (JS) → SWC (Rust) → oxc (faster Rust) 의 evolution. Vite 7 / Next 16 / Turbopack 의 내부 매 oxc/SWC.

매 핵심

매 Pipeline

  • Lexer (Tokenizer): 매 character stream → token stream (const, x, =, 1).
  • Parser: 매 tokens → AST (Abstract Syntax Tree) — VariableDeclaration { kind: 'const', declarations: [...] }.
  • Transformer: 매 AST 의 modify (JSX → JS, TS → JS, ES2025 → ES5).
  • Generator: 매 AST → source code (codegen).

매 Modern Parsers (2026)

  • oxc (Boshen, Rust): 매 fastest — Babel 의 50-100×, SWC 의 3×. Vite 7 default.
  • SWC (Vercel, Rust): 매 Next.js / Turbopack 의 backbone. Babel 의 20×.
  • Babel (JS): 매 legacy ecosystem 의 최대 plugin 호환성. 매 새 project 에서 비추.
  • esbuild (Go): 매 bundler 내장 parser — Vite dev 의 default.
  • Acorn: 매 ESLint 9 의 default parser.

매 응용

  1. Bundling: 매 Vite/Webpack/Turbopack 의 module graph 빌드.
  2. Linting: 매 ESLint/Biome 의 rule 적용.
  3. Type checking: 매 TS Compiler / SWC @swc/plugin-tsc.
  4. Code transformation: 매 JSX, TS, decorator, JSX-runtime, optional chaining.

💻 패턴

Babel 의 AST 분석

import * as parser from '@babel/parser';
import traverse from '@babel/traverse';

const code = `const x = 1 + 2;`;
const ast = parser.parse(code, { sourceType: 'module' });

traverse(ast, {
  BinaryExpression(path) {
    if (path.node.operator === '+') {
      console.log('Found addition:', path.node.left.value, '+', path.node.right.value);
    }
  },
});

SWC programmatic

import { parse, transform } from '@swc/core';

const ast = await parse('const x: number = 1;', {
  syntax: 'typescript',
  target: 'es2022',
});

const { code } = await transform('const x: number = 1;', {
  jsc: { parser: { syntax: 'typescript' }, target: 'es2020' },
});

oxc parser (Rust crate)

use oxc_allocator::Allocator;
use oxc_parser::Parser;
use oxc_span::SourceType;

let allocator = Allocator::default();
let source = "const x = 1;";
let source_type = SourceType::default();
let ret = Parser::new(&allocator, source, source_type).parse();
println!("{:#?}", ret.program);

Custom Babel plugin

export default function ({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        if (path.node.name === 'foo') {
          path.node.name = 'bar';
        }
      },
    },
  };
}

AST node 직접 생성

import * as t from '@babel/types';
const node = t.variableDeclaration('const', [
  t.variableDeclarator(t.identifier('x'), t.numericLiteral(42)),
]);
// → const x = 42;

ESLint custom rule

export default {
  create(context) {
    return {
      VariableDeclaration(node) {
        if (node.kind === 'var') {
          context.report({ node, message: 'Use let/const instead of var' });
        }
      },
    };
  },
};

매 결정 기준

상황 Parser
New Vite project oxc (default)
Next.js / Turbopack SWC (built-in)
Custom transform plugin (rich ecosystem) Babel
Bundler dev mode esbuild
Lint custom rule Acorn (ESLint default)
Rust toolchain oxc

기본값: oxc 또는 SWC — 2026 매 Babel 의 production 사용 비추.

🔗 Graph

🤖 LLM 활용

언제: codemod 작성, 매 lint rule, custom transformer (CSS-in-JS extraction, dead code elimination). 언제 X: 매 simple regex 로 충분한 substitution — AST overkill.

안티패턴

  • Regex 로 JS parsing: 매 nested template literal / comment 를 매번 break.
  • Babel new project: 매 SWC/oxc 의 50× 빠름 — legacy plugin 없으면 마이그레이션.
  • AST mutation in place: 매 path API 사용 — direct node assignment 시 traversal 깨짐.

🧪 검증 / 중복

  • Verified (oxc 0.40, SWC 1.10, Babel 8 docs, Vite 7 release notes).
  • 신뢰도 A.

🕓 Changelog

날짜 변경
2026-05-08 Phase 1
2026-05-10 Manual cleanup — modern parser landscape (oxc/SWC) 강조