[Front] Monaco Editor란?

(1) Monaco Editor

모나코 에디터란 Microsoft에서 개발한 웹 기반 코드 에디터다.

 

웹에서의 코드 편집 기능을 제공하는 라이브러리다.

 

Monaco Editor

Monaco Editor

 

웹에서 코드 에디터 기능을 제공하는 프로젝트를 개발하기 위해,

원래는 CodeMirror라는 라이브러리를 사용하려고 했다.

그런데 프로젝트 팀원 분이 Monaco Editor라는 라이브러리의

UI가 좀 더 이쁘다고 의견을 주셔서 사용하게 되었다.

---

(2) 특징

직접 사용해보니 굉장히 적용하기 간단한 모나코 에디터는 아래와 같은 특징이 있다.

 

• 언어 지원
  • JavaScript, TypeScript, CSS, HTML을 포함한 다양한 프로그래밍 언어의 구문 강조 및 코드 자동 완성 기능
• 확장성
  • 다양한 플러그인과 사용자 정의 기능을 추가할 수 있어 개발자 요구에 맞게 기능을 확장 가능
• VS Code 기반
  • Visual Studio Code에서 제공되는 편집 경험과 비슷한 기능을 웹 브라우저에서도 사용 가능
• 오픈 소스
  • GitHub에서 오픈 소스로 제공

---

(3) 설치 및 적용 방법

설치 방법은 아주 간단하다.

React 환경이라면 VSCode의 터미널에서

아래와 같은 명령어를 입력해주면 된다.

npm install @monaco-editor/react

 

그리고 아래 import를 한 뒤 사용하면 된다.

import Editor from "@monaco-editor/react"

const CodeEditor = () => {
    return (
    	<Editor/>
    )
}

 

위와 같이 사용했을 때, 어떻게 표시될까?

 

Monaco Editor 적용 화면

 

무려 코드 에디터가 웹 상에서 바로 나온다.

옵션을 건드려서 기본 언어 종류도 설정해주면

자동 완성 기능도 지원된다.

 

조낸 쉽습니다.

 

---

(4) 옵션 변경

여러 옵션도 간단하게 설정 가능하다.

아래와 같은 옵션들이 있다.

<Editor
	width="100%" // 너비
	height="100%" // 높이
	defaultLanguage="javascript" // 기본 언어 설정
	value={code} // 코드 초기값
	theme="vs-dark" // 에디터 테마
	options={{
    	wordWrap: "off", // 자동 줄 바꿈 비활성화
		scrollBeyondLastLine: true, // 마지막 줄 이후로 스크롤 가능
    	scrollBeyondLastColumn: 10, // 수평 스크롤 여유 공간 설정
		automaticLayout: true, // 에디터 컨테이너 크기 변경 시 자동 조정
        minimap: {
        	enabled: true, // 미니맵 활성화 여부
        },
    	fontSize: 14, // 글꼴 크기
        lineNumbers: 'on', // 줄 번호 표시
        readOnly: false, // 읽기 전용 아님
        tabSize: 2, // 탭 크기 설정
        insertSpaces: true, // 탭 입력 시 공백으로 처리
        cursorStyle: 'line', // 커서 스타일
        mouseWheelZoom: true, // Ctrl+마우스 휠로 폰트 크기 확대/축소
    }}
/>

 

 

아래와 같이 다크 테마와 미니맵도 잘 적용된다.

 

공식 문서에 더 많은 옵션이 제공되어 있다.

Monaco Editor

Monaco Editor

 

---

🍉 참고

• Monaco Editor를 활용해서 React 기반 프로젝트에 코드 에디터 적용하기!
• Monaco Editor