1. PALITO 캔버스 추가하기

---

1. Palito 컨텐츠 추가하기

Palito를 사용하기 위해서 우선적으로 Palito Canvas를 추가해야 합니다.
이 과정은 다음의 코드와 같은 방식으로 시작할 수 있습니다.

import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";

const ExamplePage = () => {
  const palitoRef = useRef(null);

  return (
    <div>
      <Palito
        ref={palitoRef}
      />
    </div>
  );
};

export default ExamplePage;

하지만 위 코드만으로는 Palito의 핵심 기능이 활성화되지 않습니다. API 키 인증 과정을 추가해야 합니다.

---

2. API 키 인증받기

Palito를 사용하기 위해서는 API 키가 필요합니다. (발급 절차는 (주)폭씨 이메일 foxee0319.hwj@gmail.com으로 문의주세요)

발급받은 키를 licenseKey 속성에 전달하면 인증이 완료됩니다.

import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";

const ExamplePage = () => {
  const palitoRef = useRef(null);
  const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  return (
    <div>
      <Palito
        ref={palitoRef}
        licenseKey={LICENSE_KEY}
      />
    </div>
  );
};

export default ExamplePage;

이것으로 Palito의 핵심 기능을 사용하기 위한 모든 준비는 완료 되었습니다.

---

다음 가이드

토폴로지 생성하기를 통해, 노드를 추가하고 연결하여 실제 네트워크 토폴로지를 구성해봅시다.