Skip to content

Commit 9f96890

Browse files
mynologlumirlumir
andauthored
docs: translate 'Error logging in production' section of the hydrateR… (#1255)
# hydrateRoot > Error logging in production 섹션 번역 1. hydrateRoot 페이지 <img width="1049" height="775" alt="스크린샷 2025-08-08 23 01 55" src="https://github.com/user-attachments/assets/ff73e516-79b3-4201-8d37-eb2bcd344e3f" /> 원문 <img width="1373" height="747" alt="스크린샷 2025-08-08 23 01 34" src="https://github.com/user-attachments/assets/395273e4-280b-4245-b6ae-2dd2827cc0fb" /> 번역 2. createRoot 페이지 #1252 - 해당 PR의 내용 중 일부 번역 수정 사항을 반영했습니다. - 원문 구조를 반영하여 componentStack과 errorInfo의 관계를 명확히 했습니다. - 코드 블럭 내 주석 번역이 누락되어 반영했습니다. <img width="928" height="181" alt="스크린샷 2025-08-08 23 00 24" src="https://github.com/user-attachments/assets/1063c72e-cb18-4a58-9bd4-36b76b416a3e" /> 수정 전 <img width="910" height="174" alt="스크린샷 2025-08-08 23 01 07" src="https://github.com/user-attachments/assets/1d25247f-fc7b-4496-a044-fa7b2ff2c129" /> 수정 후 ## 필수 확인 사항 - [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 <[email protected]>
1 parent 49bfb13 commit 9f96890

File tree

2 files changed

+18
-18
lines changed

2 files changed

+18
-18
lines changed

src/content/reference/react-dom/client/createRoot.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -373,17 +373,17 @@ const root = createRoot(container, {
373373
374374
<CodeStep step={1}>onCaughtError</CodeStep> 옵션은 다음 두 개의 인자를 받는 함수입니다.
375375
376-
1. 발생한 <CodeStep step={2}>error</CodeStep> 객체입니다.
377-
2. <CodeStep step={3}>errorInfo</CodeStep> 객체는 오류의 <CodeStep step={4}>componentStack</CodeStep> 정보를 포함합니다.
376+
1. 발생한 <CodeStep step={2}>error</CodeStep> 객체.
377+
2. 오류의 <CodeStep step={4}>componentStack</CodeStep> 정보를 포함한 <CodeStep step={3}>errorInfo</CodeStep> 객체.
378378
379379
`onUncaughtError``onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다.
380380
381381
<Sandpack>
382382
383383
```js src/reportError.js
384384
function reportError({ type, error, errorInfo }) {
385-
// The specific implementation is up to you.
386-
// `console.error()` is only used for demonstration purposes.
385+
// 구체적인 구현은 여러분에게 맡깁니다.
386+
// `console.error()`는 설명을 위한 용도입니다.
387387
console.error(type, error, "Component Stack: ");
388388
console.error("Component Stack: ", errorInfo.componentStack);
389389
}
@@ -414,9 +414,9 @@ import {
414414

415415
const container = document.getElementById("root");
416416
const root = createRoot(container, {
417-
// Keep in mind to remove these options in development to leverage
418-
// React's default handlers or implement your own overlay for development.
419-
// The handlers are only specfied unconditionally here for demonstration purposes.
417+
// 개발 환경에서는 이 옵션들을 제거하고
418+
// React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다.
419+
// 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다.
420420
onCaughtError: onCaughtErrorProd,
421421
onRecoverableError: onRecoverableErrorProd,
422422
onUncaughtError: onUncaughtErrorProd,

src/content/reference/react-dom/client/hydrateRoot.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -370,9 +370,9 @@ export default function App({counter}) {
370370
371371
Hydration된 루트에서 [`root.render`](#root-render)를 호출하는 것은 흔한 일은 아닙니다. 내부 컴포넌트 중 한 곳에서 [useState](/reference/react/useState)를 사용하는 것이 일반적입니다.
372372
373-
### Error logging in production {/*error-logging-in-production*/}
373+
### 프로덕션 환경에서 오류 로깅하기 {/*error-logging-in-production*/}
374374
375-
By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`:
375+
React는 기본적으로 모든 오류를 콘솔에 출력합니다. 사용자 정의 오류 보고 기능을 구현하기 위해서 `onUncaughtError`, `onCaughtError`, `onRecoverableError`와 같은 에러 핸들러 루트 옵션을 제공할 수 있습니다.
376376
377377
```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]]
378378
import { hydrateRoot } from "react-dom/client";
@@ -392,19 +392,19 @@ const root = hydrateRoot(container, <App />, {
392392
});
393393
```
394394
395-
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
395+
<CodeStep step={1}>onCaughtError</CodeStep> 옵션은 다음 두 개의 인자를 받는 함수입니다.
396396
397-
1. The <CodeStep step={2}>error</CodeStep> that was thrown.
398-
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
397+
1. 발생한 <CodeStep step={2}>error</CodeStep> 객체.
398+
2. 오류의 <CodeStep step={4}>componentStack</CodeStep> 정보를 포함한 <CodeStep step={3}>errorInfo</CodeStep> 객체.
399399
400-
Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
400+
`onUncaughtError``onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다.
401401
402402
<Sandpack>
403403
404404
```js src/reportError.js
405405
function reportError({ type, error, errorInfo }) {
406-
// The specific implementation is up to you.
407-
// `console.error()` is only used for demonstration purposes.
406+
// 구체적인 구현은 여러분에게 맡깁니다.
407+
// `console.error()`는 설명을 위한 용도입니다.
408408
console.error(type, error, "Component Stack: ");
409409
console.error("Component Stack: ", errorInfo.componentStack);
410410
}
@@ -435,9 +435,9 @@ import {
435435

436436
const container = document.getElementById("root");
437437
hydrateRoot(container, <App />, {
438-
// Keep in mind to remove these options in development to leverage
439-
// React's default handlers or implement your own overlay for development.
440-
// The handlers are only specfied unconditionally here for demonstration purposes.
438+
// 개발 환경에서는 이 옵션들을 제거하고
439+
// React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다.
440+
// 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다.
441441
onCaughtError: onCaughtErrorProd,
442442
onRecoverableError: onRecoverableErrorProd,
443443
onUncaughtError: onUncaughtErrorProd,

0 commit comments

Comments
 (0)