Skip to content

Commit 17590fd

Browse files
docs: Update Korean translation for example UI text in form.md (#1272)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> # `<Form>` 문서 내 모든 예제의 UI 텍스트를 한국어로 번역 관련 이슈: #1270 - 기존 `<form>` 문서에서 '낙관적으로 폼 데이터 업데이트하기'[(링크)](https://ko.react.dev/reference/react-dom/components/form#optimistically-updating-form-data) 예제 설명은 `'제출'`, `'제출중...'`으로 되어있는데, 예제 코드는 `'Send'`, `'Sending...'`으로 되어 있었습니다. 일관되게 표현해주기 위해 예제 코드를 한국어로 수정해주는 작업을 진행했습니다. - 참고로 예제 코드가 메시지 전송과 관련되어 있어서 기존 번역 `'제출'`과 `'제출중...'`을 `'전송'`과 `'전송중...'`으로 수정해줬습니다. - 위 예제와 일관성을 맞추기 위해 `<form>` 문서에 있는 모든 예제 코드의 UI 텍스트를 한국어로 번역하는 작업을 진행했습니다. ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <rpfos@naver.com>
1 parent 58a5839 commit 17590fd

File tree

1 file changed

+22
-22
lines changed
  • src/content/reference/react-dom/components

1 file changed

+22
-22
lines changed

src/content/reference/react-dom/components/form.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ title: "<form>"
44

55
<Intro>
66

7-
[내장 브라우저 `<form>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 정보 제출을 위한 대화형 컨트롤을 만들 수 있습니다.
7+
[내장 브라우저 `<form>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 정보 제출을 위한 대화형 컨트롤을 만들 수 있습니다.
88

99
```js
1010
<form action={search}>
1111
<input name="query" />
12-
<button type="submit">Search</button>
12+
<button type="submit">검색</button>
1313
</form>
1414
```
1515

@@ -28,7 +28,7 @@ title: "<form>"
2828
```js
2929
<form action={search}>
3030
<input name="query" />
31-
<button type="submit">Search</button>
31+
<button type="submit">검색</button>
3232
</form>
3333
```
3434

@@ -58,12 +58,12 @@ title: "<form>"
5858
export default function Search() {
5959
function search(formData) {
6060
const query = formData.get("query");
61-
alert(`You searched for '${query}'`);
61+
alert(`'${query}'을(를) 검색했습니다.`);
6262
}
6363
return (
6464
<form action={search}>
6565
<input name="query" />
66-
<button type="submit">Search</button>
66+
<button type="submit">검색</button>
6767
</form>
6868
);
6969
}
@@ -92,7 +92,7 @@ function AddToCart({productId}) {
9292
return (
9393
<form action={addToCart}>
9494
<input type="hidden" name="productId" value={productId} />
95-
<button type="submit">Add to Cart</button>
95+
<button type="submit">장바구니에 추가</button>
9696
</form>
9797
);
9898
}
@@ -111,7 +111,7 @@ function AddToCart({productId}) {
111111
const addProductToCart = addToCart.bind(null, productId);
112112
return (
113113
<form action={addProductToCart}>
114-
<button type="submit">Add to Cart</button>
114+
<button type="submit">장바구니에 추가</button>
115115
</form>
116116
);
117117
}
@@ -135,7 +135,7 @@ function Submit() {
135135
const { pending } = useFormStatus();
136136
return (
137137
<button type="submit" disabled={pending}>
138-
{pending ? "Submitting..." : "Submit"}
138+
{pending ? "제출중..." : "제출"}
139139
</button>
140140
);
141141
}
@@ -167,7 +167,7 @@ export async function submitForm(query) {
167167

168168
`useOptimistic` Hook은 네트워크 요청과 같은 백그라운드의 작업이 끝나기 전에 사용자 인터페이스에 낙관적으로 업데이트하는 방법을 제공합니다. 폼의 맥락에서 이 기술은 앱을 더욱 반응형으로 느끼게 해줍니다. 사용자가 폼을 제출하면 인터페이스는 사용자가 기대하는 결과물로 즉시 업데이트됩니다.
169169

170-
예를 들어, 사용자가 폼에 메시지를 입력하고 "제출" 버튼을 클릭하면 `useOptimistic` Hook은 "제출중..." 라벨과 함께 메시지가 서버에 보내지기 전에 리스트에 즉시 보입니다. 이러한 '낙관적인' 접근 방식은 속도와 반응성이 뛰어나다는 인상을 줍니다. 그다음 폼은 실제로 백그라운드에 메시지 보내기를 시도합니다. 서버에 메시지가 잘 도착하면, "제출중..." 라벨은 사라집니다.
170+
예를 들어, 사용자가 폼에 메시지를 입력하고 "전송" 버튼을 클릭하면 `useOptimistic` Hook은 "전송중..." 라벨과 함께 메시지가 서버에 보내지기 전에 리스트에 즉시 보입니다. 이러한 '낙관적인' 접근 방식은 속도와 반응성이 뛰어나다는 인상을 줍니다. 그다음 폼은 실제로 백그라운드에 메시지 보내기를 시도합니다. 서버에 메시지가 잘 도착하면, "전송중..." 라벨은 사라집니다.
171171

172172

173173
<Sandpack>
@@ -200,12 +200,12 @@ function Thread({ messages, sendMessage }) {
200200
{optimisticMessages.map((message, index) => (
201201
<div key={index}>
202202
{message.text}
203-
{!!message.sending && <small> (Sending...)</small>}
203+
{!!message.sending && <small> (전송중...)</small>}
204204
</div>
205205
))}
206206
<form action={formAction} ref={formRef}>
207207
<input type="text" name="message" placeholder="Hello!" />
208-
<button type="submit">Send</button>
208+
<button type="submit">전송</button>
209209
</form>
210210
</>
211211
);
@@ -253,7 +253,7 @@ export default function Search() {
253253
>
254254
<form action={search}>
255255
<input name="query" />
256-
<button type="submit">Search</button>
256+
<button type="submit">검색</button>
257257
</form>
258258
</ErrorBoundary>
259259
);
@@ -298,20 +298,20 @@ export default function Page() {
298298
const email = formData.get("email");
299299
try {
300300
await signUpNewUser(email);
301-
alert(`Added "${email}"`);
301+
alert(`"${email}"을 등록했어요`);
302302
} catch (err) {
303303
return err.toString();
304304
}
305305
}
306306
const [message, signupAction] = useActionState(signup, null);
307307
return (
308308
<>
309-
<h1>Signup for my newsletter</h1>
310-
<p>Signup with the same email twice to see an error</p>
309+
<h1>뉴스레터에 가입하세요</h1>
310+
<p>같은 이메일로 두 번 가입하여 오류를 확인하세요.</p>
311311
<form action={signupAction} id="signup-form">
312-
<label htmlFor="email">Email: </label>
312+
<label htmlFor="email">이메일: </label>
313313
<input name="email" id="email" placeholder="react@example.com" />
314-
<button>Sign up</button>
314+
<button>가입하기</button>
315315
{!!message && <p>{message}</p>}
316316
</form>
317317
</>
@@ -324,7 +324,7 @@ let emails = [];
324324

325325
export async function signUpNewUser(newEmail) {
326326
if (emails.includes(newEmail)) {
327-
throw new Error("This email address has already been added");
327+
throw new Error("이 이메일 주소는 이미 등록되었습니다.");
328328
}
329329
emails.push(newEmail);
330330
}
@@ -347,20 +347,20 @@ export default function Search() {
347347
function publish(formData) {
348348
const content = formData.get("content");
349349
const button = formData.get("button");
350-
alert(`'${content}' was published with the '${button}' button`);
350+
alert(`'${button}' 버튼으로 '${content}'가 발행되었습니다.`);
351351
}
352352

353353
function save(formData) {
354354
const content = formData.get("content");
355-
alert(`Your draft of '${content}' has been saved!`);
355+
alert(`'${content}' 초안이 저장되었습니다!`);
356356
}
357357

358358
return (
359359
<form action={publish}>
360360
<textarea name="content" rows={4} cols={40} />
361361
<br />
362-
<button type="submit" name="button" value="submit">Publish</button>
363-
<button formAction={save}>Save draft</button>
362+
<button type="submit" name="button" value="submit">발행</button>
363+
<button formAction={save}>초안 저장</button>
364364
</form>
365365
);
366366
}

0 commit comments

Comments
 (0)