@@ -318,15 +322,15 @@ export default function Search() {
-### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+### 자바스크립트 없이 폼 제출 에러 보여주기 {/*display-a-form-submission-error-without-javascript*/}
-Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
+점진적 향상을 위해 자바스크립트 번들이 로드되기 전 에러 메시지를 보여주기 위해 다음 요소들이 지켜져야 합니다.
-1. `
` be rendered by a [Server Component](/reference/rsc/use-client)
-1. the function passed to the `
`'s `action` prop be a [Server Action](/reference/rsc/use-server)
-1. the `useActionState` Hook be used to display the error message
+1. `
`의 `action` 프로퍼티로 전달된 함수가 [Server Action](/reference/rsc/use-server).
+3. `useActionState` hook이 에러메시지를 보여주기 위해 사용.
-`useActionState` takes two parameters: a [Server Action](/reference/rsc/use-server) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to displayed an error message. The value returned by the [Server Action](/reference/rsc/use-server) passed to `useActionState` will be used to update the state variable.
+`useActionState`는 [Server Action](/reference/rsc/use-server)과 초기 상태 값이라는 두 개의 매개변수를 가집니다. `useActionState`는 상태 변수와 액션이라는 두 개의 값을 반환합니다. `useActionState`를 통해 반환된 액션은 폼의 `action` 프로퍼티에 전달될 수 있습니다. `useActionState`를 통해 반환된 상태 변수는 에러 메시지를 보여주는 데 사용됩니다. `useActionState`에 전달된 [Server Action](/reference/rsc/use-server)에서 반환된 값은 상태 변수를 업데이트하는 데 사용됩니다.
@@ -386,13 +390,13 @@ export async function signUpNewUser(newEmail) {
-Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
+[`useActionState`](/reference/react/useActionState)문서를 통해 폼 작업에서 상태를 업데이트하는 방법에 대해 자세히 알아보세요.
-### Handling multiple submission types {/*handling-multiple-submission-types*/}
+### 다양한 제출 타입 처리하기 {/*handling-multiple-submission-types*/}
-Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+사용자가 누른 버튼에 따라 여러 제출 작업을 처리하도록 폼을 설계할 수 있습니다. 폼 내부의 각 버튼은 `formAction` 프로퍼티를 설정하여 고유한 동작 또는 동작과 연결할 수 있습니다.
-When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
+사용자가 특정 버튼을 클릭하면 폼이 제출되고 해당 버튼의 속성 및 동작으로 정의된 해당 동작이 실행됩니다. 예를 들어, 폼은 기본적으로 검토를 위해 문서를 제출하지만 `formAction`이 설정된 별도의 버튼이 있어 문서를 초안으로 저장할 수 있습니다.
From cd9e72b207824a42c1f0c81f575ee85f727ce407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=ED=98=B8=EC=A7=84?=
<47904304+HojinAn@users.noreply.github.com>
Date: Mon, 10 Jun 2024 10:03:47 +0900
Subject: [PATCH 0002/1012] Translate: Server Actions (#934)
* docs: translate Server Actions page
* docs: reflect reviews
---------
Co-authored-by: Haegul Pyun
---
src/content/reference/rsc/server-actions.md | 62 ++++++++++-----------
1 file changed, 31 insertions(+), 31 deletions(-)
diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md
index 06613cb7c..ae3cd391f 100644
--- a/src/content/reference/rsc/server-actions.md
+++ b/src/content/reference/rsc/server-actions.md
@@ -5,7 +5,7 @@ canary: true
-Server Actions allow Client Components to call async functions executed on the server.
+Server Actions를 사용하면 클라이언트 컴포넌트가 서버에서 실행되는 비동기 함수를 호출할 수 있습니다.
@@ -13,21 +13,21 @@ Server Actions allow Client Components to call async functions executed on the s
-#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-actions*/}
+#### Server Actions에 대한 지원은 어떻게 구축하나요? {/*how-do-i-build-support-for-server-actions*/}
-While Server Actions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Actions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
+React 19의 Server Actions는 안정적이고 주요 버전 간에 중단되지 않지만, React 서버 컴포넌트 bundler 또는 프레임워크에서 Server Actions를 구현하는 데 사용되는 API는 semver를 따르지 않으며 React 19.x의 마이너 버전에서는 중단될 수 있습니다.
-To support Server Actions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Actions in the future.
+Server Actions를 bundler 또는 프레임워크로 지원하려면, 특정 React 버전에 고정하거나 카나리(Canary) 릴리즈를 사용하는 것이 좋습니다. 향후 Server Actions를 구현하는 데 사용되는 API를 안정화하기 위해 bundler 및 프레임워크와 계속 협력할 예정입니다.
-When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+Server Action이 `"use server"` 지시어로 정의되면, 프레임워크는 자동으로 서버 함수에 대한 참조를 생성하고 해당 참조를 클라이언트 컴포넌트에 전달합니다. 클라이언트에서 해당 함수가 호출되면, React는 서버에 함수를 실행하라는 요청을 보내고 결과를 반환합니다.
-Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
+Server Actions는 서버 컴포넌트에서 생성하여 클라이언트 컴포넌트 props로 전달하거나 클라이언트 컴포넌트에서 가져와서 사용할 수 있습니다.
-### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/}
+### 서버 컴포넌트에서 Server Action 만들기 {/*creating-a-server-action-from-a-server-component*/}
-Server Components can define Server Actions with the `"use server"` directive:
+서버 컴포넌트는 `"use server"` 지시어로 Server Actions를 정의할 수 있습니다.
```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
// Server Component
@@ -45,7 +45,7 @@ function EmptyNote () {
}
```
-When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
+React가 `EmptyNote` 서버 컴포넌트를 렌더링할 때, `createNoteAction` 함수에 대한 참조를 생성하고, 그 참조를 `Button` 클라이언트 컴포넌트에 전달합니다. 버튼이 클릭 되면, React는 제공된 참조로 `createNoteAction` 함수를 실행하라는 요청을 서버로 보냅니다.
```js {5}
"use client";
@@ -57,12 +57,12 @@ export default function Button({onClick}) {
}
```
-For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+자세한 내용은 [`"use server"`](/reference/rsc/use-server) 문서를 참조하세요.
-### Importing Server Actions from Client Components {/*importing-server-actions-from-client-components*/}
+### 클라이언트 컴포넌트에서 Server Actions 가져오기 {/*importing-server-actions-from-client-components*/}
-Client Components can import Server Actions from files that use the `"use server"` directive:
+클라이언트 컴포넌트는 `"use server"` 지시어를 사용하는 파일에서 Server Actions를 가져올 수 있습니다.
```js [[1, 3, "createNoteAction"]]
"use server";
@@ -73,7 +73,7 @@ export async function createNoteAction() {
```
-When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
+bundler가 `EmptyNote` 클라이언트 컴포넌트를 빌드할 때, bundle에서 `createNoteAction` 함수에 대한 참조를 생성합니다. 버튼이 클릭 되면, React는 제공된 참조를 사용해 `createNoteAction` 함수를 실행하도록 서버에 요청을 보냅니다.
```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
"use client";
@@ -86,11 +86,11 @@ function EmptyNote() {
}
```
-For more, see the docs for [`"use server"`](/reference/rsc/use-server).
+자세한 내용은 [`"use server"`](/reference/rsc/use-server) 문서를 참조하세요.
-### Composing Server Actions with Actions {/*composing-server-actions-with-actions*/}
+### 액션으로 Server Actions 구성하기 {/*composing-server-actions-with-actions*/}
-Server Actions can be composed with Actions on the client:
+Server Actions는 클라이언트의 액션과 함께 구성할 수 있습니다.
```js [[1, 3, "updateName"]]
"use server";
@@ -134,15 +134,15 @@ function UpdateName() {
}
```
-This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client.
+이렇게 하면 클라이언트의 액션으로 래핑하여 Server Action의 `isPending` 상태에 액세스할 수 있습니다.
-For more, see the docs for [Calling a Server Action outside of `
`](/reference/rsc/use-server#calling-a-server-action-outside-of-form)
+자세한 내용은 [`
` 외부에서 Server Action 호출하기](/reference/rsc/use-server#calling-a-server-action-outside-of-form) 문서를 참조하세요.
-### Form Actions with Server Actions {/*form-actions-with-server-actions*/}
+### Server Actions를 사용한 폼 액션 {/*form-actions-with-server-actions*/}
-Server Actions work with the new Form features in React 19.
+Server Actions는 React 19의 새로운 Form 기능과 함께 작동합니다.
-You can pass a Server Action to a Form to automatically submit the form to the server:
+Server Action을 Form에 전달하여 폼을 서버에 자동으로 제출할 수 있습니다.
```js [[1, 3, "updateName"], [1, 7, "updateName"]]
@@ -159,13 +159,13 @@ function UpdateName() {
}
```
-When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
+Form 제출이 성공하면, React는 자동으로 폼을 재설정합니다. 보류 상태, 마지막 응답에 액세스하거나 점진적인 향상을 지원하기 위해 `useActionState`를 추가할 수 있습니다.
-For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#server-actions-in-forms).
+자세한 내용은 [Server Actions 형식](/reference/rsc/use-server#server-actions-in-forms) 문서를 참조하세요.
-### Server Actions with `useActionState` {/*server-actions-with-use-action-state*/}
+### `useActionState`를 사용한 Server Actions {/*server-actions-with-use-action-state*/}
-You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
+액션 보류 상태와 마지막으로 반환된 응답에 액세스하기만 하면 되는 일반적인 경우에는 `useActionState`를 사용하여 Server Actions를 구성할 수 있습니다.
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
"use client";
@@ -184,13 +184,13 @@ function UpdateName() {
}
```
-When using `useActionState` with Server Actions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
+Server Actions와 함께 `useActionState`를 사용하는 경우, React는 hydration이 완료되기 전에 입력된 폼 제출 또한 자동으로 재생합니다. 즉, 사용자는 앱이 hydration 되기 전에도 앱과 상호작용을 할 수 있습니다.
-For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+자세한 내용은 [`useActionState`](/reference/react-dom/hooks/useFormState) 문서를 참조하세요.
-### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
+### `useActionState`를 통한 점진적 향상 {/*progressive-enhancement-with-useactionstate*/}
-Server Actions also support progressive enhancement with the third argument of `useActionState`.
+Server Actions는 `useActionState`의 세 번째 인수를 통해 점진적 향상도 지원합니다.
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
"use client";
@@ -208,6 +208,6 @@ function UpdateName() {
}
```
-When the permalink is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
+permalink가 `useActionState`에 제공될 때, 자바스크립트 bundle이 로드되기 전에 폼이 제출되면 React는 제공된 URL로 리디렉션합니다.
-For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useFormState).
+자세한 내용은 [`useActionState`](/reference/react-dom/hooks/useFormState) 문서를 참조하세요.
From 14f3c655d1e67b57c645c4f7029373bf25069e12 Mon Sep 17 00:00:00 2001
From: Youngjo Gil <74961404+youngjo-gil@users.noreply.github.com>
Date: Mon, 10 Jun 2024 10:07:21 +0900
Subject: [PATCH 0003/1012] Translate: link (#936)
* docs: translate link component page
* Update src/content/reference/react-dom/components/link.md
Co-authored-by: Haegul Pyun
* Update src/content/reference/react-dom/components/link.md
Co-authored-by: Haegul Pyun
---------
Co-authored-by: Haegul Pyun
---
.../reference/react-dom/components/link.md | 118 +++++++++---------
1 file changed, 59 insertions(+), 59 deletions(-)
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index 730d9e995..e1d73f42f 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -5,13 +5,13 @@ canary: true
-React's extensions to `` are currently only available in React's canary and experimental channels. In stable releases of React `` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+React의 `` 확장은 현재 React의 카나리(Canary) 채널과 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 ``가 [내장 브라우저 HTML 컴포넌트](https://react.dev/reference/react-dom/components#all-html-components)로만 작동합니다. 자세한 내용은 [React 릴리즈 채널](/community/versioning-policy#all-release-channels)에서 확인할 수 있습니다.
-The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) lets you use external resources such as stylesheets or annotate the document with link metadata.
+[브라우저 내장 `` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
```js
@@ -23,94 +23,94 @@ The [built-in browser `` component](https://developer.mozilla.org/en-US/do
---
-## Reference {/*reference*/}
+## 레퍼런스 {/*reference*/}
### `` {/*link*/}
-To link to external resources such as stylesheets, fonts, and icons, or to annotate the document with link metadata, render the [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). You can render `` from any component and React will [in most cases](#special-rendering-behavior) place the corresponding DOM element in the document head.
+스타일시트, 폰트, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [브라우저 내장 `` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 ``를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 ``에 배치합니다.
```js
```
-[See more examples below.](#usage)
+[아래 더 많은 예시가 있습니다.](#usage)
#### Props {/*props*/}
-`` supports all [common element props.](/reference/react-dom/components/common#props)
+``는 모든 [공통 요소 속성](/reference/react-dom/components/common#props)을 지원합니다.
-* `rel`: a string, required. Specifies the [relationship to the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). React [treats links with `rel="stylesheet"` differently](#special-rendering-behavior) from other links.
+* `rel`: 문자열 타입, 필수, [리소스와의 관계](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)를 지정합니다. React는 다른 링크와는 달리 [`rel="stylesheet"` 링크를 특별하게 처리](#special-rendering-behavior)합니다.
-These props apply when `rel="stylesheet"`:
+다음 속성들은 `rel="stylesheet"`인 경우에 적용됩니다.
-* `precedence`: a string. Tells React where to rank the `` DOM node relative to others in the document ``, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `` or inline `
@@ -23,53 +23,54 @@ The [built-in browser `
```
-[See more examples below.](#usage)
+[아래에 더 많은 예시를 확인하세요.](#usage)
#### Props {/*props*/}
-`
@@ -37,7 +37,7 @@ React의 `` 확장은 현재 React의 카나리(Canary) 버전 및 실험
#### Props {/*props*/}
-`
@@ -20,17 +20,17 @@ style: "
```
-[아래에 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
#### Props {/*props*/}
-`