Shiro로 leetcode 카드 렌더링

최신 버전의 Shiro는 이미 leetcode 카드를 지원하지만, leetcode API는 백엔드에서 데이터를 가져와야 하므로 여기서는 mx-space의 클라우드 함수를 사용해 요청을 중개합니다.

왜 이렇게 우회해서 진행하지 않고 서버에서 데이터를 가져온 뒤 바로 렌더링하지 않을까? Markdown 렌더링 로직이 클라이언트에 있는 것 같아 데이터 조회도 클라이언트에서 이루어지고, SSR의 장점을 활용할 수 없는 것 같습니다.

이후 마이그레이션하기 편하도록 우선 기록해 둡니다.

export default async function handler(ctx: Context) {
  const requestBody =ctx.req.body
  // 通用的 GraphQL 请求函数
  const response = await fetch('https://leetcode.cn/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error('Failed to fetch data from LeetCode API');
  }
  return await response.json();

}

클라우드 함수 설정 정보

이후 마이그레이션하기 편하도록 우선 기록해 둡니다.

export default async function handler(ctx: Context) {
  const requestBody =ctx.req.body
  // 通用的 GraphQL 请求函数
  const response = await fetch('https://leetcode.cn/graphql/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(requestBody),
  });
  if (!response.ok) {
    throw new Error('Failed to fetch data from LeetCode API');
  }
  return await response.json();

}

클라우드 함수 설정 정보