82label
내 서식English시작하기

문서 › 시작

npm

@82label/core 설치, import, 번들러와 TypeScript.

npm i @82label/core

패키지는 ES 모듈 하나이고 의존성이 없습니다. TypeScript 타입(Template, Row, PrintOptions, PrintResult …)이 함께 들어 있습니다.

import { print } from '@82label/core';
import template from './labels/product.json'; // 디자이너에서 받은 서식 JSON

async function printLabels(orders) {
  const rows = orders.map((o) => ({ name: o.productName, price: o.priceText, sku: o.sku }));
  const result = await print(template, rows);
  // result.via: 'agent'(출력 프로그램) 또는 'browser'
  return result;
}

서식을 파일로 두기

디자이너의 JSON 내려받기로 받은 파일을 프로젝트에 넣고 import 하세요. 서식이 코드와 함께 버전 관리되고, 82label 서버 없이 동작합니다.

import type { Template } from '@82label/core';
import raw from './labels/product.json';

const template = raw as Template;

웹 컴포넌트를 쓸 때

import { defineLabelElement } from '@82label/core';
import '@82label/core/styles.css';

defineLabelElement(); // <label-82> 등록

서버에서 그리기

renderToSVG 는 DOM 없이 SVG 문자열을 만듭니다. Node, Cloudflare Workers 에서 라벨 미리보기 이미지를 만들거나 메일에 넣을 때 씁니다. 인쇄(print)는 브라우저에서만 됩니다.

import { renderToSVG } from '@82label/core';

const svg = renderToSVG(template, { name: '무선 이어폰 프로', price: '39,000원', sku: 'EP-2026-0412' });