From 547e9554612c57e7ef8dc41736e9770fd7ac0d3d Mon Sep 17 00:00:00 2001 From: Collection50 Date: Sat, 1 Jul 2023 16:16:57 +0900 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20dynamic-routes=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=20=EC=B4=88=EC=95=88=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-routing/02-dynamic-routes.mdx | 59 +++++++++++-------- 1 file changed, 34 insertions(+), 25 deletions(-) diff --git a/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx b/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx index eaab0dfd2..2e2fbc926 100644 --- a/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx +++ b/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx @@ -1,27 +1,27 @@ --- -title: Dynamic Routes -description: Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here. +title: 동적 라우팅 +description: 동적 라우팅은 사용자 정의 매개 변수를 URL에 추가할 수 있는 페이지입니다. 동적 라우팅을 생성하는 것은 여기서 자세히 알아볼 수 있습니다. related: - title: Next Steps - description: For more information on what to do next, we recommend the following sections + title: 다음 단계 + description: 다음에 수행할 작업에 대한 자세한 내용은 다음 섹션을 참조합니다. links: - pages/building-your-application/routing/linking-and-navigating - pages/api-reference/functions/use-router --- -When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or [prerendered](/docs/pages/building-your-application/data-fetching/get-static-paths) at build time. +정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터로 라우팅을 생성하는 경우, 요청 시 입력되거나 빌드 시 [미리 렌더링 되는](#generating-static-params) 되는 동적 세그먼트를 사용할 수 있습니다. -## Convention +## 컨벤션 -A Dynamic Segment can be created by wrapping a folder's name in square brackets: `[folderName]`. For example, `[id]` or `[slug]`. +동적 세그먼트는 폴더 이름을 대괄호로 사용해 만들 수 있습니다: `[폴더 이름]`. 예: `[id]` 또는 `[slug]`. -Dynamic Segments can be access from [`useRouter`](/docs/pages/api-reference/functions/use-router). +동적 세그먼트는 [`useRouter`](/docs/pages/api-reference/functions/use-router)를 통해 사용할 수 있습니다. -## Example +## 예제 -For example, a blog could include the following route `pages/blog/[slug].js` where `[slug]` is the Dynamic Segment for blog posts. +예를 들어 블로그에는 다음과 같은 `pages/blog/[slug].js` 경로가 포함될 수 있습니다. 여기서 `[slug]`는 블로그 게시물의 동적 세그먼트입니다. -```jsx +```tsx filename="pages/blog/[slug].tsx" switcher import { useRouter } from 'next/router' export default function Page() { @@ -30,33 +30,42 @@ export default function Page() { } ``` -| Route | Example URL | `params` | -| ---------------------- | ----------- | --------------- | -| `pages/blog/[slug].js` | `/blog/a` | `{ slug: 'a' }` | -| `pages/blog/[slug].js` | `/blog/b` | `{ slug: 'b' }` | -| `pages/blog/[slug].js` | `/blog/c` | `{ slug: 'c' }` | +```jsx filename="pages/blog/[slug].jsx" switcher +import { useRouter } from 'next/router' + +export default function Page() { + const router = useRouter() + return

Post: {router.query.slug}

+} +``` + +| 경로 | 예시 URL | `params` | +| ---------------------- | --------- | --------------- | +| `pages/blog/[slug].js` | `/blog/a` | `{ slug: 'a' }` | +| `pages/blog/[slug].js` | `/blog/b` | `{ slug: 'b' }` | +| `pages/blog/[slug].js` | `/blog/c` | `{ slug: 'c' }` | -## Catch-all Segments +## 모든 세그먼트 캡처하기 -Dynamic Segments can be extended to **catch-all** subsequent segments by adding an ellipsis inside the brackets `[...folderName]`. +동적 세그먼트는 괄호 안에 줄임표를 추가하여 `[...폴더이름]` 안에 모든 후속 세그먼트를 **포함하도록** 확장할 수 있습니다. -For example, `pages/shop/[...slug].js` will match `/shop/clothes`, but also `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts`, and so on. +예를 들어 `pages/shop/[...slug].js`는 `/shop/clothes` 뿐만 아니라 `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts` 등으로 매치될 수 있습니다. -| Route | Example URL | `params` | +| 경로 | 예시 URL | `params` | | ------------------------- | ------------- | --------------------------- | | `pages/shop/[...slug].js` | `/shop/a` | `{ slug: ['a'] }` | | `pages/shop/[...slug].js` | `/shop/a/b` | `{ slug: ['a', 'b'] }` | | `pages/shop/[...slug].js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` | -## Optional Catch-all Segments +## 선택적으로 모든 세그먼트 캡처하기 -Catch-all Segments can be made **optional** by including the parameter in double square brackets: `[[...folderName]]`. +모든 세그먼트를 캡처하는 것은 이중 대괄호에 매개 변수를 포함하여 **선택적으로**로 생성할 수 있습니다. `[[...folderName]]`를 선택합니다. -For example, `pages/shop/[[...slug]].js` will **also** match `/shop`, in addition to `/shop/clothes`, `/shop/clothes/tops`, `/shop/clothes/tops/t-shirts`. +예를 들어 `pages/shop/[[...slug]].js`는 `/shop/clothes`, `/shop/clothes/tops`, `/shop/clothes/tops/t-shop` 외에 `/shop` **또한** 매치될 수 있습니다. -The difference between **catch-all** and **optional catch-all** segments is that with optional, the route without the parameter is also matched (`/shop` in the example above). +**모든 세그먼트 캡처하기**와 **선택적으로 세그먼트 캡처하기**의 차이점은 선택적 세그먼트 캡처하기의 경우 매개 변수가 없는 경로에도 매치될 수 있다는 점입니다(위 예제의 `/shop`). -| Route | Example URL | `params` | +| 경로 | 예시 URL | `params` | | --------------------------- | ------------- | --------------------------- | | `pages/shop/[[...slug]].js` | `/shop` | `{}` | | `pages/shop/[[...slug]].js` | `/shop/a` | `{ slug: ['a'] }` | From 4fff6ed615175fa86b329e1da28a5e7543138ffc Mon Sep 17 00:00:00 2001 From: Collection50 Date: Thu, 3 Aug 2023 19:27:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=EB=B2=88=EC=97=AD=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-routing/02-dynamic-routes.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx b/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx index 2e2fbc926..0a52b5407 100644 --- a/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx +++ b/docs/03-pages/01-building-your-application/01-routing/02-dynamic-routes.mdx @@ -17,7 +17,7 @@ related: 동적 세그먼트는 [`useRouter`](/docs/pages/api-reference/functions/use-router)를 통해 사용할 수 있습니다. -## 예제 +## 예시 예를 들어 블로그에는 다음과 같은 `pages/blog/[slug].js` 경로가 포함될 수 있습니다. 여기서 `[slug]`는 블로그 게시물의 동적 세그먼트입니다. @@ -45,7 +45,7 @@ export default function Page() { | `pages/blog/[slug].js` | `/blog/b` | `{ slug: 'b' }` | | `pages/blog/[slug].js` | `/blog/c` | `{ slug: 'c' }` | -## 모든 세그먼트 캡처하기 +## 포괄적 세그먼트 동적 세그먼트는 괄호 안에 줄임표를 추가하여 `[...폴더이름]` 안에 모든 후속 세그먼트를 **포함하도록** 확장할 수 있습니다. @@ -59,7 +59,7 @@ export default function Page() { ## 선택적으로 모든 세그먼트 캡처하기 -모든 세그먼트를 캡처하는 것은 이중 대괄호에 매개 변수를 포함하여 **선택적으로**로 생성할 수 있습니다. `[[...folderName]]`를 선택합니다. +모든 세그먼트를 캡처하는 것은 이중 대괄호에 매개 변수를 포함하여`([[...folderName]])` **선택적으로** 생성할 수 있습니다. 예를 들어 `pages/shop/[[...slug]].js`는 `/shop/clothes`, `/shop/clothes/tops`, `/shop/clothes/tops/t-shop` 외에 `/shop` **또한** 매치될 수 있습니다.