From d3d1d891196c63aa3e615f47c6f78ea73af5b6b6 Mon Sep 17 00:00:00 2001 From: Jinhyung Lee Date: Sun, 13 Oct 2024 23:15:47 +0900 Subject: [PATCH] =?UTF-8?q?[no-issue]=20docs:=2010=EC=9B=94=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20(#142)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [#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> --- .all-contributorsrc | 18 ++++++++++ .gitignore | 1 + README.md | 4 +++ .../functions/unstable_cache.mdx | 20 +++++------ .../data-fetching/fetching.mdx | 4 +-- .../rendering/composition-patterns.mdx | 6 ++-- .../routing/middleware.mdx | 2 +- .../routing/parallel-routes.mdx | 5 +-- .../routing/route-handlers.mdx | 10 ++---- .../pages/api-reference/functions/use-amp.mdx | 34 +++++++++--------- .../building-your-application/Routing.mdx | 2 +- pages/index.mdx | 36 +++++++++++++++++++ 12 files changed, 96 insertions(+), 46 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 1c4ec73..f8d2780 100644 --- 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 index 752b9ee..dfe5b13 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .next node_modules .DS_Store +.idea diff --git a/README.md b/README.md index b2cfb89..51bc13c 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,10 @@ HarrySeop
HarrySeop
🖋 정훈
정훈
🖋 SangSeop Hwang
SangSeop Hwang
🖋 + White
White
🖋 + + + 김석진(poki)
김석진(poki)
🖋 diff --git a/pages/docs/app/api-reference/functions/unstable_cache.mdx b/pages/docs/app/api-reference/functions/unstable_cache.mdx index ad0e048..cf262f2 100644 --- 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 index 04dc2f8..023db74 100644 --- 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 index aae9e65..b4cca65 100644 --- 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 index 248a280..e28049e 100644 --- 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 index f66ca0c..b58baf5 100644 --- 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 index 0c00029..4efb1f5 100644 --- 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 index 9b94eb3..7ca897f 100644 --- a/pages/docs/pages/api-reference/functions/use-amp.mdx +++ b/pages/docs/pages/api-reference/functions/use-amp.mdx @@ -3,6 +3,8 @@ title: useAmp description: Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config. --- +# useAMP +
Examples @@ -10,24 +12,24 @@ description: Enable AMP in a page, and control the way Next.js adds AMP to the p
-> 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 index eccc04d..65721b3 100644 --- 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 index 61affc7..084bb6c 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -610,6 +610,42 @@ Next.js 공식 문서 한글 번역 프로젝트입니다. by [@luciancah](https 🖋 + + + White +
+ + White + + +
+ + 🖋 + + + + + + + 김석진(poki) +
+ + 김석진(poki) + + +
+ + 🖋 + +