Skip to content

0. Monaco Language Provider: 웹 에디터와의 만남

'달빛 약속'은 단순히 코드를 실행하는 것을 넘어, 사용자가 코드를 작성하고 편집하는 경험까지 고려합니다. 이를 위해 마이크로소프트의 강력한 웹 기반 코드 에디터인 Monaco Editor와 연동하여 구문 강조(Syntax Highlighting) 기능을 제공합니다. monaco-language-provider 디렉터리는 바로 이 Monaco Editor가 '달빛 약속' 코드를 이해하고 예쁘게 보여줄 수 있도록 돕는 역할을 합니다.

monaco-language-provider의 역할과 구조

이 모듈의 주된 목적은 Monaco Editor에게 '달빛 약속' 언어의 문법 규칙을 알려주어, 코드를 올바르게 색칠하고, 잠재적으로는 자동 완성이나 오류 표시와 같은 고급 편집 기능을 제공하는 것입니다.

monaco-language-provider는 다음과 같은 주요 구성 요소로 이루어져 있습니다.

  • DalbitYaksokApplier (/monaco-language-provider/language.ts): 이 클래스가 Monaco Editor에 '달빛 약속' 언어 서비스를 등록하고 설정하는 메인 진입점입니다. 언어 설정, 토큰 제공자, 자동 완성 제공자 등을 Monaco에 연결하는 역할을 합니다.
  • BaseProvider (/monaco-language-provider/provider/base.ts): Monaco 언어 서비스의 기반 데이터 제공자입니다. 코드 문자열을 받아 CodeFile을 생성하고, AST를 분석하여 구문 강조에 필요한 색상 정보를 준비하고 캐싱합니다. 코드 내용이 변경될 때마다 이 캐시를 갱신합니다.
  • TokensProvider (/monaco-language-provider/provider/tokens.ts): Monaco Editor의 languages.TokensProvider 인터페이스를 구현합니다. BaseProvider가 준비한 색상 정보를 Monaco Editor가 이해하는 형태로 변환하여 구문 강조를 실제로 수행합니다.
  • nodeToColorTokens (/monaco-language-provider/ast-to-colorize/index.ts): '달빛 약속'의 AST(Node)를 입력으로 받아, 각 노드의 타입과 위치 정보를 기반으로 Monaco Editor가 이해할 수 있는 '색상 토큰' 목록(ColorPart[])을 생성하는 핵심 함수입니다. 이 함수는 AST를 깊이 우선(Depth-First) 방식으로 순회하며 각 노드에 해당하는 색상 범위를 결정합니다.

구문 강조: nodeToColorTokens 함수의 마법

Monaco Editor가 '달빛 약속' 코드를 색칠하려면, 어떤 부분이 키워드이고, 어떤 부분이 변수이며, 어떤 부분이 주석인지 알아야 합니다. 이 정보를 제공하는 핵심적인 역할을 하는 것이 바로 nodeToColorTokens 함수입니다.

nodeToColorTokens 함수는 '달빛 약속' 코드의 **AST(추상 구문 트리)**를 입력으로 받습니다. 그리고 이 AST를 순회하면서 각 노드의 타입에 따라 미리 정의된 스코프(예: SCOPE.KEYWORD, SCOPE.VARIABLE_NAME, SCOPE.NUMBER 등)를 부여하여 ColorPart 객체를 생성합니다. 이 ColorPart 객체들은 나중에 TokensProvider에 의해 Monaco Editor의 구문 강조 규칙으로 변환됩니다.

typescript
// nodeToColorTokens 함수의 간략화된 의사 코드
function nodeToColorTokens(node: ASTNode): ColorPart[] {
    const colorParts: ColorPart[] = []
    // ... 노드 타입에 따라 colorParts에 색상 정보 추가 ...
    // 예: NumberLiteral 노드 -> { position: node.position, scopes: SCOPE.NUMBER }

    // 자식 노드 재귀적으로 순회하여 색상 정보 병합
    for (const child of node.children) {
        colorParts.push(...nodeToColorTokens(child))
    }
    return colorParts
}

💡 핵심: nodeToColorTokens는 '달빛 약속'의 AST 구조를 Monaco Editor의 구문 강조 규칙으로 변환하는 번역기 역할을 합니다. AST가 정확하게 파싱되어야만 올바른 구문 강조가 가능합니다.

그 외의 기능들 (간략히)

monaco-language-provider 디렉터리에는 구문 강조 외에도 다음과 같은 기능들을 위한 파일들이 존재합니다.

  • CompletionItemProvider (/monaco-language-provider/provider/completion-item.ts): Monaco Editor의 자동 완성 기능을 제공합니다. 현재는 미리 정의된 간단한 스니펫(COMPLETION_SNIPPETS)을 기반으로 자동 완성 제안을 제공하는 기본적인 수준입니다. 향후 언어의 문맥을 이해하는 더 정교한 자동 완성 기능으로 확장될 수 있습니다.