React와 Supabase를 사용하여 사용자 정의 스케줄러 구축

소개

예약은 최신 애플리케이션의 중요한 기능 중 하나입니다. 이를 통해 자동화할 수 있는 주기적인 작업을 실행할 수 있습니다. 알림 보내기, 게시물 예약, 데이터 업데이트, 워크플로 자동화 등의 작업입니다.

그래서 이번 글에서는 dev.to에 글을 게시하기 위한 스케줄러를 구축해보겠습니다. dev.to에는 스케줄링 기능이 있지만 우리는 모든 종류의 스케줄러 애플리케이션을 구축하는 데 사용할 수 있는 방식으로 이를 구현할 예정입니다.

자, 시작해 보겠습니다.

기술 스택

우리는 다음 기술 스택을 사용할 예정입니다:

• React: 우리는 React, 특히 ViteJS를 React와 함께 사용하여 프론트를 구축할 것입니다.
• Supabase: 애플리케이션 구축을 위한 올인원 솔루션을 제공합니다. 데이터베이스, 인증, 스토리지, 엣지 기능 등을 제공합니다. 우리는 Subbase에서 다음을 사용할 것입니다:
  • 데이터베이스: 기사 정보와 일정 시간을 저장하는 데 사용됩니다.
  • Cron Job : Edge 기능을 호출하기 위해 주기적으로 실행
  • Edge 기능: 현재 시간이 예정된 시간과 일치하는 기사가 있는지 확인합니다. 그러면 기사가 게시됩니다.

이 정도면 스케줄러 애플리케이션을 쉽게 구축하기에 충분할 것입니다.

애플리케이션 작업

애플리케이션의 작동 방식을 논의해 보면 애플리케이션의 흐름을 매우 쉽게 이해할 수 있습니다. 하나하나의 흐름은 다음과 같습니다.

1. 프런트 엔드를 통해 데이터베이스에 기사를 추가합니다.
2. Cron 작업은 Edge 기능을 호출하기 위해 1분마다 실행됩니다.
3. 현재 시간을 예정된 기사로 확인할 수 있는 엣지 기능이 실행됩니다. 기사가 있으면 기사를 올려드립니다.
4. 게시물 테이블의 기사 데이터가 업데이트됩니다. # 프론트엔드 구축

최근 제너레이티브 AI가 많이 도입되면서 건물 프론트엔드가 조용해졌습니다. 우리가 사용할 AI 중 하나는 bolt.new입니다. 왜 bolt.new인가? 종속성과 tailwindcss와 같은 모든 구성을 갖춘 완전한 React 애플리케이션을 생성할 수 있습니다. StackBlitz를 사용하여 기사를 직접 편집하고 애플리케이션을 배포할 수도 있습니다. 필요한 경우 코드를 다운로드하여 로컬로 실행할 수 있습니다. 보너스 포인트는 Supabase와 매우 잘 통합되므로 Supbase 통합을 통해 작동하는 React 애플리케이션을 생성할 수 있다는 것입니다.

전면을 생성하는데 사용했습니다. 모든 페이지는 다음과 같습니다.

앱.tsx

구성요소 표시 및 랜딩페이지 제공을 위한 페이지를 처리합니다.

    function App() {
      const [posts, setPosts] = useState<scheduledpost>([]);
      const handleSchedulePost = async (data: CreatePostData) => {
        // In a real app, this would make an API call to your edge function
        const newPost: ScheduledPost = {
          content: data.content,
          scheduled_time: data.scheduledTime,
          status: 'pending',
          title: data.title,
          tags: data.tags
        };
        const { error } = await supabase
      .from('scheduled_posts')
      .insert(newPost)
      if (error){
        alert(`Erorr: ${error}`)
        return
      }
        // setPosts((prev) => [...prev, newPost]);
      };
      const fetchScheduedPost = async () => {
        const { data, error } = await supabase
      .from('scheduled_posts')
      .select()
      if(error){
        alert(`Erorr Fetching Data: ${error}`)
        return
      }
      setPosts(data)
      } 
      useEffect(() => {
        fetchScheduedPost()
      },[])
      return (
        <div classname="min-h-screen bg-gray-50">
          <header classname="bg-white shadow-sm">
            <div classname="max-w-4xl mx-auto px-4 py-4">
              <div classname="flex items-center gap-2">
                <newspaper classname="h-8 w-8 text-blue-500"></newspaper>
                <h1 id="Dev-to-Post-Scheduler">Dev.to Post Scheduler</h1>
              </div>
            </div>
          </header>
          <main classname="max-w-4xl mx-auto px-4 py-8">
            <div classname="grid gap-8 md:grid-cols-2">
              <div>
                <h2 id="Schedule-New-Post">Schedule New Post</h2>
                <postform onsubmit="{handleSchedulePost}"></postform>
              </div>
              <div>
                <scheduledposts posts="{posts}"></scheduledposts>
              </div>
            </div>
          </main>
        </div>
      );
    }
    export default App;
