SandPack와 React로 강력한 코드 플레이그라운드 만들기

2024-10-10 19:43:42

reactwebdevjavascriptfrontend

SandPack 소개

Blogging과 기술 문서에서 직접 코드 편집기를 구축하는 것은 사용자의 참여를 늘리고 크리에이티브한 콘텐츠를 제공하는 데 도움이 됩니다. 이 과정에서 SandPack은 특히 유용한 도구입니다. SandPack은 CodeSandbox에서 제공하는 인기 있는 플레이그라운드 프레임워크로, 다음과 같은 혜택을 제공합니다:

사용자가 자신의 코드를 실시간으로 작성하고 실행할 수 있는 환경을 제공합니다.
다양한 커스터마이징 옵션을 통해 블로그나 문서와 연동할 수 있습니다.
React를 비롯한 주요 자바스크립트 프레임워크와 호환됩니다.

특히 sandpack-react는 매우 유용한 구성 요소 툴킷으로, 개발자가 직접적인 상호작용을 통해 사용자 경험을 개선할 수 있도록 돕습니다.

SandPack 기능

SandPack은 사용자가 원하는 방식으로 코드 플레이그라운드를 구성할 수 있는 여러 가지 기능을 제공합니다:

사전 구축된 템플릿: 다양한 프레임워크에 맞춘 템플릿이 사전 구축되어 있어 쉽게 시작할 수 있습니다.
테마 선택: 여러 가지 테마를 선택할 수 있으며, 사용자 맞춤형 테마도 생성할 수 있습니다.
npm 의존성 지원: 모든 npm 패키지를 사용하여 개발할 수 있습니다.
UI 커스터마이징: 거의 모든 측면에서 사용자 정의가 가능하여 고유한 모습으로 변형할 수 있습니다.

이러한 기능 덕분에 블로그나 기술 문서에서 SandPack을 매우 쉽게 통합할 수 있습니다.

SandPack 설치 및 기본 사용법

먼저, SandPack을 설치하려면 아래 명령어를 입력합니다.

npm i @codesandbox/sandpack-react

또는

yarn add @codesandbox/sandpack-react

그 다음, SandPack 컴포넌트를 임포트하고 다음과 같이 렌더링합니다:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />;
}

이 코드 조각을 사용하면 기본 React 템플릿을 가진 빈 플레이그라운드가 설정됩니다. 이 플레이그라운드는 기본적으로 Vanilla 템플릿을 사용하도록 설정되어 있습니다.

기본 속성 및 사용자 정의

여기서 다양한 속성을 사용해보겠습니다:

template: 사전 구축된 템플릿 목록에서 선택할 수 있습니다.
files: 사용자 정의 코드로 여러 파일을 생성할 수 있습니다. 이 객체의 키는 파일 경로, 값은 파일 내용으로 구성됩니다.
options: 여러 기능들을 커스터마이징 할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

<Sandpack
  template="react"
  files={files}
  options={{
    showLineNumbers: true,
    showTabs: true,
  }}
/>

이 코드를 통해 코드 편집기의 라인 번호와 탭을 표시할 수 있습니다.

플레이그라운드 커스터마이징

기본 플레이그라운드를 우리의 스타일에 맞게 바꿔보겠습니다. 먼저, 간단한 카운터 버튼을 생성하기 위해 files 프로퍼티를 사용하여 App.js와 App.css 파일을 만들어 보겠습니다.

예를 들어:

const files = {
  '/App.js': `export default function App() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      </div>
    );
  }`,
  
  '/App.css': `button {
    font-size: 20px;
    padding: 10px;
  }`
};

위 코드는 간단한 카운터 컴포넌트를 생성하는 예제입니다. 여기서 files 객체에 App.js와 App.css 내용을 포함했습니다.

레이아웃 및 모드 전환

SandPack에서는 예시 보기를 위한 레이아웃을 커스터마이징할 수 있습니다. 특정 클래스를 지정하거나 SandPack이 제공하는 프리빌트 옵션을 사용할 수 있습니다.

예를 들어, CSS를 적용하여 외형을 수정할 수 있습니다:

<Sandpack
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

그 외에도, 세 가지 레이아웃 모드(미리보기, 테스트, 콘솔)를 전환할 수 있습니다. 이러한 세팅은 유저 경험을 더욱 풍부하게 만들어 줍니다.

출력 구성

편집기 외에도 출력 화면을 커스터마이징할 수 있습니다. 예를 들어, 콘솔의 표시 여부를 제어하고, 레이아웃을 변경하며, 미리보기 창의 외관을 수정할 수 있습니다.

콘솔을 표시하려면 아래와 같이 설정할 수 있습니다:

<Sandpack
  options={{
    showConsole: true,
  }}
/>

결론

SandPack은 사용하기 간편하면서도 뛰어난 커스터마이징 기능을 제공합니다. 이를 통해 블로그나 기술 문서에서 실시간 코드 편집 기능이 필요할 때 매우 유용하게 활용할 수 있습니다. 자신의 사이트에 맞도록 SandPack을 조절함으로써 독창적이고 세련된 사용자 경험을 제공할 수 있습니다.

더 자세한 버전의 기사는 여기를 확인해 보세요.

R_11