진짜 개 삽질 한 썰 푼다. Unexpected token '<'

진짜. 저 에러를 만나고부터 내 삶이 달라졌다.
진짜다. 성격이 좀 더러워 진 것 같다. 진심으로.
정말 별거 아닌 이유로 해결되었지만,
이 정도로 이틀 내내 에러 하나로 고생 한 건 처음이다.

이 글은 "코드 에디터 기능 구현" 과 "Unexpected token '<'" 에러를 만난 분들이 읽기 적합하다.

사건의 발단

교내 전공동아리 프로젝트로 온라인 저지 사이트와 게임 기능을 결합한 서비스를 기획했고, 프론트를 맡아 많은 기능 중에서도 "인 게임 페이지" 를 맡아 코드 에디터 기능을 만들어야 했다.

동아리 친구가 관련 라이브러리를 추천 해 줬고, 위 글을 따라하니 정말 금방 코드에디터가 작동했다. 완벽했다. 칭찬도 받았다. 진짜.... 완벽했는데.....

사건의 전개

어느정도 개발이 진행 된 후, 자체 QA를 진행 중 이었다.

"이거 왜 자동완성이 안돼?"

코드 에디터 기능에 꼭 필요한 자동완성 기능이 추가 되어있지 않다는 사실을 발견했고, 당연히 내 몫이 되었다.

처음엔 별 생각 없었다. 그냥 뭐... 추가하면 되겠지. 하고 구글링을 열심히 한 결과.
너무 복잡 해 보였다. 모나코 에디터에 자동완성 기능을 직접 추가하는 것 보다, 자동완성 기능이 완벽히 되어있는 다른 라이브러리를 찾기로 결정했고.

https://2yh-develop4jeon.tistory.com/53
이 블로그를 찾아보게 되었고, ACE editor를 사용하기로 마음먹었다.

import AceEditor from "react-ace";


import "ace-builds/src-noconflict/mode-c_cpp";
import "ace-builds/src-noconflict/theme-monokai";

여기서 AceEditor를 임포트하고, 내가 사용하는 언어와 테마를 함께 임포트했다.

<AceEditor
 mode={language === "c" ? "c_cpp" : language}
 theme="monokai"
 height="20rem"
 width="100%"
 fontSize={16}
 value={code}
 onChange={(value) => setCode(value || "")}
 setOptions={{
 enableBasicAutocompletion: true,
 enableLiveAutocompletion: true,
 enableSnippets: true,
 }}
 editorProps={{ $blockScrolling: true }}
/>

그리고 이렇게 코드 에디터를 작성했다.

하지만, 제일 필요했던 자동완성 기능이 작동하지 않았고
인터넷 서칭을 더 열심히 한 결과

https://github.com/securingsincity/react-ace
ACE-editor 이 깃허브 리드미에서

import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-java";  //사용할 언어 임포트
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/mode-c_cpp";
import "ace-builds/src-noconflict/theme-monokai" //사용할 테마 임포트;

이 임포트 문을 복사해 붙여넣으니
매우 잘 작동하게 되었다.

사건의 절정

그러나... 그 임포트 문을 추가하자 마자, 기능이 잘 됨과 동시에
이런 미친 에러를 발견했다. 정말 어이가 없는건, 코드에 빨간 줄이 생긴 것도 아니었고, 실행 시에 No issue found가 떴으며, 저 에러를 지우면 그대로 자동완성 기능이 잘 실행됐다는 것이다.

이미 이 전 부터 모나코 에디터를 사용 해 보려 지지고 볶다 많이 지쳐있는 상태였다. 그런 상태에서 똑같은 에러를 3~4 시간 만지다보니 미쳐버렸다.

GPT, 구글링 등 웬만한 방법은 다 사용해 봤지만 저 에러 하나가 사라지지 않았다.

결국 폭발 ^^ 하지만 정말 착하고 좋은 동아리 친구들이 함께 에러를 고쳐주기 위해 도와줬다. 거마워.....

사건의 결말

결국 동아리 친구가 함께 찾아주다가....

https://github.com/securingsincity/react-ace/issues/1318
-> 이 글을 참고했다며

import 'ace-builds/src-noconflict/mode-javascript' //자바스크립트 사용시에 팔요함

이 임포트 문을 추가 해 봐라고 추천해줬고...

원래 에디터를 사용한 코드에 필요가 없다고 생각이 들었던

 enableSnippets: true,

이 부분을 삭제했더니....

대... 성... 공...

친구들에게 감사 인사를 하고... 또 나도 잔뜩 칭찬을 받았당.

최종 코드

import AceEditor from "react-ace";


import "ace-builds/src-noconflict/mode-javascript"; //중요
import "ace-builds/src-noconflict/ext-language_tools"; //자동완성 기능을 위해 필요
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-python";

이렇게 임포트 문을 작성하고

<AceEditor
        mode={language}
        theme="monokai"
        height="20rem"
        width="100%"
        fontSize={16}
        value={code}
        onChange={(value) => setCode(value || "")}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
        }}
        editorProps={{ $blockScrolling: true }}
      />

필요없는 options을 지웠더니 말끔하게 해결 됐다.