Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Oct 13, 2024
18 changes: 18 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.next
node_modules
.DS_Store
.idea
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions pages/docs/app/api-reference/functions/unstable_cache.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
);
);

...
}
```
Expand All @@ -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,
}
);
);

...
}
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 '...'
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}

Expand Down Expand Up @@ -560,5 +558,5 @@ export default function Page() {

> **참고**:
>
> - 부모 컴포넌트가 다시 렌더링될 때 중첩된 자식 컴포넌트가 다시 렌더링되는 것을 방지하기 위해 "내용을 위로 올리는" 패턴이 사용되었습니다.
> - 부모 컴포넌트가 다시 렌더링될 때 중첩된 자식 컴포넌트가 다시 렌더링되는 것을 방지하기 위해 "lifting content up" 패턴이 사용되었습니다.
> - `children` prop에 국한되지 않습니다. JSX를 전달하는 데 어떤 prop이든 사용할 수 있습니다.
Original file line number Diff line number Diff line change
Expand Up @@ -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. 문서를 참조하세요.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -222,10 +222,7 @@ export default function Layout({ children }) {
Parallel Routes는 [Intercepting Routes](/docs/app/building-your-application/routing/intercepting-routes)와 함께 사용하여 딥 링크를 지원하는 모달을 생성할 수 있습니다. 이를 통해 모달을 구축할 때 일반적으로 발생하는 문제를 해결할 수 있습니다:

- 모달 콘텐츠를 **URL을 통해 공유 가능**하게 만들기.
- 페이지를 새로 고침할 때 **컨텍스트를 유지**하여 모달을 닫

지 않기.

- 페이지를 새로 고침할 때 **컨텍스트를 유지**하여 모달을 닫지 않기.
- 이전 탐색 시 **모달 닫기**.
- 앞으로 탐색 시 **모달 다시 열기**.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) 패키지를 참조하세요.

Expand Down Expand Up @@ -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() {
Expand Down
34 changes: 18 additions & 16 deletions pages/docs/pages/api-reference/functions/use-amp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand All @@ -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'
Expand Down Expand Up @@ -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)입니다.
2 changes: 1 addition & 1 deletion pages/docs/pages/building-your-application/Routing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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의 라우팅에 대해 더 알아보세요:
36 changes: 36 additions & 0 deletions pages/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>