Library:

react-code-blocks 라이브러리 사용하기

oni(오니)

intro 현재 아이콘/컴포넌트 라이브러리를 만드는 프로젝트를 하고 있다. 페이지에서 코드도 복사하여 사용할 수 있도록 하기 위해 코드 블록 라이브러리를 사용하기로 하였고, 개발 환경을 고려하여 react-code-blocks 라이브러리를 선택하게 되었다. 적용 과정을 풀어보도록 하겠다.

공식 문서는 요기 ⬇

👉 [github] react-code-blocks

👉 [npm] react-code-blocks

설치하기

npm i react-code-blocks

적용하기

import { CopyBlock } from "react-code-blocks";

function MyCodeComponent(props) {
  const copyBlockProps = {
    text: props.code,
    language: props.language,
    showLineNumbers: props.showLineNumbers,
    startingLineNumber: props.startingLineNumber,
    wrapLines: true,
  };

  return (
    <CopyBlock
      {...copyBlockProps}
    />
  );
}

위에 걸어둔 공식 문서 링크에 접속하면 테마, 언어 종류에 대한 문서 파일을 확인할 수 있다!

이렇게 잘만 돌아간다면 너무나도 쉽고 간편했을 것이다.. 그러나 아주 크나큰 시련을 만났으니... 그것은 바로 정체를 알 수 없는 에러 때문이다... 구글링, 스택오버플로우 여러 글을 참고하고 chatGPT에도 물어봤지만 해결할 수 없었다.

결국은 '라이브러리 자체에서 props 전달 문제이지 않을까..?'라는 심증만 할 뿐이었다... 그렇게 생각한 이유는 에러 메시지를 읽어보면 마지막에서 두 번째 줄에 'Property 'text' does not exist on type'... 'text' 속성이 없다고 말하고 있었기 때문이었다. 그러나 text를 지워도 다른 prop에서 같은 에러가 발생하였다... 눙물... 이것만 보고 있으니 머리가 아파서 1차 시도는 실패로 마무리하였다.

다음 날.. 또 그다음 날까지 코드를 아무리 보아도 모르겠다... 결국 stackoverflow에 질문을 올리게 되었다.

그러나 아무도 답 해주지 않는 그대들... 사실 나라도 난해하긴 함... 눙물

하지만 이 블로그 글은 해피엔딩입니다^^ 끝까지 봐주세요🙏🏻

react-code-blocks v0.1.4에서 발생하는 props error?!

갓 능력자 팀원 분께서 다운그레이드 해보자! 하는 순간... 계속 라이브러리 문제라는 걸 의심했으면서 거기까지 생각하지 못한 나 자신을 반성하며 다운그레이드를 진행하게 되었다!

우선 지금 현시점을 기준으로 react-code-blocks 라이브러리를 설치하면 0.1.4 버전으로 받게 된다. npm의 각 버전을 참고하여 한 단계씩 진행하였다. 그러다 0.0.9-0에서 드디어 해당 에러가 발생하지 않음을 발견하였다!

사실 다운로드 수에 정답이 있었다. 그러나 예전 버전에도 문제는 있었다.

바로 아래와 같은 에러 메시지이다.

다행히도 해당 라이브러리의 레포지토리 이슈에 같은 에러를 다룬 동지들의 글이 있어서 참고하며 해결하였다.

👉 해당 문서 보러 가기

🔥 첫 번째 시도. vite.config.ts에 global 정의해 주기

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  define: {
    _global: {}, // 핵심⭐️
  },
});

위와 같이 define문을 작성해 주면 된다. 그러면 에러가 해결되고 잘 작동하는 것을 확인할 수 있다.

그러나 팀원의 컴퓨터에서 성공적으로 잘 작동하여 배포까지 성공적으로 마무리되었는데, pull 받아오니 나의 브라우저에서는 다시 에러를 뱉어내기 시작했다...

🔥 두 번째 시도. globalThis로 값 변경하기

그래서 다시 글을 찬찬히 내려보니 컴퓨터의 환경마다 되는 사람이 있고, 안 되는 사람이 있는 것 같다. 그중 global의 값을 빈 객체가 아닌 globalThis로 준 댓글들이 더러 있길래 시도해 봤더니...

// ...
define: {
  global: 'globalThis',
},

아주 성공적으로 에러가 해결되며 이번 라이브러리 사용기의 글을 마친다.

luckydayo