별도의 체인지로그 관리 그만. forg.to 제품 업데이트를 5분 안에 웹사이트에 자동 동기화

Source: Dev.to

기능을 배포합니다. forg.to에 게시하고, 그 다음 웹사이트의 변경 로그를 열어 다시 같은 내용을 올립니다.
이것은 같은 업데이트를 두 개의 서로 다른 청중을 위해 두 번 쓰는 불필요한 작업입니다. forg.to가 이미 업데이트를 저장하고 있으니, 웹사이트는 이를 그대로 표시하면 됩니다.

다음은 forg.to 업데이트를 사이트와 동기화하는 세 가지 방법입니다. 워크플로에 맞는 방법을 선택하세요.

방법 1: 임베드

임베드는 최신 5개의 업데이트, 로고, 태그라인, 그리고 찬성표 수를 타임라인 레이아웃으로 보여줍니다. forg.to에 게시할 때마다 임베드가 자동으로 업데이트되므로 추가 작업이 필요 없습니다.

방법 2: 알림 배너 (작업량 최소화)

// Fetch the latest update and inject a dismissible banner
(function() {
  const banner = document.createElement('div');
  banner.id = 'forg-banner';
  banner.style.position = 'fixed';
  banner.style[/* "top" or "bottom" */] = '0';
  banner.style.width = '100%';
  banner.style.background = '#10b981';
  banner.style.color = '#fff';
  banner.style.padding = '1rem';
  banner.style.zIndex = '1000';
  banner.innerHTML = ' ✕';

  document.body.appendChild(banner);

  fetch('https://api.forg.to/v1/products/your-slug/updates?limit=1')
    .then(r => r.json())
    .then(data => {
      const update = data[0];
      const seen = localStorage.getItem('forgSeen_' + update.id);
      if (!seen) {
        document.getElementById('forg-message').textContent = update.title;
        document.getElementById('forg-close').onclick = () => {
          banner.remove();
          localStorage.setItem('forgSeen_' + update.id, 'true');
        };
      } else {
        banner.remove();
      }
    });
})();

이 스크립트는 최신 업데이트를 가져와 각 페이지 상단(또는 하단)에 해제 가능한 배너를 삽입합니다. localStorage를 사용해 방문자가 이미 본 업데이트를 기억하므로, forg.to에 새 게시물이 올라오면 배너가 자동으로 모든 사람에게 다시 표시됩니다.

방법 3: API (전체 제어)

• 엔드포인트: https://api.forg.to/v1/products/{your-slug}/updates
• 요청 제한: 100 요청/분 (변경 로그 페이지에는 충분합니다)

// app/changelog/page.tsx
import React from 'react';

async function getUpdates() {
  const res = await fetch('https://api.forg.to/v1/products/your-slug/updates', {
    headers: {
      Authorization: `Bearer ${process.env.FORG_API_KEY}`,
    },
  });
  if (!res.ok) throw new Error('Failed to fetch updates');
  return res.json();
}

export default async function ChangelogPage() {
  const updates = await getUpdates();

  return (
    <>
      ## What’s New

      {updates.map((u: any) => (
        <>
          ## {new Date(u.createdAt).toLocaleDateString()}
          ### {u.title}
          {u.content}
        </>
      ))}
    </>
  );
}

API를 사용하면 스타일링을 완전히 제어할 수 있고, 원하는 어떤 컴포넌트 구조든 만들 수 있습니다—iframe의 제약이 없습니다.

얻을 수 있는 혜택

이미 forg.to에 업데이트를 작성하고 있습니다. 위 방법 중 하나를 사용하면 해당 업데이트가 자동으로 웹사이트에 표시되어 중복 작업을 없앨 수 있습니다.

1. 가입 → forg.to
2. 첫 업데이트 게시
3. 임베드, 배너, 혹은 API 통합 중 선택

5분 이내에 바로 적용할 수 있습니다.