Skip to Content
Documentation시작하기

시작하기

이 가이드에서는 DM Note 플러그인 시스템을 활성화하고 첫 번째 플러그인을 작성하는 방법을 알아봅니다.

플러그인 활성화

  1. 메인 창에서 설정(Settings) 탭을 엽니다.
  2. JS 플러그인 활성화 토글을 켭니다.
  3. 플러그인 관리 버튼을 눌러 모달을 엽니다.
  4. JS 플러그인 추가 버튼으로 .js 파일을 선택합니다.

플러그인은 목록에서 개별적으로 활성화/비활성화할 수 있으며, 휴지통 아이콘으로 제거할 수 있습니다.

플러그인 개발 워크플로우

리로드

설정 화면의 리로드 버튼을 누르면 모든 플러그인을 다시 읽어 들입니다. 파일을 수정한 후 변경사항을 테스트할 때 유용합니다.

디버깅

  • 메인 윈도우: Ctrl+Shift+I로 개발자 도구를 엽니다.
  • 오버레이 윈도우: 설정에서 개발자 모드를 활성화한 후 DevTools에 접근할 수 있습니다.

첫 번째 플러그인

플러그인 파일 생성

텍스트 에디터로 hello-plugin.js 파일을 생성합니다:

// @id hello-plugin
 
dmn.plugin.defineElement({
  name: "Hello Panel",
 
  contextMenu: {
    create: "Hello 패널 생성",
    delete: "Hello 패널 삭제",
  },
 
  settings: {
    message: { type: "string", default: "Hello, World!", label: "메시지" },
    textColor: { type: "color", default: "#86EFAC", label: "텍스트 색상" },
  },
 
  previewState: {
    count: 42,
  },
 
  template: (state, settings, { html }) => html`
    <div
      style="
      background: rgba(0, 0, 0, 0.8);
      color: ${settings.textColor};
      padding: 16px;
      border-radius: 8px;
      font-family: sans-serif;
    "
    >
      <div style="font-size: 18px; font-weight: bold;">${settings.message}</div>
      <div style="margin-top: 8px; opacity: 0.7;">
        키 입력 횟수: ${state.count ?? 0}
      </div>
    </div>
  `,
 
  onMount: ({ setState, onHook }) => {
    let count = 0;
 
    // 키 입력 이벤트 구독
    onHook("key", ({ state }) => {
      if (state === "DOWN") {
        count++;
        setState({ count });
      }
    });
 
    console.log("Hello Plugin 시작!");
 
    // 클린업 함수 반환
    return () => {
      console.log("Hello Plugin 종료!");
    };
  },
});

플러그인 등록

  1. 설정에서 플러그인 관리 버튼을 클릭합니다.
  2. JS 플러그인 추가 버튼으로 hello-plugin.js 파일을 선택합니다.
  3. 메인 화면의 그리드 빈 공간을 우클릭하면 Hello 패널 생성 메뉴가 표시됩니다.
  4. 클릭하여 패널을 생성합니다.

동작 확인

  • 패널을 드래그하여 위치를 조정할 수 있습니다.
  • 패널을 우클릭하면 설정 및 삭제 옵션이 표시됩니다.
  • 설정에서 메시지와 색상을 변경해 보세요.
  • 키보드를 누르면 카운트가 증가합니다.

플러그인 ID 규칙

파일 상단의 @id 주석은 플러그인의 고유 식별자를 지정합니다:

// @id my-plugin-id

규칙:

  • 소문자, 숫자, 하이픈(-), 언더스코어(_)만 사용
  • kebab-case 권장 (예: kps-counter, stats-panel)
  • 파일 첫 20줄 이내에 위치

중요:

  • 동일한 ID를 가진 플러그인은 스토리지 데이터를 공유합니다.
  • ID를 변경하면 기존 데이터에 접근할 수 없습니다.
  • @id가 없으면 파일명이 자동으로 ID가 됩니다.

자동 스코프 격리

DM Note는 각 플러그인 코드를 자동으로 별도의 함수 스코프로 격리합니다:

  • ✅ 자동 strict mode: 모든 플러그인이 엄격 모드로 실행
  • ✅ 변수 격리: 플러그인 간 변수 충돌 방지
  • ✅ IIFE 불필요: 명시적으로 감쌀 필요 없음
// 이렇게 자연스럽게 작성하면 됩니다
const myData = 123;
 
dmn.plugin.registerCleanup(() => {
  console.log("cleanup");
});

다음 단계

플러그인의 기본 구조를 이해했다면, 다음 문서를 참고하세요:

예제 모음선언형 API