monaco-editor를 사용해보면서 만났던 문제들

failed to decode downloaded font ~~

• webpack에서 사용하다가, lib 내부에서 폰트를 다운로드 하는 경로가 달라 오류가 발생

• 그래서, cdnpkg.com의 ttf파일 경로를 font-face에 명시해주어서 해결

• 폰트 이름은 codicon.ttf

참고 링크

@font-face {
    font-family: 'codicon';
    src: url('https://www.cdnpkg.com/monaco-editor/file/codicon.ttf/') format('truetype');
}

webpack에서 monaco lib을 인식하지 못하는 경우

• webpack.config.js에 추가 내용이 필요함

• monaco-editor-webpack-plugin을 설치하는 방법으로 해결 가능

참고 링크

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
	entry: './index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'app.js'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.ttf$/,
				use: ['file-loader']
			}
		]
	},
	plugins: [new MonacoWebpackPlugin()]
};

webpack 5부터는 asset modules을 file-loader, url-loader 대신 사용하는 것을 고려해야 함

• 참고 링크