SandPack React로 동적 코드 놀이터를 만들어보세요!-JS 튜토리얼-php.cn

SandPack React로 동적 코드 놀이터를 만들어보세요!

DDD

풀어 주다： 2024-11-16 02:23:03

원래의

702명이 탐색했습니다.

이 기사에서는 CodeSandbox의 인기 플레이그라운드 프레임워크인 SandPack을 살펴보고 이를 사용하여 사용자를 위한 보다 동적이고 대화형 환경을 만드는 방법에 대해 논의합니다.

이 문서에서는 SandPack에 대해 알아야 할 기본 사항을 거의 모두 다룹니다. 그러나 후크 및 사용자 정의 구성 요소와 멋진 사용자 정의 옵션과 같은 고급 기능은 내 블로그에서 자세히 논의됩니다.

이 기사의 자세한 버전을 확인하세요

샌드팩이란?

SandPack은 블로그 및 기술 문서용 라이브 코드 편집기를 구축하기 위한 구성 요소 툴킷입니다. 이 기사에서는 경량 JavaScript 번들러인 sandpack-client보다는 sandpack-react에 중점을 둘 것입니다.

SandPack이 눈에 띄는 이유는 다양한 사용자 정의 옵션을 사용할 수 있다는 것입니다. 게다가 시작하는 것도 정말 쉽습니다. sandpack-react의 가장 유용한 기능은 다음과 같습니다.

인기 언어 및 프레임워크를 위해 사전 제작된 템플릿
편집기용으로 사전 제작된 테마가 더 많고 사용자 정의 테마를 생성할 수 있는 옵션도 있습니다.
모든 npm 종속성 및 주요 JavaScript 프레임워크를 지원합니다.
UI와 플레이그라운드의 거의 모든 측면을 맞춤설정하는 옵션.
사전 빌드된 구성 요소를 사용하여 완전히 맞춤화된 플레이그라운드를 만들 수 있습니다.
제공자와 사용자 정의 후크를 사용하여 사용자 정의 구성 요소를 만들 수 있습니다.

플레이그라운드 개요

sandpack-react를 시작하려면 다음 npm 또는 Yarn 명령을 실행하세요.

npm i @codesandbox/sandpack-react

또는
원사 추가 @codesandbox/sandpack-react

다음으로 Sandpack 플레이그라운드를 가져오고 다음 코드를 사용하여 렌더링합니다.

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

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

로그인 후 복사

Create a Dynamic Code Playground with SandPack React!

<샌드팩 /> 구성 요소는 바로 들어갈 수 있도록 빈 놀이터를 설정합니다. 기본적으로 놀이터에는 기본 React 템플릿이 포함되어 있습니다. 템플릿, 테마 등을 맞춤설정하기 위한 기본 소품을 살펴보겠습니다.

템플릿: 이 속성은 사전 정의된 템플릿 목록을 허용합니다. 기본적으로 바닐라가 설정되어 있습니다.
files: 이는 매우 유용한 속성입니다. 일반 폴더 구조와 유사하게 사용자 정의 코드를 사용하여 여러 파일을 만들 수 있습니다. 파일 객체에는 값(상대 파일 경로)과 키(파일 콘텐츠)가 포함되어 있습니다. 그러면 이 개체의 파일이 탭에도 자동으로 표시됩니다.
옵션: 옵션 개체를 사용하여 여러 기능을 맞춤설정할 수 있습니다. 여기에서 전체 목록을 볼 수 있습니다. 가장 유용한 것들은 다음과 같습니다:
- showLineNumbers: 줄 번호 표시를 전환합니다.
- showTabs: 탭 표시 여부를 전환합니다.
- 클래스: 추가 사용자 정의를 위해 기존 템플릿 클래스에 사용자 정의 클래스 이름을 할당할 수 있습니다.
종속성: 종속성 개체에는 앱에 필요한 모든 NPM 패키지가 포함될 수 있습니다. 형식과 구문은 package.json 파일과 유사합니다.
테마: 사전 제작된 테마를 선택하거나 완전히 맞춤화된 테마를 할당할 수 있습니다.

놀이터 사용자 정의

기본 플레이그라운드를 우리 스타일에 맞게 조정하고 가지고 놀 수 있는 재미있는 예제를 만들어 보겠습니다. 사이트 테마에 맞게 편집기를 사용자 정의하면 제3자 삽입처럼 느껴지지 않고 원활하게 혼합될 수 있습니다. 먼저 files 소품을 사용하여 간단한 카운터 버튼을 만들어 보겠습니다. App.js 파일 외에도 App.css 파일도 생성하겠습니다.

아래 예시와 코드를 살펴보세요.

이 예에서는 카운터 구성요소가 플레이그라운드에 렌더링됩니다. 파일 객체에는 App.js와 App.css에 대한 코드가 모두 포함되어 있습니다. 앞서 언급한 사전 구축된 목록에서 sandpack-themes에서 가져온 테마를 선택하여 스타일을 추가했습니다. 줄 번호도 true로 설정되었습니다.

또한 놀이터의 레이아웃을 쉽게 맞춤 설정할 수 있습니다. 이는 사용자 정의 클래스를 적용하거나 SandPack이 제공하는 사전 구축된 옵션을 활용하여 수행할 수 있습니다. 예를 들어 다음과 같은 사용자 정의 클래스를 사용할 수 있습니다.

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

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

로그인 후 복사

그런 다음 CSS를 사용하여 모양과 레이아웃을 조정하면 시각적 디자인을 훨씬 더 효과적으로 제어할 수 있습니다.

또 다른 유용한 기능은 다양한 레이아웃 모드 간을 전환하는 기능입니다. SandPack은 미리보기, 테스트 및 콘솔의 세 가지 모드를 제공합니다. 기본 모드는 미리보기이며, 테스트 모드는 테스트 실행을 위한 도구 모음을 제공하고 콘솔 모드는 미리보기 창 대신 터미널/콘솔 구성 요소를 렌더링합니다. 콘솔 모드는 서버측 로직의 출력을 표시하는 데 유용합니다. rtl(오른쪽에서 왼쪽 레이아웃) 옵션을 사용하여 레이아웃 방향을 전환할 수도 있습니다.

출력 사용자 정의

편집기 자체 외에도 출력 표시도 사용자 정의할 수 있습니다. 예를 들어 콘솔을 표시하거나 숨기거나, 레이아웃을 변경하거나, 미리보기 창의 모양을 수정하도록 선택할 수도 있습니다. 정말 멋지죠!. 코드 편집기에는 편집 창을 크게 맞춤화하는 경우가 많지만 실제 출력에는 그다지 주의를 기울이지 않습니다.

콘솔에는 모든 종류의 오류와 콘솔 로그가 표시됩니다. 표시되는 코드 조각의 유형에 따라 콘솔을 표시하거나 숨길 수 있습니다. 콘솔 표시 버튼의 표시 여부를 전환할 수도 있습니다. 기본적으로 콘솔은 숨겨져 있습니다. 모든 SandPack 구성 요소와 마찬가지로 사용자 정의 CSS 클래스를 사용하여 스타일을 개별적으로 수정할 수 있습니다.

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

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

로그인 후 복사

콘솔 외에도 디스플레이 창 자체도 맞춤 설정할 수 있습니다. 예를 들어 showNavigator 옵션을 사용하여 탐색 표시줄을 켜거나 끌 수 있으며 resizingPanels 옵션을 사용하여 패널 크기를 조정할 수 있는지 결정할 수 있습니다.

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

로그인 후 복사

결과는 다음과 같습니다.

Create a Dynamic Code Playground with SandPack React!