diff --git a/src/content/docs/ko/reference/configuration-reference.mdx b/src/content/docs/ko/reference/configuration-reference.mdx index 00fed136abd42..a58687167d49f 100644 --- a/src/content/docs/ko/reference/configuration-reference.mdx +++ b/src/content/docs/ko/reference/configuration-reference.mdx @@ -1257,6 +1257,106 @@ Astro는 사용자가 새로운 기능에 조기에 액세스할 수 있도록 e } ``` +### experimental.actions + +

+ +**타입:** `boolean`
+**기본값:** `false`
+ +

+ +액션은 어디에서나 호출할 수 있는 타입 안정성을 갖춘 백엔드 함수를 작성하는 데 도움이 됩니다. [`output` 속성을 사용하여](/ko/basics/rendering-modes/#on-demand-rendered) 서버 렌더링을 활성화하고 `experimental` 객체에 `actions` 플래그를 추가합니다. + +```js +{ + output: 'hybrid', // 또는 'server' + experimental: { + actions: true, + }, +} +``` + +`src/actions/index.ts` 파일에서 모든 액션을 선언합니다. 이 파일은 전역 액션 핸들러입니다. + +`astro:actions` 모듈의 `defineAction()` 유틸리티를 사용하여 액션을 정의합니다. 이 액션은 서버 측 요청 핸들러를 정의하기 위해 `handler` 속성을 허용합니다. 액션이 인수를 허용하는 경우 `input` 속성을 적용하여 Zod로 매개변수를 검증하세요. + +이 예시에서는 `like`와 `comment`라는 두 가지 액션을 정의합니다. `like` 액션은 `postId` 문자열이 포함된 JSON 객체를 허용하는 반면, `comment` 액션은 `postId`, `author` 및 `body` 문자열을 포함하는 [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)를 허용합니다. 각 `handler`는 데이터베이스를 업데이트하고 타입 안정성을 갖춘 응답을 반환합니다. + +```ts +// src/actions/index.ts +import { defineAction, z } from "astro:actions"; + +export const server = { + like: defineAction({ + input: z.object({ postId: z.string() }), + handler: async ({ postId }) => { + // db에서 likes 업데이트 + + return likes; + }, + }), + comment: defineAction({ + accept: 'form', + input: z.object({ + postId: z.string(), + author: z.string(), + body: z.string(), + }), + handler: async ({ postId }) => { + // db에 comment 삽입 + + return comment; + }, + }), +}; +``` + +그런 다음 `astro:actions`의 `actions` 객체를 사용하여 클라이언트 컴포넌트에서 액션을 호출합니다. JSON을 사용할 때는 타입 안정성을 갖춘 객체를 전달할 수 있고, 액션 정의에서 `accept: 'form'`을 사용할 때는 [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) 객체를 전달할 수 있습니다. + +이 예시는 React 컴포넌트에서 `like` 및 `comment` 액션을 호출합니다. + +```tsx "actions" +// src/components/blog.tsx +import { actions } from "astro:actions"; +import { useState } from "react"; + +export function Like({ postId }: { postId: string }) { + const [likes, setLikes] = useState(0); + return ( + + ); +} + +export function Comment({ postId }: { postId: string }) { + return ( +
{ + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const result = await actions.blog.comment(formData); + // result 핸들링 + }} + > + + + + + +
+ ); +} +``` + +전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면 [Actions RFC](https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md)를 참조하세요. + ### experimental.contentCollectionCache

@@ -1458,4 +1558,59 @@ export default defineConfig({ } } }) -``` \ No newline at end of file +``` + +### experimental.rewriting + +

+ +**타입:** `boolean`
+**기본값:** `false`
+ +

+ +Astro 페이지, 엔드포인트 및 Astro 미들웨어에서 요청을 리라이팅하기 위한 라우팅 기능을 활성화하여 경로를 프로그래밍 방식으로 제어할 수 있습니다. + +```js +{ + experimental: { + rewriting: true, + }, +} +``` + +다른 페이지로 다시 라우팅하려면 `.astro` 파일에서 `Astro.rewrite`를 사용합니다. + +```astro "rewrite" +--- +// src/pages/dashboard.astro +if (!Astro.props.allowed) { + return Astro.rewrite("/") +} +--- +``` + +다른 페이지로 다시 라우팅하려면 엔드포인트 파일에서 `context.rewrite`를 사용합니다. + +```js +// src/pages/api.js +export function GET(ctx) { + if (!ctx.locals.allowed) { + return ctx.rewrite("/") + } +} +``` + +미들웨어 파일에서 `next("/")`를 사용하여 다른 페이지로 다시 라우팅한 후 다음 미들웨어 함수를 호출합니다. + +```js +// src/middleware.js +export function onRequest(ctx, next) { + if (!ctx.cookies.get("allowed")) { + return next("/") // 새 시그니처 + } + return next(); +} +``` + +전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면 [RFC 리라우팅](https://github.com/withastro/roadmap/blob/feat/reroute/proposals/0047-rerouting.md)을 참조하세요 \ No newline at end of file