NEXT.JS monaco-editor 사용방법 | 데이터카페

NEXT.JS monaco-editor 설치
command
 npm install react-monaco-editor monaco-editor

monaco-editor를 사용할때 react-monaco-editor 패키지가 Monaco Editor를 감싸서 사용하도록 되여 있어 해당 패키지 2개를 설치 해야 합니다.

page.tsx 생성 
- import react-monaco-editor 해서 사용하면 nextjs 빌드할때 오류가 발생하가 됩니다. SSR에 대한 오류이기 때문에 const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false }); 처리해야  빌드할때 오류가 안납니다.

code
"use client";
import dynamic from 'next/dynamic';
import  { useRef } from 'react';

const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false });

export default function CodeEditor() {
  const editorRef = useRef(null);

  const editorDidMount = (editor:any) => {
    console.log('Editor is mounted:', editor);
    editorRef.current = editor;
    // 에디터가 마운트되면 수행할 작업을 여기에 추가하세요.
  };

 return (
     <MonacoEditor width="800px" 
                  height="400px" 
                  language="javascript" 
                  editorDidMount={editorDidMount} 
                  value="// 여기에 코드를 입력하세요." />
  );
};