Astro를 Hono와 함께 사용하는 방법

Astro: 제가 현재 가장 좋아하는 강력한 웹 프레임워크입니다. 그 다양성으로 인해 광범위한 프로젝트에 이상적입니다. 하지만 API 개발에서는 Hono가 단연 돋보입니다.

Hono: 사용자 친화적인 RPC 시스템(tRPC와 유사하지만 더 빠름)을 갖춘 간단하고 이식 가능한 API 프레임워크입니다. 이 가이드에서는 두 가지의 장점을 결합하는 방법을 보여줍니다.

Astro 설정

다음을 사용하여 새 Astro 프로젝트를 만듭니다.

<code class="language-bash">npm create astro@latest</code>

CLI 프롬프트를 따릅니다. 다음과 같이 프로젝트를 시작하세요:

<code class="language-bash">npm run dev</code>

http://localhost:4321에서 Astro 프로젝트에 액세스하세요.

Hono 설정

Hono 설치:

<code class="language-bash">npm install hono</code>

src/pages/api/[...path].ts에서 포괄 경로 만들기:

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono().basePath('/api/');

app.get('/posts', async (c) => {
    return {
        posts: [
            { id: 1, title: 'Hello World' },
            { id: 2, title: 'Goodbye World' },
        ],
    };
});
</code>

.basePath('/api/')은 매우 중요합니다. Hono의 라우팅을 Astro의 파일 구조와 일치시킵니다. Astro 프로젝트의 엔드포인트 위치(예: /foo/bar/의 경우 src/pages/foo/bar/[...path].ts)와 일치하도록 필요에 따라 이 경로를 조정하세요.

Hono와 Astro 통합

ALL 내보내기를 생성하여 모든 요청을 처리하고 Hono로 라우팅합니다.

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
import type { APIRoute } from 'astro';

// ... (Hono app setup from previous step) ...

export type App = typeof app; // Export Hono app type

export const ALL: APIRoute = (context) => app.fetch(context.request);</code>

이제 http://localhost:4321/api/posts에서는 Hono를 통해 모의 데이터를 반환합니다.

형식화된 RPC 클라이언트 추가

유형이 안전한 API 상호 작용을 위해서는 Hono의 hc 클라이언트를 사용하세요.

<code class="language-typescript">// src/pages/some-astro-page.astro
import { hc } from 'hono/client';
import type { App } from './api/[...path].ts';

const client = hc<App>(window.location.href);

const response = await client.posts.$get();
const json = await response.json();

console.log(json); // { posts: [...] }</code>

결론

이 설정은 Astro의 프런트엔드 성능과 Hono의 효율적인 백엔드 기능을 결합하여 유형 안전성을 갖춘 간소화된 개발 경험을 제공합니다. 더욱 발전된 API 개발을 위한 Hono의 광범위한 기능을 살펴보세요.

위 내용은 Astro를 Hono와 함께 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!