📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 #255

jvn4dev · 2023-06-25T10:26:46Z

기여자용

문서 개선

PR을 열기 전에 pnpm prettier-fix를 실행하여 서식 문제를 해결합니다. - 문서 기여 가이드를 읽고 문서 지침을 따르는지 확인하세요: https://github.com/Nextjs-kr/Nextjs.ko/blob/main/packages/next/README.md

Progress

pnpm prettier-fix
번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

HA-SEUNG-JEONG

긴 글 번역하느라 고생하셨습니다!

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

jvn4dev · 2023-06-26T14:34:10Z

남겨주신 코드리뷰 사항 관련해서 추가적으로 놓친 부분들에도 우선 리뷰사항 적용하였습니다.

haileyport

수고하셨습니다! 리뷰 반영 부탁드립니다.
원문이 길어서 리뷰도 길어졌는데 양해 부탁 드립니다.

혹시 pnpm run prettier-fix를 실행하셨나요? 본문 중에 한 문장 사이에 엔터가 들어간 부분이 꽤 많아서, 수정 후 pnpm run prettier-fix 실행 부탁드립니다. 🙏

haileyport · 2023-06-28T13:02:19Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

-nav_title: App Router Migration
-description: Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
+title: App Router 점진적 적용 가이드
+nav_title: App Router 마이그레이션


App Router는 번역이 되어야 할 것 같습니다.
먼저 작업해주신 메인테이너 분께서 번역해두신 부분을 참조했습니다!

참고1
참고2

haileyport · 2023-06-28T13:02:37Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

-description: Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.
+title: App Router 점진적 적용 가이드
+nav_title: App Router 마이그레이션
+description: Next.js 어플리케이션을 Pages Router에서 App Router로 업그레이드하는 방법을 배웁니다.


페이지 라우터 또한 상기 동일합니다! :)

haileyport · 2023-06-28T13:03:06Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

 ---

