> [!date] published: 2025-05-12 ## Monaco Editor [GitHub - microsoft/monaco-editor: A browser based code editor](https://github.com/microsoft/monaco-editor) 코드 편집기. [VS Code](https://github.com/microsoft/vscode)의 편집 기능을 웹에서 사용할 수 있도록 하는 라이브러리 ### Concepts #### Models > 모나코 에디터의 핵심. content를 관리할 때 사용한다. > <br/>Models은 열린 파일을 나타낸다. 이 때 파일은 파일 시스템에 있는 파일일수도, 아닐수도 있다. > <br/>Models은 content 텍스트를 보유하고, 언어를 결정하고, 편집 기록을 추적하는 등의 역할을 한다. #### URIs > Model은 URI로 식별된다. 그래서 Model들은 동일한 URI를 가질 수 없다. > <br/>이상적으로는 사용자가 편집중인 파일과 일치하는 가상 파일 시스템과 URI가 일치하는 것이 좋다. (이유에 대해서는 따로 설명 x. 권장사항) > <br/>URI 없이 Model을 생성하면 기본적으로 `inmemory://model/1` 이런 형태의 URI를 자동으로 생성한다 (번호는 Model 수에 맞게 증가) Model이 하나의 파일을 의미하는 만큼, 파일 시스템과 동일한 구조를 갖도록 의미 있는 URI를 직접 정의해서 사용하는 것을 권장하는 것 같다. #### Editors > 사용자가 마주하는 Model의 뷰. editor가 하는 작업으로는 > > - Model을 보여주는 것 > - view state를 관리하는 것 > - action이나 command를 실행하는 것 > > 이 있다. #### Providers > 에디터에 스마트한 기능을 제공한다. 예를 들면 코드 자동완성이나 hover information 같은 기능들이 있다. [언어 서버 프로토콜](https://microsoft.github.io/language-server-protocol)의 기능과도 완전히 동일하지는 않지만 매핑된다. > <br/>일부 스마트 기능은 파일 URI에 의존한다. > > - ts에서 import를 사용할 때 URI를 기반으로 해당 모듈의 위치를 찾는다거나 > - JSON 파일에서 어떤 JSON 스키마를 적용할지를 결정할 때 > > 그래서 Model URL을 잘 결정하는게 중요하다. #### Disposables > 많은 Monaco Model에는 `.dispose()` 메소드가 구현되어 있다. 이 메소드는 사용하지 않는 리소스를 클린업하기 위해서 사용한다. > <br/>예를 들어서 model.dispose() 를 호출하면 Model을 언레지스터하고 새로운 Model의 URI를 위해서 기존 URI를 해제한다. > <br/>리소스를 제거하고 Model 리스너를 제거하기 위해서는 Editor가 dispose되어야 한다. ## onChange 감지하기 `monaco-react`가 아니라 `monaco-editor`를 직접 사용할 때는 model의 `onDidChangeContent` 메서드로 content 변경을 감지할 수 있다. [Monaco Editor 'onChange' event? - Stack Overflow](https://stackoverflow.com/questions/48828538/monaco-editor-onchange-event) [onDidChangeContent](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html#onDidChangeContent)는 model의 content가 바뀌었을 때 발생하는 이벤트를 등록한다. ```ts onDidChangeContent(listener): IDisposable ``` 등장했던 다른 메서드인 `onDidChangeContentModel` 메서드는 사라진 것 같다. 이벤트 인터페이스는 [IModelContentChangedEvent](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IModelContentChangedEvent.html)를 참고.