이번 프로젝트를 위해 Excalidraw 라이브러리를 사용하기로 했다. 어제는 패키지를 설치하고 내 프로젝트에서 에디터를 불러오는 것까지 성공했다. 오늘은 에디터를 우리 사이트에 맞게 이것저것 만져보고, '그림그리기' 폼을 구성해야 한다.
excalidraw 에디터 언어 설정
프로젝트에 처음으로 Excalidraw 컴포넌트를 불러오는 데 성공하면, 기본으로 영어 설정이 되어 있다. 이것을 한국어로 바꿔보자.
공식문서에서 Excalidraw 컴포넌트의 prop으로 다양한 설정을 전달할 수 있다는 것 같아서 살펴보다가, langCode를 발견했다. 초깃값이 'en'이라서 영어로 되어 있는 것 같으니, 처음에는 이걸 'kr'로 바꿔보았다.
- 잘못된 코드
<>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw langCode="kr" />
</div>
</>이렇게 실행했는데 한국어 적용이 되지 않았다. 아니 선생님께서 english를 en으로 적으셨길래 저도 korean을 kr로 적었을 뿐인데요... 그게 안된다 하시면... 저보고 무엇을 어쩌라는. . .... .
문서를 더 살펴보니, Excalidraw에는 디폴트 언어 뿐만 아니라 지원하는 언어들이 함께 들어 있다는 것 같다. 근데 어디요...? 어디서 언어들을 찾아야 하는지 전혀 감이 오지 않았다. node_modules폴더에서 찾아야 되나 싶어서 폴더들도 뒤져봤지만 범람하는 파일 속에서 원하는 부분을 찾기가 쉽지 않았다.
languages를 import하는 부분이 조금 신경쓰인다. import하면 사용할 수 있는 건가 싶었다. 게다가 type이 배열이라는 걸 보니까 더 확신이 생겼던 것 같다.
문서에서 본대로 languages를 import하고 콘솔에 찍어보기로 했다.
와우내 바우내 나온다 나와
제일 끝 30번에 한국어 정보가 있다! 감사합니다... 고맙습니다... 여기 쓰여있는 코드대로 ko-KR을 입력해주었다.
에디터가 한국어 바-죤으로 바뀌었다. 편-안
