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.

Sign up for GitHub

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

Jump to bottom

docs: 03-pages > 02-api-reference > 03-next-config-js > env.mdx (수정) #418

Merged
merged 4 commits into from
Jul 24, 2023
Merged

docs: 03-pages > 02-api-reference > 03-next-config-js > env.mdx (수정) #418

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
422d490
docs: env.mdx 번역
ssseok Jul 11, 2023
070f4bc
docs: env.mdx 수정
ssseok Jul 15, 2023
4203ce0
docs: env.mdx 2차 수정
ssseok Jul 16, 2023
3b487de
Merge branch 'main' into docs/env
chaejunlee Jul 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,28 +81,28 @@ Next.js는 기본 설정에 이미 번들로 제공되는 ESLint 플러그인 [`

<Check size={18} /> 권장 설정에서 사용

| | Rule | Description |
| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| <Check size={18} /> | [@next/next/google-font-display](/docs/messages/google-font-display) | Google 폰트로 표시 동작을 적용합니다. |
| <Check size={18} /> | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect) | Google 폰트에 `preconnect`이 사용되었는지 확인합니다. |
| <Check size={18} /> | [@next/next/inline-script-id](/docs/messages/inline-script-id) | 인라인 콘텐츠가 있는 `next/script` 컴포넌트에 `id` 속성을 적용합니다. |
| <Check size={18} /> | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga) | Google 애널리틱스에 인라인 스크립트를 사용할 때 `next/script` 설정 요소를 선호합니다. |
| <Check size={18} /> | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable) | `module` 변수에 대한 할당을 방지합니다. |
| <Check size={18} /> | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | `next/script`의 `beforeInteractive` 전략이 `pages/_document.js` 외부에서 사용되지 않도록 합니다. |
| | Rule | Description |
| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| <Check size={18} /> | [@next/next/google-font-display](/docs/messages/google-font-display) | Google 폰트로 표시 동작을 적용합니다. |
| <Check size={18} /> | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect) | Google 폰트에 `preconnect`이 사용되었는지 확인합니다. |
| <Check size={18} /> | [@next/next/inline-script-id](/docs/messages/inline-script-id) | 인라인 콘텐츠가 있는 `next/script` 컴포넌트에 `id` 속성을 적용합니다. |
| <Check size={18} /> | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga) | Google 애널리틱스에 인라인 스크립트를 사용할 때 `next/script` 설정 요소를 선호합니다. |
| <Check size={18} /> | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable) | `module` 변수에 대한 할당을 방지합니다. |
| <Check size={18} /> | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | `next/script`의 `beforeInteractive` 전략이 `pages/_document.js` 외부에서 사용되지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-css-tags](/docs/messages/no-css-tags) | 수동 스타일시트 태그를 방지합니다. |
| <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page) | `pages/_document.js` 외부에서 `next/document` 가져오기를 방지합니다. |
| <Check size={18} /> | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head) | `pages/_document.js`에서 `<Head>`의 중복 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-head-element](/docs/messages/no-head-element) | `<head>` 요소의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document) | `pages/_document.js`에서 `next/head`의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages) | 내부 Next.js 페이지로 이동하는 데 `<a>` 요소를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-img-element](/docs/messages/no-img-element) | LCP가 느려지고 대역폭이 높아지므로 `<img>` 요소의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font) | 페이지 전용 사용자 정의 글꼴을 방지합니다. |
| <Check size={18} /> | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head) | `next/head` 컴포넌트에서 `next/script`를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document) | `pages/_document.js`에서 `styled-jsx`를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts) | 동기 스크립트를 방지합니다. |
| <Check size={18} /> | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head) | `next/document`에서 `Head` 컴포넌트와 함께 `<title>`을 사용하지 못하도록 합니다. |
| <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page) | `pages/_document.js` 외부에서 `next/document` 가져오기를 방지합니다. |
| <Check size={18} /> | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head) | `pages/_document.js`에서 `<Head>`의 중복 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-head-element](/docs/messages/no-head-element) | `<head>` 요소의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document) | `pages/_document.js`에서 `next/head`의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages) | 내부 Next.js 페이지로 이동하는 데 `<a>` 요소를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-img-element](/docs/messages/no-img-element) | LCP가 느려지고 대역폭이 높아지므로 `<img>` 요소의 사용을 방지합니다. |
| <Check size={18} /> | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font) | 페이지 전용 사용자 정의 글꼴을 방지합니다. |
| <Check size={18} /> | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head) | `next/head` 컴포넌트에서 `next/script`를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document) | `pages/_document.js`에서 `styled-jsx`를 사용하지 않도록 합니다. |
| <Check size={18} /> | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts) | 동기 스크립트를 방지합니다. |
| <Check size={18} /> | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head) | `next/document`에서 `Head` 컴포넌트와 함께 `<title>`을 사용하지 못하도록 합니다. |
| <Check size={18} /> | @next/next/no-typos | [Next.js의 data fetching](/docs/pages/building-your-application/data-fetching)에서 흔히 발생하는 오타를 방지합니다. |
| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio) | Polyfill.io에서 중복된 폴리필을 방지합니다. |
| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio) | Polyfill.io에서 중복된 폴리필을 방지합니다. |

애플리케이션에 이미 ESLint가 설정되어 있는 경우, 몇 가지 조건이 충족되지 않는 한 `eslint-config-next`를 포함하지 말고 이 플러그인에서 직접 확장하는 것이 좋습니다. 자세한 내용은 [권장 플러그인 규칙 집합](/docs/pages/building-your-application/configuring/eslint#recommended-plugin-ruleset)을 참조하세요.

Expand Down
57 changes: 29 additions & 28 deletions docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ Next.js 13으로 업그레이드하고 꼭 새로운 [앱 라우터](/docs/app/b

### `<Image/>` 컴포넌트


Next.js 12에서는 `next/future/image`를 임시적으로 import 하여 이미지 컴포넌트에 새로운 개선사항을 도입했습니다. 새로운 개선사항에는 클라이언트 사이드의 자바스크립트 감소, 더 쉬운 이미지 확장 및 스타일 지정 방법, 접근성 향상 그리고 네이티브 브라우저 지연 로딩 등이 포함됩니다.

버전 13에서는 이제 해당 새로운 기능이 `next/image`의 기본 값이 됩니다.
Expand Down Expand Up @@ -254,11 +253,11 @@ export default function Page() {
```jsx filename="app/dashboard/layout.js"
import DashboardLayout from './DashboardLayout'

// 서버 컴포넌트
export default function Layout({ children }) {
return <DashboardLayout>{children}</DashboardLayout>
}
```
// 서버 컴포넌트
export default function Layout({ children }) {
return <DashboardLayout>{children}</DashboardLayout>
}
```

- `DashboardLayout.js` (클라이언트 컴포넌트)의 상호작용하지 않는 부분을 `layout.js` (서버 컴포넌트)로 점진적으로 전환하여 클라이언트에 전송하는 컴포넌트 자바스크립트의 양을 줄일 수 있습니다.

Expand Down Expand Up @@ -391,36 +390,38 @@ export default function HomePage({ recentPosts }) {
```tsx filename="app/page.tsx" switcher
// 클라이언트 컴포넌트 가져오기
import HomePage from './home-page'
```

async function getPosts() {
const res = await fetch('https://...')
const posts = await res.json()
return posts
const res = await fetch('https://...')
const posts = await res.json()
return posts
}

export default async function Page() {
// 서버 컴포넌트에서 직접 데이터 가져오기
const recentPosts = await getPosts()
// 가져온 데이터를 클라이언트 컴포넌트에 전달하기
return <HomePage recentPosts={recentPosts} />
}
```
export default async function Page() {
// 서버 컴포넌트에서 직접 데이터 가져오기
const recentPosts = await getPosts()
// 가져온 데이터를 클라이언트 컴포넌트에 전달하기
return <HomePage recentPosts={recentPosts} />
}

```jsx filename="app/page.js" switcher
// 클라이언트 컴포넌트 가져오기
import HomePage from './home-page'
````

```jsx filename="app/page.js" switcher
// 클라이언트 컴포넌트 가져오기
import HomePage from './home-page'

export default async function Page() {
// 서버 컴포넌트에서 직접 데이터 가져오기
const recentPosts = await getPosts()
// 가져온 데이터를 클라이언트 컴포넌트에 전달하기
return <HomePage recentPosts={recentPosts} />
}
```
```jsx filename="app/page.js" switcher
// 클라이언트 컴포넌트 가져오기
import HomePage from './home-page'

export default async function Page() {
// 서버 컴포넌트에서 직접 데이터 가져오기
const recentPosts = await getPosts()
// 가져온 데이터를 클라이언트 컴포넌트에 전달하기
return <HomePage recentPosts={recentPosts} />
}
````

- 이전에 페이지에서 `useRouter`를 사용했다면 새로운 라우팅 훅으로 업데이트해야 합니다. [자세히 알아보기](/docs/app/api-reference/functions/use-router).
- 개발 서버를 실행하고 [`http://localhost:3000`](http://localhost:3000)에 방문합니다. 이제 app 디렉토리를 통해 제공되는 기존 인덱스 경로를 확인할 수 있습니다.
Expand Down Expand Up @@ -493,7 +494,7 @@ export default async function Page() {

// 해당 요청은 10초의 유지 시간을 가지며 캐싱 되어야 합니다.
// `revalidate` 옵션을 사용한 `getStaticProps`와 유사하게 동작합니다.

const revalidatedData = await fetch(`https://...`, {
next: { revalidate: 10 },
})
Expand Down Expand Up @@ -916,4 +917,4 @@ export default function RootLayout({ children }) {

## 코드 모드

Next.js는 더 이상 사용되지 않는 코드베이스를 업그레이드하는 데 도움이 되는 코드 모드 변환을 제공합니다. 자세한 사항은 [코드 모드](/docs/app/building-your-application/upgrading/codemods)를 참조하세요.
Next.js는 더 이상 사용되지 않는 코드베이스를 업그레이드하는 데 도움이 되는 코드 모드 변환을 제공합니다. 자세한 사항은 [코드 모드](/docs/app/building-your-application/upgrading/codemods)를 참조하세요.
Loading