[#73] docs: custom-document 번역 (#74)

* [#73] docs: custom-document 번역 * [#73] docs: 코드 내 주석 번역
luciancah · Aug 5, 2024 · 9f02a06 · 9f02a06
1 parent 973952d
commit 9f02a06
Showing 1 changed file with 21 additions and 23 deletions.
diff --git a/pages/docs/pages/building-your-application/routing/custom-document.mdx b/pages/docs/pages/building-your-application/routing/custom-document.mdx
@@ -3,13 +3,11 @@ title: Custom Document
 description: Extend the default document markup added by Next.js.
 ---
 
-{/* TODO: 번역이 필요합니다. */}
-
 # Custom Document
 
-A custom `Document` can update the `<html>` and `<body>` tags used to render a [Page](/docs/pages/building-your-application/routing/pages-and-layouts).
+사용자 정의 `Document`는 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)를 렌더링하는 데 사용되는 `<html>` 및 `<body>` 태그를 업데이트할 수 있습니다.
 
-To override the default `Document`, create the file `pages/_document` as shown below:
+기본 `Document`를 오버라이드 하려면 아래와 같이 `pages/_document` 파일을 생성하세요.
 
 ```tsx filename="pages/_document.tsx" switcher
 import { Html, Head, Main, NextScript } from 'next/document'
@@ -43,22 +41,22 @@ export default function Document() {
 }
 ```
 
-> **Good to know**
+> **알아두면 유용한 정보**
 >
-> - `_document` is only rendered on the server, so event handlers like `onClick` cannot be used in this file.
-> - `<Html>`, `<Head />`, `<Main />` and `<NextScript />` are required for the page to be properly rendered.
+> - `_document`는 서버에서만 렌더링되므로, 이 파일에서는 `onClick`과 같은 이벤트 핸들러를 사용할 수 없습니다.
+> - 페이지가 제대로 렌더링되려면 `<Html>`, `<Head />`, `<Main />` 및 `<NextScript />`가 필요합니다.
 
 ## Caveats
 
-- The `<Head />` component used in `_document` is not the same as [`next/head`](/docs/pages/api-reference/components/head). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/pages/api-reference/components/head) in your pages or components.
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) instead.
-- `Document` currently does not support Next.js [Data Fetching methods](/docs/pages/building-your-application/data-fetching) like [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) or [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+- `_document`에 사용된 `<Head />` 컴포넌트는 [`next/head`](/docs/pages/api-reference/components/head)와 동일하지 않습니다. 여기에 사용된 `<Head />` 컴포넌트는 모든 페이지에 공통으로 적용되는 `<head>` 코드에만 사용해야 합니다. `<title>` 태그와 같은 다른 모든 경우에는 페이지 또는 컴포넌트에서 [`next/head`](/docs/pages/api-reference/components/head)를 사용하는 것이 좋습니다.
+- `<Main />` 외부의 React 컴포넌트는 브라우저에서 초기화되지 않습니다. 여기에 애플리케이션 로직이나 커스텀 CSS(예: `styled-jsx`)를 _추가하지 마세요_. 모든 페이지에 공유되는 컴포넌트(메뉴 또는 툴바)가 필요한 경우 [레이아웃](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern)을 대신 참고하세요.
+- `Document`는 현재 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) 또는 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)와 같은 Next.js [데이터 패칭 메서드](/docs/pages/building-your-application/data-fetching)를 지원하지 않습니다.
 
 ## Customizing `renderPage`
 
-Customizing `renderPage` is advanced and only needed for libraries like CSS-in-JS to support server-side rendering. This is not needed for built-in `styled-jsx` support.
+`renderPage` 커스터마이징은 고급 기술이며 서버 사이드 렌더링을 지원하기 위해 CSS-in-JS와 같은 라이브러리에서만 필요합니다. 내장된 `styled-jsx` 지원에는 필요하지 않습니다.
 
-**We do not recommend using this pattern.** Instead, consider [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router, which allows you to more easily fetch data for [pages and layouts](/docs/app/building-your-application/routing/layouts-and-templates).
+**이 패턴을 사용하지 않는 것이 좋습니다.** 대신 [페이지와 레이아웃](/docs/app/building-your-application/routing/layouts-and-templates)에 대한 데이터를 더 쉽게 가져올 수 있는 App Router를 [점진적으로 도입](/docs/app/building-your-application/upgrading/app-router-migration)하는 것을 고려하세요.
 
 ```tsx filename="pages/_document.tsx" switcher
 import Document, {
@@ -76,16 +74,16 @@ class MyDocument extends Document {
   ): Promise<DocumentInitialProps> {
     const originalRenderPage = ctx.renderPage
 
-    // Run the React rendering logic synchronously
+    // React 렌더링 로직을 동기적으로 실행합니다.
     ctx.renderPage = () =>
       originalRenderPage({
-        // Useful for wrapping the whole react tree
+        // 전체 React 트리를 래핑하는 데 유용합니다.
         enhanceApp: (App) => App,
-        // Useful for wrapping in a per-page basis
+        // 페이지별로 래핑하는 데 유용합니다.
         enhanceComponent: (Component) => Component,
       })
 
-    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
+    //  부모의 `getInitialProps`를 실행하며, 이제 커스텀 `renderPage`가 포함됩니다.
     const initialProps = await Document.getInitialProps(ctx)
 
     return initialProps
@@ -114,16 +112,16 @@ class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const originalRenderPage = ctx.renderPage
 
-    // Run the React rendering logic synchronously
+    // React 렌더링 로직을 동기적으로 실행합니다.
     ctx.renderPage = () =>
       originalRenderPage({
-        // Useful for wrapping the whole react tree
+        // 전체 React 트리를 래핑하는 데 유용합니다.
         enhanceApp: (App) => App,
-        // Useful for wrapping in a per-page basis
+        // 페이지별로 래핑하는 데 유용합니다.
         enhanceComponent: (Component) => Component,
       })
 
-    // Run the parent `getInitialProps`, it now includes the custom `renderPage`
+    //  부모의 `getInitialProps`를 실행하며, 이제 커스텀 `renderPage`가 포함됩니다.
     const initialProps = await Document.getInitialProps(ctx)
 
     return initialProps
@@ -145,7 +143,7 @@ class MyDocument extends Document {
 export default MyDocument
 ```
 
-> **Good to know**
+> **알아두면 유용한 정보**
 >
-> - `getInitialProps` in `_document` is not called during client-side transitions.
-> - The `ctx` object for `_document` is equivalent to the one received in [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object), with the addition of `renderPage`.
+> - `_document`의 `getInitialProps`는 클라이언트 측 전환 중에는 호출되지 않습니다.
+> - `_document`의 `ctx` 객체는 [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object)에서 받은 것과 동일하며, `renderPage`가 추가되어 있습니다.