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) + +
+
+ + ๐Ÿ–‹ + +