-This guide will help you:
+이 가이드는 당신을 도와줄 것입니다.

 - [Update your Next.js application from version 12 to version 13](#nextjs-version)
 - [Upgrade features that work in both the `pages` and the `app` directories](#upgrading-new-features)
 - [Incrementally migrate your existing application from `pages` to `app`](#migrating-from-pages-to-app)


링크된 문서의 대괄호 안쪽(문서 제목)도 번역 부탁드립니다 :)

haileyport · 2023-06-28T13:03:43Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx


-The minimum Node.js version is now **v16.8**. See the [Node.js documentation](https://nodejs.org/docs/latest-v16.x/api/) for more information.
+현재 최소 Node.js 버전은 **v16.8**입니다. 자세한 내용은 [Node.js 설명서](https://nodejs.org/docs/latest-v16.x/api/) 를 참조하세요.


설명서 보단 문서가 적합하다고 생각되는데 어떠실까요?

haileyport · 2023-06-28T13:04:57Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx


 ```bash filename="Terminal"
 npm install -D eslint-config-next@latest
 ```

-> **Good to know**: You may need to restart the ESLint server in VS Code for the ESLint changes to take effect. Open the Command Palette (`cmd+shift+p` on Mac; `ctrl+shift+p` on Windows) and search for `ESLint: Restart ESLint Server`.
+> **참고**: ESLint 변경 사항을 적용하려면 VS Code에서 ESLint 서버를 다시 시작해야 할 수 있습니다. 명령 팔레트(Mac의 경우 'cmd+shift+p', Windows의 경우 'ctrl+shift+p')를 열고 'ESLint: ESLint 서버 다시 시작'을 검색합니다.


cmd+shift+p 와 ctrl+shift+p, ESLint: Restart ESLint Server 는 백틱으로 감싸주세요!

haileyport · 2023-06-29T02:09:39Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx


-### Step 6: Migrating Data Fetching Methods
+### 6단계: 데이터 가져오기 방법 마이그레이션


데이터 가져오기 > Data fetching

haileyport · 2023-06-29T02:09:44Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx


-The `pages` directory uses `getServerSideProps` and `getStaticProps` to fetch data for pages. Inside the `app` directory, these previous data fetching functions are replaced with a [simpler API](/docs/app/building-your-application/data-fetching) built on top of `fetch()` and `async` React Server Components.
+`pages` 디렉토리
+는 `getServerSideProps`와 `getStaticProps`를 사용하여 페이지 데이터를 가져옵니다. `app` 디렉토리 내에서 이러한 이전의 데이터 가져오기 기능은 `fetch()` 및 `async` React Server Components 위에 구축된 [간단한 API](/docs/app/building-your-application/data-fetching)로 대체됩니다.


데이터 가져오기 > Data fetching

haileyport · 2023-06-29T02:10:28Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

@@ -634,16 +682,15 @@ async function getData() {
 }

 export default async function Page() {
-  // You can use `cookies()` or `headers()` inside Server Components
-  // directly or in your data fetching function
+  // 서버 컴포넌트 내 직접 또는 데이터 가져오기 기능에서 `cookies()` 또는 `header()`를 사용할 수 있습니다.


데이터 가져오기 > data fetching

haileyport · 2023-06-29T02:10:35Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

@@ -653,20 +700,19 @@ async function getData() {
 }

 export default async function Page() {
-  // You can use `cookies()` or `headers()` inside Server Components
-  // directly or in your data fetching function
+  // 서버 컴포넌트 내 직접 또는 데이터 가져오기 기능에서 `cookies()` 또는 `header()`를 사용할 수 있습니다.


데이터 가져오기 > data fetching

haileyport · 2023-06-29T02:10:43Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

@@ -867,11 +914,12 @@ export async function GET(request: Request) {}
 export async function GET(request) {}
 ```

-> **Good to know**: If you previously used API routes to call an external API from the client, you can now use [Server Components](/docs/getting-started/react-essentials#server-components) instead to securely fetch data. Learn more about [data fetching](/docs/app/building-your-application/data-fetching/fetching).
+> **참고**: 이전에 API 경로를 사용하여 클라이언트에서 외부 API를 호출했다면 이제 [서버 컴포넌트](/docs/getting-started/react-essentials#server-components)를 사용하여 데이터를 안전하게 가져올 수 있습니다. [데이터 가져오기](/docs/app/building-your-application/data-fetching/fetching)에 대해 자세히 알아보십시오.


데이터 가져오기 > data fetching

haileyport · 2023-06-29T02:15:45Z

ref #91

jvn4dev · 2023-06-29T14:02:30Z

@haileyport 리뷰 감사합니다! 추가적용하여 푸시해두었습니다!

jvn4dev · 2023-07-01T14:07:49Z

@haileyport 제가 숨겨진 리뷰들을 나중에 발견해서 전부 추가로 적용해두었습니다! 본문이 정말 길었는데 꼼꼼하게 봐주셔서 너무 감사합니다~😃

haileyport

긴 글 수정하느라 고생하셨습니다 👍 몇 가지만 고쳐주시면 감사하겠습니다!! 🥰

haileyport · 2023-07-03T02:01:22Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

- [Migrate from the `pages` to `app` directory](#migrating-from-pages-to-app): A step-by-step guide to help you incrementally migrate from the `pages` to the `app` directory.
+- [새로운 기능 업그레이드](#upgrading-new-features): 향상된 이미지 및 링크 컴포넌트
+  와 같은 새로운 기능으로 업그레이드하는 데 도움이 되는 안내서입니다.
+- ['pages'에서 'app' 디렉토리로 마이그레이션](#migrating-from-pages-to-app): `pages`에서 `app` 디렉토리


링크 제목 내의 pages와 app을 백틱으로 감싸주세요!

haileyport · 2023-07-03T02:01:25Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

- [Update your Next.js application from version 12 to version 13](#nextjs-version)
- [Upgrade features that work in both the `pages` and the `app` directories](#upgrading-new-features)
- [Incrementally migrate your existing application from `pages` to `app`](#migrating-from-pages-to-app)
+- [당신의 Next.js 어플리케이션을 12 버전에서 13 버전으로 업데이트하세요.](#nextjs-version)


모범사례에 따라 '당신의', '당신을' 같은 표현은 빠져도 괜찮을 거 같습니다!

haileyport · 2023-07-03T02:02:23Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx

- [Upgrade features that work in both the `pages` and the `app` directories](#upgrading-new-features)
- [Incrementally migrate your existing application from `pages` to `app`](#migrating-from-pages-to-app)
+- [당신의 Next.js 어플리케이션을 12 버전에서 13 버전으로 업데이트하세요.](#nextjs-version)
+- [페이지 디렉토리와 앱 디렉토리 모두에서 작동하는 기능을 업그레이드하기](#upgrading-new-features)


페이지 디렉토리와 앱 디렉토리를 아래에 번역하신 것 처럼 pages 디렉토리와 app 디렉토리 로 통일 부탁드립니다! (백틱 유의)

haileyport · 2023-07-03T02:03:26Z

docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx


-The [`<Link>` Component](/docs/app/building-your-application/routing/linking-and-navigating#link-component) no longer requires manually adding an `<a>` tag as a child. This behavior was added as an experimental option in [version 12.2](https://nextjs.org/blog/next-12-2) and is now the default. In Next.js 13, `<Link>` always renders `<a>` and allows you to forward props to the underlying tag.
+[`<Link>` 컴포넌트](/docs/app/building-your-application/routing/link-and-navigation#link-component)는 더 이상 수동으로 `<a>` 태그를 자식으로 추가할 필요가 없습니다. 이 동작은 [버전 12.2](https://nextjs.org/blog/next-12-2)에서 실험 옵션으로 추가되었으며 현재 기본값입니다. Next.js 13에서 `<Link>`는 항상 `<a>`를 렌더링하고 기본 태그로 소품을 전달할 수 있습니다.


/docs/app/building-your-application/routing/linking-and-navigating#link-component 가 올바른 주소입니다 :)

jvn4dev · 2023-07-08T14:37:25Z

@haileyport 추가 리뷰 사항 확인 및 prettier-fix 까지 완료하였습니다! 감사합니다.

haileyport

LGTM👍
긴 내용 정말 고생 많으셨습니다 🥹 추가적으로 더 번역하고 싶은 부분이 있으시다면 이슈에 댓글 남겨주세요!

📝 02-app-router-migration.mdx 번역 완료

3b6c31a

jvn4dev requested a review from ChanghyeonYoon as a code owner June 25, 2023 10:26

jvn4dev changed the title ~~📝 02-app-router-migration.mdx 번역 초안 작성~~ 📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 Jun 25, 2023

HA-SEUNG-JEONG reviewed Jun 25, 2023

View reviewed changes

jvn4dev added 2 commits June 26, 2023 23:26

👌 코드리뷰 사항 수정

593bc40

👌 코드리뷰 사항 추가 적용

1baaa24

ChanghyeonYoon added the documentation 문서 작업 label Jun 27, 2023

haileyport requested review from haileyport and removed request for ChanghyeonYoon June 28, 2023 12:59

haileyport assigned jvn4dev Jun 28, 2023

haileyport mentioned this pull request Jun 28, 2023

🚀New Next.js Docs Translation Progress (Korean) #1

Open

haileyport reviewed Jun 29, 2023

View reviewed changes

ChanghyeonYoon added the In Review label Jun 29, 2023

👌 코드리뷰 추가 적용

8fb5f32

👌 코드리뷰 2차 추가 적용

dd50986

haileyport reviewed Jul 3, 2023

View reviewed changes

jvn4dev and others added 3 commits July 8, 2023 23:30

코드리뷰 3차 추가 적용

8d10c16

pnpm run prettier-fix 실행

a6e1a62

Merge branch 'main' into translation

fe06cae

haileyport approved these changes Jul 10, 2023

View reviewed changes

haileyport merged commit e83b70e into Nextjs-kr:main Jul 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 #255

📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 #255

jvn4dev commented Jun 25, 2023 •

edited

Loading

HA-SEUNG-JEONG left a comment

jvn4dev commented Jun 26, 2023

haileyport left a comment

haileyport Jun 28, 2023

haileyport Jun 28, 2023

haileyport Jun 28, 2023

haileyport Jun 28, 2023

haileyport Jun 28, 2023

haileyport Jun 29, 2023

haileyport Jun 29, 2023

haileyport Jun 29, 2023

haileyport Jun 29, 2023

haileyport Jun 29, 2023

haileyport commented Jun 29, 2023

jvn4dev commented Jun 29, 2023

jvn4dev commented Jul 1, 2023

haileyport left a comment

haileyport Jul 3, 2023

haileyport Jul 3, 2023

haileyport Jul 3, 2023

haileyport Jul 3, 2023

jvn4dev commented Jul 8, 2023

haileyport left a comment


		The minimum Node.js version is now v16.8. See the [Node.js documentation](https://nodejs.org/docs/latest-v16.x/api/) for more information.
		현재 최소 Node.js 버전은 v16.8입니다. 자세한 내용은 [Node.js 설명서](https://nodejs.org/docs/latest-v16.x/api/) 를 참조하세요.


		### Step 6: Migrating Data Fetching Methods
		### 6단계: 데이터 가져오기 방법 마이그레이션


		The [`<Link>` Component](/docs/app/building-your-application/routing/linking-and-navigating#link-component) no longer requires manually adding an `<a>` tag as a child. This behavior was added as an experimental option in [version 12.2](https://nextjs.org/blog/next-12-2) and is now the default. In Next.js 13, `<Link>` always renders `<a>` and allows you to forward props to the underlying tag.
		[`<Link>` 컴포넌트](/docs/app/building-your-application/routing/link-and-navigation#link-component)는 더 이상 수동으로 `<a>` 태그를 자식으로 추가할 필요가 없습니다. 이 동작은 [버전 12.2](https://nextjs.org/blog/next-12-2)에서 실험 옵션으로 추가되었으며 현재 기본값입니다. Next.js 13에서 `<Link>`는 항상 `<a>`를 렌더링하고 기본 태그로 소품을 전달할 수 있습니다.

📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 #255

📝 02-app > 01-building-your-application > 08-upgrading > 02-app-router-migration.mdx 번역 #255

Conversation

jvn4dev commented Jun 25, 2023 • edited Loading

기여자용

문서 개선

Progress

HA-SEUNG-JEONG left a comment

Choose a reason for hiding this comment

jvn4dev commented Jun 26, 2023

haileyport left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haileyport commented Jun 29, 2023

jvn4dev commented Jun 29, 2023

jvn4dev commented Jul 1, 2023

haileyport left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jvn4dev commented Jul 8, 2023

haileyport left a comment

Choose a reason for hiding this comment

jvn4dev commented Jun 25, 2023 •

edited

Loading