</scheduledpost>

SchudledPost.tsx

예정된 기사를 보여줍니다.

    const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
      switch (status) {
        case 'posted':
          return <checkcircle classname="h-5 w-5 text-green-500"></checkcircle>;
        case 'failed':
          return <xcircle classname="h-5 w-5 text-red-500"></xcircle>;
        default:
          return <clock3 classname="h-5 w-5 text-yellow-500"></clock3>;
      }
    };
    export function ScheduledPosts({ posts }: ScheduledPostsProps) {
      return (
        <div classname="space-y-4">
          <h2 id="Scheduled-Posts">Scheduled Posts</h2>
          {posts.length === 0 ? (
            <p classname="text-gray-500 text-center py-8">No scheduled posts yet</p>
          ) : (
            <div classname="space-y-4">
              {posts.map((post, index) => (
                <div key="{index}" classname="bg-white p-4 rounded-lg shadow-md border border-gray-100">
                  <div classname="flex items-start justify-between">
                    <div classname="flex-1">
                      <p classname="text-gray-800 mb-2">{post.title}</p>
                      <div classname="flex items-center gap-4 text-sm text-gray-500">
                        <div classname="flex items-center gap-1">
                          <calendar classname="h-4 w-4"></calendar>
                          {new Date(post.scheduled_time).toLocaleDateString()}
                        </div>
                        <div classname="flex items-center gap-1">
                          <clock classname="h-4 w-4"></clock>
                          {new Date(post.scheduled_time).toLocaleTimeString()}
                        </div>
                      </div>
                    </div>
                    <statusicon status="{post.status}"></statusicon>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      );
    }

PostForm.tsx

사용자가 기사에 대한 정보를 제공할 수 있는 양식을 처리합니다.

    function App() {
      const [posts, setPosts] = useState<scheduledpost>([]);
      const handleSchedulePost = async (data: CreatePostData) => {
        // In a real app, this would make an API call to your edge function
        const newPost: ScheduledPost = {
          content: data.content,
          scheduled_time: data.scheduledTime,
          status: 'pending',
          title: data.title,
          tags: data.tags
        };
        const { error } = await supabase
      .from('scheduled_posts')
      .insert(newPost)
      if (error){
        alert(`Erorr: ${error}`)
        return
      }
        // setPosts((prev) => [...prev, newPost]);
      };
      const fetchScheduedPost = async () => {
        const { data, error } = await supabase
      .from('scheduled_posts')
      .select()
      if(error){
        alert(`Erorr Fetching Data: ${error}`)
        return
      }
      setPosts(data)
      } 
      useEffect(() => {
        fetchScheduedPost()
      },[])
      return (
        <div classname="min-h-screen bg-gray-50">
          <header classname="bg-white shadow-sm">
            <div classname="max-w-4xl mx-auto px-4 py-4">
              <div classname="flex items-center gap-2">
                <newspaper classname="h-8 w-8 text-blue-500"></newspaper>
                <h1 id="Dev-to-Post-Scheduler">Dev.to Post Scheduler</h1>
              </div>
            </div>
          </header>
          <main classname="max-w-4xl mx-auto px-4 py-8">
            <div classname="grid gap-8 md:grid-cols-2">
              <div>
                <h2 id="Schedule-New-Post">Schedule New Post</h2>
                <postform onsubmit="{handleSchedulePost}"></postform>
              </div>
              <div>
                <scheduledposts posts="{posts}"></scheduledposts>
              </div>
            </div>
          </main>
        </div>
      );
    }
    export default App;
</scheduledpost>

엣지 기능

Edge Functions는 사용자와 가까운 엣지에서 전역적으로 배포되는 서버측 TypeScript 함수입니다. 웹후크를 듣거나 Supabase 프로젝트를 Stripe과 같은 제3자와 통합하는 데 사용할 수 있습니다. Edge Functions는 Deno를 사용하여 개발되었습니다.

에지 기능을 로컬에서 실행하고 배포하려면 다음이 필요합니다.

• Supbase CLI: 이 가이드를 사용하여 CLI를 로컬에 설치할 수 있습니다. npm과 npx만 사용하면 간단합니다.
• Docker Desktop: 여기에서 Docker Desktop을 설치하세요.

따라서 이를 설치한 후 프런트엔드 코드 디렉터리 등을 사용하여 Supabase Edge Function을 생성할 수 있습니다.

Supabase 프로젝트를 시작하려면 아래 명령을 실행하세요.

    const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
      switch (status) {
        case 'posted':
          return <checkcircle classname="h-5 w-5 text-green-500"></checkcircle>;
        case 'failed':
          return <xcircle classname="h-5 w-5 text-red-500"></xcircle>;
        default:
          return <clock3 classname="h-5 w-5 text-yellow-500"></clock3>;
      }
    };
    export function ScheduledPosts({ posts }: ScheduledPostsProps) {
      return (
        <div classname="space-y-4">
          <h2 id="Scheduled-Posts">Scheduled Posts</h2>
          {posts.length === 0 ? (
            <p classname="text-gray-500 text-center py-8">No scheduled posts yet</p>
          ) : (
            <div classname="space-y-4">
              {posts.map((post, index) => (
                <div key="{index}" classname="bg-white p-4 rounded-lg shadow-md border border-gray-100">
                  <div classname="flex items-start justify-between">
                    <div classname="flex-1">
                      <p classname="text-gray-800 mb-2">{post.title}</p>
                      <div classname="flex items-center gap-4 text-sm text-gray-500">
                        <div classname="flex items-center gap-1">
                          <calendar classname="h-4 w-4"></calendar>
                          {new Date(post.scheduled_time).toLocaleDateString()}
                        </div>
                        <div classname="flex items-center gap-1">
                          <clock classname="h-4 w-4"></clock>
                          {new Date(post.scheduled_time).toLocaleTimeString()}
                        </div>
                      </div>
                    </div>
                    <statusicon status="{post.status}"></statusicon>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      );
    }

아래 명령을 사용하여 Edge 기능을 만들 수 있습니다

    export function PostForm({ onSubmit }: PostFormProps) {
      const [content, setContent] = useState('');
      const [title, setTitle] = useState('');
      const [tags, setTags] = useState<string>(['javascript', 'react']);
      const [scheduledTime, setScheduledTime] = useState('');
      const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit({ content, title, scheduledTime, tags });
        setContent('');
        setTitle('');
        setScheduledTime('');
        setTags([]);
      };
      const handleTagChange = (e: React.ChangeEvent<htmlselectelement>) => {
        const selectedOptions = Array.from(e.target.selectedOptions);
        const selectedTags = selectedOptions.map(option => option.value);
        if(tags.length {
          const newTags = selectedTags.filter(tag => !prevTags.includes(tag));
          return [...prevTags, ...newTags];
        });
        }

      };
      const removeTag = (tagToRemove: string) => {
        setTags(tags.filter(tag => tag !== tagToRemove));
      };
      return (
        <form onsubmit="{handleSubmit}" classname="space-y-4 bg-white p-6 rounded-lg shadow-md">
          <div>
            <label htmlfor="title" classname="block text-sm font-medium text-gray-700 mb-2">
              Post Title
            </label>
            <input type="text">



<p>I will provide the whole code as a GitHub repository at the end. </p>

<p>Now, let’s look at Supbase Integration.</p>

<h2>
  
  
  Supabase
</h2>

<p>First create an account on supabase, if you don’t have one. You can look at this article to get information about the creating an account on Supbase, Using ChatGPT with Your Own Data using LangChain and Supabase.</p>

<p>Create the table scheduled_post. You can use the below SQL code to run in the SQL Editor to create the table or you can create the table with Table Editor.<br>
</p>

<pre class="brush:php;toolbar:false">    create table
      public.scheduled_posts (
        id serial not null,
        content text not null,
        scheduled_time timestamp with time zone not null,
        status text null default 'pending'::text,
        created_at timestamp without time zone null default now(),
        title character varying null,
        devto_article_id character varying null,
        posted_at character varying null,
        tags character varying[] null,
        error_message character varying null,
        constraint scheduled_posts_pkey primary key (id)
      ) tablespace pg_default;
    create index if not exists idx_scheduled_time_status on public.scheduled_posts using btree (scheduled_time, status) tablespace pg_default;

위 명령은 supabase 내부에 function/xscheduler 디렉터리를 생성합니다. 거기에서 index.ts를 찾을 수 있습니다. Edge 기능은 Deno 환경을 사용합니다.

아래 코드는 edge 기능을 위한 것입니다:

    npx supabase init

SUPABASE_URL 및 SUPABASE_SERVICE_ROLE_KEY와 같은 ENV의 경우 자동으로 사용할 수 있습니다. DEVTO_ACCESS_TOKEN의 경우 여기에서 생성할 수 있으며, 프로젝트 설정 → Edge Functions로 이동하여 토큰을 추가할 수 있습니다. 이 토큰은 Deno 환경에서 사용할 수 있습니다.

필요한 엣지 기능 배포에 이 가이드를 사용할 수 있습니다.

크론 작업

Supbase는 최근 Cron 작업 기능을 업데이트했습니다. 이제 대시보드를 사용하여 이전에 코드를 작성해야 했던 옥수수 작업을 생성할 수 있습니다. 다음을 실행할 수 있는 작업을 생성할 수 있습니다.

• SQL 조각
• 데이터베이스 기능
• HTTP 요청
• 보조 엣지 기능

Edge 기능을 사용할 예정이며, Anon 키를 Bearer 토큰으로 사용하여 이름, 권한 부여 등 Edge 기능의 세부 정보를 추가할 수 있습니다.

응용 프로그램 작업

이제 애플리케이션을 만들었으니 이제 작동하는 모습을 살펴보겠습니다. 아래 명령으로 fronted를 실행합니다:

    supabase functions new xscheduler

제목, 내용, 시간, 태그 등의 세부정보를 추가합니다. 추가한 후 게시물 예약을 클릭하세요. 크론 작업은 기사의 예약 시간이 현재 시간과 일치하면 1분마다 실행됩니다. 게시됩니다.

해당 글은 시간 범위가 일치하면 dev.to에 게시됩니다.

추가 기능

위 기술을 사용하면 X, Instagram, LinkedIn 등 모든 것에 대한 스케줄러 애플리케이션을 구축할 수 있습니다. 작업하고 다음과 같은 기능을 추가할 수 있습니다.

• 이미지: supabase 저장소를 사용하여 썸네일용 이미지를 업로드하고 가져옵니다.
• SQL에서 Edge 함수 호출: SQL 스니펫이나 데이터베이스 함수에서 Edge 함수를 호출하면 더욱 효율적으로 만들 수 있습니다. 기사가 현재 시간과 일치하는 경우에만 엣지 함수가 호출되도록 하기 위함입니다.

여기서 GitHub에서 이 프로젝트의 코드를 살펴볼 수 있습니다.

결론

스케줄러 애플리케이션을 만들면 기사 게시, 알림 전송, 워크플로 관리와 같은 작업 자동화가 단순화됩니다. 프론트엔드에 React를 사용하고 백엔드에 Supabase를 사용하여 데이터베이스, 크론 작업 및 엣지 기능을 활용하는 확장 가능한 솔루션을 구축했습니다. 이 접근 방식은 다양한 사용 사례에 맞게 조정되어 효율적인 자동화를 가능하게 합니다. 이러한 도구를 사용하면 필요에 맞는 강력한 스케줄러 애플리케이션을 구축할 수 있습니다.

이 기사를 통해 크론 작업을 이해하는 데 도움이 되었기를 바랍니다. 기사를 읽어주셔서 감사합니다.