Remix의 리소스 경로

지금까지 우리는 Remix에서 경로를 살펴보았고 항상 HTML 기반 출력 경로였습니다.

그것은 그들이 일부 HTML을 렌더링한다는 것을 의미하지만 다른 경로 유형을 원하면 어떻게 될까요?

몇 가지 예:

JSON 끝점

이미지

PDF 파일

괜찮아요. Remix는 이를 위해 환상적인 리소스 경로를 사용할 수 있으므로 이를 지원했습니다.

Remix의 리소스 경로

이러한 경로를 만들기 위해 끝점 URL을 얻는 방법에는 여러 가지가 있습니다.

다음 형식 중 하나를 만들 수 있습니다.

- app/routes/reports/$id/pdf.ts
- app/routes/reports/$id[.pdf].ts
- app/routes/reports/$id[.]pdf.ts
- app/routes/reports.$id[.]pdf.ts

이들 모두는 동일한 출력 형식을 갖습니다.
http://yourwebsite.com/reports/id.pdf
하지만 일반 HTML이 아닌 파일로 출력하는 방법을 살펴보겠습니다.
이를 달성하려면 loader 함수를 사용하여 다음과 같이 출력을 변경해야 합니다.

export async function loader({ params }) {
  const report = await getReport(params.id);
  const pdf = await generateReportPDF(report);
  return new Response(pdf, {
    status: 200,
    headers: {
      'Content-Type': 'application/pdf',
    },
  });
}

이 예제에서는 getReport 및 generateReportPDF 함수를 포함하여 우리가 가지고 있지 않은 일부 함수를 사용합니다.
이것은 당신이 그것을 달성할 수 있는 방법의 예일 뿐이라는 것을 의미합니다(공식 Remix 문서에서 가져옴).

다른 유형 사용

대신 JSON 형식을 원한다고 가정해 봅시다.

문서를 다음 형식으로 변경해 보겠습니다.
app/routes/reports.$id[.]pdf.ts

import { json } from '@remix-run/node';

export async function loader({ params }) {
  return json({ foo: params.id });
}

이 예에서는 동적 URL의 ID 형식을 JSON 개체로 지정합니다.



이것은 꽤 멋지다. 이렇게 하면 Remix에서 다양한 형식을 모두 지원할 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나