[no-issue] docs: 10월 문서 업데이트 (#142)

* [#123] docs: use-amp 번역 (#128) * [#125] docs: routing 번역 (#129) * [no-issue] fix: 잘못된 들여쓰기 수정 (#136) * [no-issue] fix: 일관성 및 잘못된 들여쓰기 수정 (#137) * [no-issue] fix: 잘못 입력된 링크 수정 (#138) * [no-issue] fix: 잘못된 들여쓰기 수정 (#139) * [no-issue] fix: 예시 코드 정리 (#140) * [no-issue] fix: 잘못 입력된 링크 수정 & 용어 수정 (#141) --------- Co-authored-by: White <97525377+blueline1984@users.noreply.github.com> Co-authored-by: 김석진(poki) <102217654+SEOKKAMONI@users.noreply.github.com>
luciancah · Oct 13, 2024 · d3d1d89 · d3d1d89
1 parent 714244d
commit d3d1d89
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 46 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -312,6 +312,24 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "blueline1984",
+      "name": "White",
+      "avatar_url": "https://avatars.githubusercontent.com/u/97525377?v=4",
+      "profile": "http://github.com/blueline1984",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "seokkamoni",
+      "name": "김석진(poki)",
+      "avatar_url": "https://avatars.githubusercontent.com/u/102217654?v=4",
+      "profile": "https://blog.seokkamoni.me",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .next
 node_modules
 .DS_Store
+.idea
diff --git a/README.md b/README.md
@@ -76,6 +76,10 @@
         <td align="center" valign="top" width="14.28%"><a href="https://github.com/HarrySeop"><img src="https://avatars.githubusercontent.com/u/141125424?v=4" width="100px;" alt="HarrySeop"/><br /><sub><b>HarrySeop</b></sub></a><br /><a href="#content-HarrySeop" title="Content">🖋</a></td>
         <td align="center" valign="top" width="14.28%"><a href="https://velog.io/@lionleeee"><img src="https://avatars.githubusercontent.com/u/51181222?v=4" width="100px;" alt="정훈"/><br /><sub><b>정훈</b></sub></a><br /><a href="#content-lionleeee" title="Content">🖋</a></td>
         <td align="center" valign="top" width="14.28%"><a href="https://sangseophwang.tistory.com/"><img src="https://avatars.githubusercontent.com/u/79933417?v=4" width="100px;" alt="SangSeop Hwang"/><br /><sub><b>SangSeop Hwang</b></sub></a><br /><a href="#content-sangseophwang" title="Content">🖋</a></td>
+        <td align="center" valign="top" width="14.28%"><a href="https://github.com/blueline1984"><img src="https://avatars.githubusercontent.com/u/97525377?v=4" width="100px;" alt="White"/><br /><sub><b>White</b></sub></a><br /><a href="#content-blueline1984" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+        <td align="center" valign="top" width="14.28%"><a href="https://blog.seokkamoni.me"><img src="https://avatars.githubusercontent.com/u/102217654?v=4" width="100px;" alt="김석진(poki)"/><br /><sub><b>김석진(poki)</b></sub></a><br /><a href="#content-seokkamoni" title="Content">🖋</a></td>
     </tr>
 </tbody>
 </table>

diff --git a/pages/docs/app/api-reference/functions/unstable_cache.mdx b/pages/docs/app/api-reference/functions/unstable_cache.mdx
@@ -51,17 +51,17 @@ const data = unstable_cache(fetchData, keyParts, options)()
 import { unstable_cache } from 'next/cache';
 
 export default async function Page({ params }: { params: { userID: string } }) {
- const getCachedUser = unstable_cache(
-  async () => {
-
-  return { id: params.userID };
+  const getCachedUser = unstable_cache(
+    async () => {
+      return { id: params.userId }
     },
     [params.userID], // 여기서 userID를 keyParts에 추가하여 Next.js가 서로 다른 userID에 대해 별도의 캐시를 만들 수 있도록 합니다.
     {
       tags: ["cached-user-tag"],
       revalidate: 60,
     }
-);
+  );
+
   ...
 }
 ```
@@ -70,17 +70,17 @@ export default async function Page({ params }: { params: { userID: string } }) {
 import { unstable_cache } from 'next/cache';
 
 export default async function Page({ params }) {
- const getCachedUser = unstable_cache(
-  async () => {
-
-  return { id: params.userID };
+  const getCachedUser = unstable_cache(
+    async () => {
+      return { id: params.userId }
     },
     [params.userID], // 여기서 userID를 keyParts에 추가하여 Next.js가 서로 다른 userID에 대해 별도의 캐시를 만들 수 있도록 합니다.
     {
       tags: ["cached-user-tag"],
       revalidate: 60,
     }
-);
+  );
+
   ...
 }
 ```

diff --git a/pages/docs/app/building-your-application/data-fetching/fetching.mdx b/pages/docs/app/building-your-application/data-fetching/fetching.mdx
@@ -179,9 +179,7 @@ import fetcher from '@/utils/fetcher'
 
 export default function PollingComponent {
   // 폴링 간격을 2000 밀리초로 설정
-  const {
-
- data } = useSWR('/api/data', fetcher, { refreshInterval: 2000 });
+  const { data } = useSWR('/api/data', fetcher, { refreshInterval: 2000 });
 
   return '...'
 }

diff --git a/pages/docs/app/building-your-application/rendering/composition-patterns.mdx b/pages/docs/app/building-your-application/rendering/composition-patterns.mdx
@@ -417,9 +417,7 @@ Client와 Server Components를 혼합할 때, UI를 컴포넌트 트리로 시
 이러한 클라이언트 하위 트리 내에서는 여전히 Server Components를 중첩하거나 Server Actions를 호출할 수 있지만, 다음 사항을 염두에 두어야 합니다:
 
 - 요청-응답 라이프사이클 동안 코드가 서버에서 클라이언트로 이동합니다. 클라이언트에서 서버의 데이터나 리소스에 접근해야 하는 경우, **새로운** 요청을 서버로 보내는 것이지, 왔다 갔다 하는 것이 아닙니다.
-- 새로운 요청이 서버로 전송되면, 모든 Server Components가 먼저 렌더링됩니다. 클라이언트 내에서 중첩된 Server Components를 포함합니다. 렌더링된 결과([RSC Payload](/docs/app/building-your-application/rendering/server-components#what-is-the-react-server
-
--component-payload-rsc))에는 Client Components의 위치에 대한 참조가 포함됩니다. 그런 다음, 클라이언트에서 React는 RSC Payload를 사용하여 Server와 Client Components를 단일 트리로 조정합니다.
+- 새로운 요청이 서버로 전송되면, 모든 Server Components가 먼저 렌더링됩니다. 클라이언트 내에서 중첩된 Server Components를 포함합니다. 렌더링된 결과([RSC Payload](/docs/app/building-your-application/rendering/server-components#what-is-the-react-server-component-payload-rsc))에는 Client Components의 위치에 대한 참조가 포함됩니다. 그런 다음, 클라이언트에서 React는 RSC Payload를 사용하여 Server와 Client Components를 단일 트리로 조정합니다.
 
 {/* Diagram */}
 
@@ -560,5 +558,5 @@ export default function Page() {
 
 > **참고**:
 >
-> - 부모 컴포넌트가 다시 렌더링될 때 중첩된 자식 컴포넌트가 다시 렌더링되는 것을 방지하기 위해 "내용을 위로 올리는" 패턴이 사용되었습니다.
+> - 부모 컴포넌트가 다시 렌더링될 때 중첩된 자식 컴포넌트가 다시 렌더링되는 것을 방지하기 위해 "lifting content up" 패턴이 사용되었습니다.
 > - `children` prop에 국한되지 않습니다. JSX를 전달하는 데 어떤 prop이든 사용할 수 있습니다.
diff --git a/pages/docs/app/building-your-application/routing/middleware.mdx b/pages/docs/app/building-your-application/routing/middleware.mdx
@@ -165,7 +165,7 @@ export const config = {
 3. 명명된 매개변수( `:`로 시작)에 수정자를 가질 수 있습니다: `/about/:path*`는 `*`이 *0개 이상*이므로 `/about/a/b/c`와 일치합니다. `?`는 _0개 또는 1개_, `+`는 _1개 이상_
 4. 괄호로 둘러싸인 정규식을 사용할 수 있습니다: `/about/(.*)`는 `/about/:path*`와 동일합니다
 
-자세한 내용은 [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-
+자세한 내용은 [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp)
 
 1. 문서를 참조하세요.
 

diff --git a/pages/docs/app/building-your-application/routing/parallel-routes.mdx b/pages/docs/app/building-your-application/routing/parallel-routes.mdx
@@ -222,10 +222,7 @@ export default function Layout({ children }) {
 Parallel Routes는 [Intercepting Routes](/docs/app/building-your-application/routing/intercepting-routes)와 함께 사용하여 딥 링크를 지원하는 모달을 생성할 수 있습니다. 이를 통해 모달을 구축할 때 일반적으로 발생하는 문제를 해결할 수 있습니다:
 
 - 모달 콘텐츠를 **URL을 통해 공유 가능**하게 만들기.
-- 페이지를 새로 고침할 때 **컨텍스트를 유지**하여 모달을 닫
-
-지 않기.
-
+- 페이지를 새로 고침할 때 **컨텍스트를 유지**하여 모달을 닫지 않기.
 - 이전 탐색 시 **모달 닫기**.
 - 앞으로 탐색 시 **모달 다시 열기**.
 

diff --git a/pages/docs/app/building-your-application/routing/route-handlers.mdx b/pages/docs/app/building-your-application/routing/route-handlers.mdx
@@ -212,9 +212,7 @@ import { headers } from 'next/headers'
 
 export async function GET(request: Request) {
   const headersList = headers()
-  const referer = headersList.get('refer
-
-er')
+  const referer = headersList.get('referer')
 
   return new Response('Hello, Next.js!', {
     status: 200,
@@ -510,9 +508,7 @@ export async function GET(request) {
 
 > **알아두면 좋은 점**:
 >
-> - 여러 Route Handlers에 CORS 헤더를 추가하려면 [Middleware](/docs/app/building-your-application/routing/middleware#cors) 또는 [`
-
-next.config.js` 파일](/docs/app/api-reference/next-config-js/headers#cors)을 사용할 수 있습니다.
+> - 여러 Route Handlers에 CORS 헤더를 추가하려면 [Middleware](/docs/app/building-your-application/routing/middleware#cors) 또는 [`next.config.js` 파일](/docs/app/api-reference/next-config-js/headers#cors)을 사용할 수 있습니다.
 
 > - 또는 [CORS 예제](https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts) 패키지를 참조하세요.
 
@@ -558,7 +554,7 @@ export async function POST(request) {
 
 ### Non-UI Responses
 
-Route Handlers를 사용하여 UI가 아닌 콘텐츠를 반환할 수 있습니다. [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts), [`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [`app icons`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx), [open graph images](/docs/app/api-reference/file-conventions/metadata/opengraph-image) 등은 모두 기본적으로 지원됩니다.
+Route Handlers를 사용하여 UI가 아닌 콘텐츠를 반환할 수 있습니다. [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts), [`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [`app icons`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx), [`open graph images`](/docs/app/api-reference/file-conventions/metadata/opengraph-image) 등은 모두 기본적으로 지원됩니다.
 
 ```ts filename="app/rss.xml/route.ts" switcher
 export async function GET() {

diff --git a/pages/docs/pages/api-reference/functions/use-amp.mdx b/pages/docs/pages/api-reference/functions/use-amp.mdx
@@ -3,31 +3,33 @@ title: useAmp
 description: Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.
 ---
 
+# useAMP
+
 <details>
   <summary>Examples</summary>
 
 - [AMP](https://github.com/vercel/next.js/tree/canary/examples/amp)
 
 </details>
 
-> AMP support is one of our advanced features, you can [read more about AMP here](/docs/pages/building-your-application/configuring/amp).
+> AMP 지원은 고급 기능 중 하나이며, [여기에서 AMP에 대해 더 읽어보실 수 있습니다](/docs/pages/building-your-application/configuring/amp).
 
-To enable AMP, add the following config to your page:
+AMP를 활성화하려면, 다음과 같은 설정을 페이지에 추가하세요:
 
 ```jsx filename="pages/index.js"
 export const config = { amp: true }
 ```
 
-The `amp` config accepts the following values:
+`amp` 설정은 다음의 값을 허용합니다:
 
-- `true` - The page will be AMP-only
-- `'hybrid'` - The page will have two versions, one with AMP and another one with HTML
+- `true` - 페이지가 AMP-only 상태가 됩니다
+- `hybrid` - 페이지에 AMP 버전과 HTML 버전이 모두 존재하게 됩니다
 
-To learn more about the `amp` config, read the sections below.
+`amp` 구성에 대해 더 알아보려면, 아래 섹션을 읽어보세요.
 
 ## AMP First Page
 
-Take a look at the following example:
+다음 예제를 살펴보세요:
 
 ```jsx filename="pages/about.js"
 export const config = { amp: true }
@@ -39,15 +41,15 @@ function About(props) {
 export default About
 ```
 
-The page above is an AMP-only page, which means:
+위의 예시 페이지는 AMP-only 페이지로, 다음을 의미합니다:
 
-- The page has no Next.js or React client-side runtime
-- The page is automatically optimized with [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer), an optimizer that applies the same transformations as AMP caches (improves performance by up to 42%)
-- The page has a user-accessible (optimized) version of the page and a search-engine indexable (unoptimized) version of the page
+- 페이지에 Next.js 또는 React 클라이언트 측 런타임이 없습니다
+- 페이지는 자동으로 [AMP Optimizer](https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer)로 최적화되며, 이 최적화 도구는 AMP 캐시와 동일한 변환을 적용합니다(성능이 최대 42% 향상됨)
+- 페이지는 사용자 접근이 가능한 최적화된 버전과 검색 엔진에 인덱싱 가능한 최적화되지 않은 버전을 갖습니다
 
 ## Hybrid AMP Page
 
-Take a look at the following example:
+다음 예제를 살펴보세요:
 
 ```jsx filename="pages/about.js"
 import { useAmp } from 'next/amp'
@@ -78,9 +80,9 @@ function About(props) {
 export default About
 ```
 
-The page above is a hybrid AMP page, which means:
+위의 예시 페이지는 Hybrid AMP 페이지로, 다음을 의미합니다:
 
-- The page is rendered as traditional HTML (default) and AMP HTML (by adding `?amp=1` to the URL)
-- The AMP version of the page only has valid optimizations applied with AMP Optimizer so that it is indexable by search-engines
+- 페이지는 기존의 HTML(기본값)과 AMP HTML(URL에 `?amp=1` 추가하는 것을 통해)로 렌더링됩니다
+- 페이지의 AMP 버전은 AMP Optimizer로 적용된 유효한 최적화만 적용되어 검색 엔진에 인덱싱됩니다
 
-The page uses `useAmp` to differentiate between modes, it's a [React Hook](https://react.dev/reference/react) that returns `true` if the page is using AMP, and `false` otherwise.
+이 페이지는 `useAmp`를 사용하여 모드를 구분하며, 이 함수(`useAmp`)는 페이지가 AMP를 사용하는 경우 `true`를, 그렇지 않은 경우 `false`를 반환하는 [React Hook](https://react.dev/reference/react)입니다.
diff --git a/pages/docs/pages/building-your-application/Routing.mdx b/pages/docs/pages/building-your-application/Routing.mdx
@@ -3,4 +3,4 @@ title: Routing
 description: Learn the fundamentals of routing for front-end applications with the Pages Router.
 ---
 
-The Pages Router has a file-system based router built on concepts of pages. When a file is added to the `pages` directory it's automatically available as a route. Learn more about routing in the Pages Router:
+Pages Router는 페이지 컨셉을 기반으로 한 파일 시스템 라우터를 가지고 있습니다. `pages` 디렉토리에 파일을 추가하면 자동으로 해당 파일이 경로로 사용될 수 있습니다. Pages Router의 라우팅에 대해 더 알아보세요:
diff --git a/pages/index.mdx b/pages/index.mdx
@@ -610,6 +610,42 @@ Next.js 공식 문서 한글 번역 프로젝트입니다. by [@luciancah](https
           🖋
         </a>
       </td>
+      <td align="center" valign="top" width="14.28%">
+        <a href="https://github.com/blueline1984">
+          <img
+            src="https://avatars.githubusercontent.com/u/97525377?v=4"
+            width="100px;"
+            alt="White"
+          />
+          <br />
+          <sub>
+            <b>White</b>
+          </sub>
+        </a>
+        <br />
+        <a href="#content-blueline1984" title="Content">
+          🖋
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%">
+        <a href="https://blog.seokkamoni.me">
+          <img
+            src="https://avatars.githubusercontent.com/u/102217654?v=4"
+            width="100px;"
+            alt="김석진(poki)"
+          />
+          <br />
+          <sub>
+            <b>김석진(poki)</b>
+          </sub>
+        </a>
+        <br />
+        <a href="#content-seokkamoni" title="Content">
+          🖋
+        </a>
+      </td>
     </tr>
   </tbody>
 </table>