BOJ-ADDON 1.0.7

문제점

자동완성의 keyword의 symbol을 나타내는 폰트에 문제가 있었다.

이전에 있었던 문제점

문제 원인

자동완성이 뜨기 이전까지는 볼 수 없는데.. 이 현상은 con와 같이 자동완성이 가능한 keyword가 있을 때 폰트를 request하면서 문제가 생긴다.

콘솔에서 볼 수 있었던 에러

 

해결책

평범한 web에서는 아마 이러한 문제가 생기지 않았겠지만, chrome extension에서는 내가 웹주소에 폰트를 올릴 수 없기 떄문에 이러한 문제가 생길 수 있다. 이 문제를 node module에 있는 monaco editor에서 찾는다는 것은.. 잘못된 방법이고, 최종적으로 생성되는 파일의

e.exports=n.p+"b797181c93b3755f4fa1.ttf"

이 부분을 수정할 필요가 있었다. 이 파일이 실행될 경로에 자동으로 생성될 텍스트 파일을 고친다는 내용이니 정규식으로 ttf"을 가지고 있는 부분을 수정하면 간단하게 해결된다. 이를 해결하기 위해서 node를 scripts에서 실행시킬 필요가 있었다.

import { readFileSync, writeFileSync } from "fs";

const initialJS = readFileSync("./dist/main.js", "utf8");
const fixedText = initialJS.replace(
  /[.0-9a-zA-Z]{1,}\+"[0-9a-zA-Z]{1,}(.ttf")/,
  '"https://unpkg.com/monaco-editor@latest/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf"'
);
writeFileSync("./dist/main.js", fixedText);

다음과 같이 command js를 만들고, webpack으로 번들링이 완료되면 마무리로 파일을 수정하여 해결했다.

 

 

해결!