Skip to content

Commit

Permalink
[#6] docs: 7월 4주차 문서 업데이트 (#39)
Browse files Browse the repository at this point in the history 
* [#13] building-your-application/configuring/babel 문서 번역 (#14)

[#13] docs: babel문서 번역

* [#20] docs: client-side-rendering 번역 (#21)

* [#22] docs: server-side-rendering 번역 (#23)

* docs: add kmsu44 as a contributor for content (#40)

* docs: update README.md [skip ci]

* docs: update .all-contributorsrc [skip ci]

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>

* docs: add 4anghyeon as a contributor for content (#42)

* docs: update README.md [skip ci]

* docs: update .all-contributorsrc [skip ci]

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
Co-authored-by: Jinhyung Lee <[email protected]>

* [no-issue] fix: all-contributor 관련 설정

* [no-issue] fix: seo '한글번역' 쿼리 향상 위한 메타수정

---------

Co-authored-by: MINSU KIM <[email protected]>
Co-authored-by: sanghyeon <[email protected]>
Co-authored-by: Hansol Olivia Kim <[email protected]>
Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
  • Loading branch information
@luciancah @kmsu44
@4anghyeon @hansololiviakim @allcontributors
5 people authored Jul 28, 2024
1 parent 49599b7 commit a2ae6d6
Show file tree
Hide file tree
Showing 11 changed files with 567 additions and 483 deletions.
18 changes: 18 additions & 0 deletions .all-contributorsrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,24 @@
"doc"
]
},
{
"login": "kmsu44",
"name": "MINSU KIM",
"avatar_url": "https://avatars.githubusercontent.com/u/45655623?v=4",
"profile": "https://github.com/kmsu44",
"contributions": [
"content"
]
},
{
"login": "4anghyeon",
"name": "sanghyeon",
"avatar_url": "https://avatars.githubusercontent.com/u/64076628?v=4",
"profile": "https://github.com/4anghyeon",
"contributions": [
"content"
]
},
{
"login": "hansololiviakim",
"name": "Hansol Olivia Kim",
Expand Down
4 changes: 3 additions & 1 deletion .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ node_modules/

origin/
public/
.all-contributorsrc

# 확장자
*.yml
*.yaml
*.yaml
*.md
22 changes: 5 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
## 안녕하세요!

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

- [Next.js 문서](https://nextjs.org/docs)의 전체 한국어 번역을 목표로 합니다.
Expand All @@ -28,23 +30,6 @@

[기여 안내서](https://github.com/luciancah/nextjs-ko/blob/main/CONTRIBUTING.MD)와 등록된 Issue를 확인해 주세요.

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://blog.luciancah.com"><img src="https://avatars.githubusercontent.com/u/8311335?v=4?s=100" width="100px;" alt="Jinhyung Lee"/><br /><sub><b>Jinhyung Lee</b></sub></a><br /><a href="https://github.com/luciancah/nextjs-ko/commits?author=luciancah" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="http://www.hansololiviakim.com"><img src="https://avatars.githubusercontent.com/u/84097192?v=4?s=100" width="100px;" alt="Hansol Olivia Kim"/><br /><sub><b>Hansol Olivia Kim</b></sub></a><br /><a href="#content-hansololiviakim" title="Content">🖋</a></td>
</tr>
</tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Expand All @@ -56,6 +41,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<tbody>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://blog.luciancah.com"><img src="https://avatars.githubusercontent.com/u/8311335?v=4?s=100" width="100px;" alt="Jinhyung Lee"/><br /><sub><b>Jinhyung Lee</b></sub></a><br /><a href="https://github.com/luciancah/nextjs-ko/commits?author=luciancah" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/kmsu44"><img src="https://avatars.githubusercontent.com/u/45655623?v=4?s=100" width="100px;" alt="MINSU KIM"/><br /><sub><b>MINSU KIM</b></sub></a><br /><a href="#content-kmsu44" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/4anghyeon"><img src="https://avatars.githubusercontent.com/u/64076628?v=4?s=100" width="100px;" alt="sanghyeon"/><br /><sub><b>sanghyeon</b></sub></a><br /><a href="#content-4anghyeon" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="http://www.hansololiviakim.com"><img src="https://avatars.githubusercontent.com/u/84097192?v=4?s=100" width="100px;" alt="Hansol Olivia Kim"/><br /><sub><b>Hansol Olivia Kim</b></sub></a><br /><a href="#content-hansololiviakim" title="Content">🖋</a></td>
</tr>
</tbody>
</table>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"description": "nextjs 공식문서 한국어 번역",
"scripts": {
"dev": "next dev",
"build-local": "pnpm run generate-sitemap && next build",
"build": "NODE_ENV=production pnpm run generate-sitemap && next build",
"build:local": "pnpm run generate-sitemap && next build",
"start": "next start",
"lint": "next lint --cache",
"format": "prettier --cache --check .",
Expand Down
2 changes: 1 addition & 1 deletion pages/_meta.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"index": {
"type": "page",
"title": "Next.js 공식문서 한국어 번역",
"title": "Next.js 공식 문서 한글/한국어 번역",
"display": "hidden",
"theme": {
"layout": "article"
Expand Down
26 changes: 12 additions & 14 deletions pages/docs/pages/building-your-application/configuring/babel.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,22 @@ title: Babel
description: Extend the babel preset added by Next.js with your own configs.
---

{/* TODO: 번역이 필요합니다. */}

# Babel

<details>
<summary>Examples</summary>
<summary>예제</summary>

- [Customizing babel configuration](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
- [Babel 구성 설정하기](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)

</details>

Next.js includes the `next/babel` preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.
Next.js는 앱에 `next/babel` 프리셋을 포함하고 있으며, 여기에는 React 애플리케이션과 서버 사이드 코드를 컴파일하는 데 필요한 모든 것이 포함되어 있습니다. 그러나 기본 Babel 구성을 확장하는 것도 가능합니다.

## Adding Presets and Plugins

To start, you only need to define a `.babelrc` file (or `babel.config.js`) in the root directory of your project. If such a file is found, it will be considered as the _source of truth_, and therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
시작하려면 프로젝트의 루트 디렉터리에 `.babelrc` 파일(또는 `babel.config.js`)을 정의하기만 하면 됩니다. 이러한 파일이 발견되면 *진실의 원천*으로 간주되므로 Next.js에 필요한 `next/babel` 프리셋도 정의해야 합니다.

Here's an example `.babelrc` file:
다음은 `.babelrc` 파일의 예입니다:

```json filename=".babelrc"
{
Expand All @@ -29,9 +27,9 @@ Here's an example `.babelrc` file:
}
```

You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts) to learn about the presets included by `next/babel`.
`next/babel`에 포함된 프리셋에 대해 자세히 알아보려면 [이 파일](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts)을 참조하십시오.

To add presets/plugins **without configuring them**, you can do it this way:
구성 없이 프리셋/플러그인을 추가하려면 다음과 같이 할 수 있습니다:

```json filename=".babelrc"
{
Expand All @@ -42,7 +40,7 @@ To add presets/plugins **without configuring them**, you can do it this way:

## Customizing Presets and Plugins

To add presets/plugins **with custom configuration**, do it on the `next/babel` preset like so:
**사용자 정의 구성**을 사용하여 프리셋/플러그인을 추가하려면 다음과 같이 `next/babel` 프리셋에서 수행하십시오:

```json filename=".babelrc"
{
Expand All @@ -61,9 +59,9 @@ To add presets/plugins **with custom configuration**, do it on the `next/babel`
}
```

To learn more about the available options for each config, visit babel's [documentation](https://babeljs.io/docs/) site.
각 구성에 사용할 수 있는 옵션에 대해 자세히 알아보려면 Babel의 [문서](https://babeljs.io/docs/) 사이트를 방문하십시오.

> **Good to know**:
> **알아두면 좋은 점**:
>
> - Next.js uses the [**current** Node.js version](https://github.com/nodejs/release#release-schedule) for server-side compilations.
> - The `modules` option on `"preset-env"` should be kept to `false`, otherwise webpack code splitting is turned off.
> - Next.js는 서버 사이드 컴파일에 [**현재** Node.js 버전](https://github.com/nodejs/release#release-schedule)을 사용합니다.
> - `"preset-env"`의 `modules` 옵션은 `false`로 유지해야 하며, 그렇지 않으면 webpack 코드 분할이 비활성화됩니다.
22 changes: 11 additions & 11 deletions pages/docs/pages/building-your-application/rendering/client-side-rendering.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ related:

# Client-side Rendering (CSR)

In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
React를 사용한 클라이언트 사이드 렌더링 (CSR)에서는 브라우저가 최소한의 HTML 페이지와 페이지에 필요한 자바스크립트를 다운로드 합니다. 그 후 자바스크립트는 DOM을 업데이트하고 페이지를 렌더링하는 데 사용됩니다. 애플리케이션이 처음 로드될 때, 사용자가 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있습니다. 이는 모든 자바스크립트가 다운로드, 파싱 및 실행될 때까지 페이지가 완전하게 렌더링 되지 않기 때문입니다.

After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
페이지가 처음 로드된 후, 같은 웹사이트에서 다른 페이지로 이동할 때는 일반적으로 더 빠릅니다. 필요한 데이터만 가져오면 되고, 자바스크립트가 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있기 때문입니다.

In Next.js, there are two ways you can implement client-side rendering:
Next.js에서는 클라이언트 사이드 렌더링을 구현할 수 있는 두 가지 방법이 있습니다.

1. Using React's `useEffect()` hook inside your pages instead of the server-side rendering methods ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) and [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)).
2. Using a data fetching library like [SWR](https://swr.vercel.app/) or [TanStack Query](https://tanstack.com/query/latest/) to fetch data on the client (recommended).
1. 서버 사이드 렌더링 메서드 ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)와 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) 대신에 페이지 내부에서 리액트의 `useEffect()` 훅을 사용합니다.
2. [SWR](https://swr.vercel.app/)이나 [TanStack Query](https://tanstack.com/query/latest/)와 같은 데이터 페칭 라이브러리를 사용하여 클라이언트에서 데이터를 가져옵니다 (권장됨).

Here's an example of using `useEffect()` inside a Next.js page:
다음은 Next.js 페이지 내부에서 `useEffect()`를 사용하는 예시입니다.

```jsx filename="pages/index.js"
import React, { useState, useEffect } from 'react'
Expand All @@ -42,7 +42,7 @@ export function Page() {
}

fetchData().catch((e) => {
// handle the error as needed
// 필요에 따라 에러 처리
console.error('An error occurred while fetching the data: ', e)
})
}, [])
Expand All @@ -51,9 +51,9 @@ export function Page() {
}
```

In the example above, the component starts by rendering `Loading...`. Then, once the data is fetched, it re-renders and displays the data.
위 예시에서, 컴포넌트는 `Loading...`을 렌더링하며 시작합니다. 그런 다음 데이터가 불러와지면 다시 렌더링하여 데이터를 표시합니다.

Although fetching data in a `useEffect` is a pattern you may see in older React Applications, we recommend using a data-fetching library for better performance, caching, optimistic updates, and more. Here's a minimum example using [SWR](https://swr.vercel.app/) to fetch data on the client:
`useEffect`에서 데이터를 가져오는 것은 이전 React 애플리케이션에서 볼 수 있는 패턴이지만, 더 나은 성능, 캐싱, 낙관적 업데이트 등을 위해 데이터 페칭 라이브러리를 사용하는 것을 권장합니다. 다음은 클라이언트에서 데이터를 가져오기 위해 [SWR](https://swr.vercel.app/)을 사용하는 최소한의 예시입니다:

```jsx filename="pages/index.js"
import useSWR from 'swr'
Expand All @@ -71,6 +71,6 @@ export function Page() {
}
```

> **Good to know**:
> **알아두면 좋은 점**:
>
> Keep in mind that CSR can impact SEO. Some search engine crawlers might not execute JavaScript and therefore only see the initial empty or loading state of your application. It can also lead to performance issues for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page. Next.js promotes a hybrid approach that allows you to use a combination of [server-side rendering](/docs/pages/building-your-application/rendering/server-side-rendering), [static site generation](/docs/pages/building-your-application/rendering/static-site-generation), and client-side rendering, **depending on the needs of each page** in your application. In the App Router, you can also use [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) to show a loading indicator while the page is being rendered.
> 클라이언트 사이드 렌더링은 SEO에 영향을 줄 수 있음을 유념해야 합니다. 일부 검색 엔진 크롤러는 자바스크립트를 실행하지 않을 수 있기 때문에 애플리케이션의 초기 빈 상태 혹은 로딩 상태만 볼 수 있습니다. 또한 인터넷 연결이나 장치 속도가 느린 사용자들에게는 성능 문제를 일으킬 수 있는데, 전체 페이지를 볼 수 있기 전에 모든 자바스크립트가 로드되고 실행될 때까지 기다려야 하기 때문입니다. Next.js는 애플리케이션에서 **각 페이지의 필요에 따라** [서버 사이드 렌더링](/docs/pages/building-your-application/rendering/server-side-rendering), [정적 사이트 생성](/docs/pages/building-your-application/rendering/static-site-generation) 그리고 클라이언트 사이드 렌더링을 조합하여 사용할 수 있는 하이브리드 접근 방식을 권장합니다. App Router에서는 [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming)를 사용하여 페이지가 렌더링 되는 동안 로딩 표시기를 표시할 수도 있습니다.
22 changes: 10 additions & 12 deletions pages/docs/pages/building-your-application/rendering/server-side-rendering.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,32 @@ title: Server-side Rendering (SSR)
description: Use Server-side Rendering to render pages on each request.
---

{/* TODO: 번역이 필요합니다. */}

# Server-side Rendering (SSR)

> Also referred to as "SSR" or "Dynamic Rendering".
> "SSR" 또는 "동적 렌더링"이라고도 불립니다.
If a page uses **Server-side Rendering**, the page HTML is generated on **each request**.
페이지가 **서버 사이드 렌더링**을 사용하는 경우, 페이지 HTML은 **각 요청 시마다** 생성됩니다.

To use Server-side Rendering for a page, you need to `export` an `async` function called `getServerSideProps`. This function will be called by the server on every request.
페이지에 서버 사이드 렌더링을 사용하려면, `getServerSideProps`라는 `async` 함수를 `export` 해야 합니다. 이 함수는 매 요청마다 서버에 의해 호출됩니다.

For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can write `getServerSideProps` which fetches this data and passes it to `Page` like below:
예를 들어, 페이지에서 자주 업데이트되는 데이터(외부에서 가져온 데이터)를 미리 렌더링해야 한다고 가정해봅시다. 이 데이터를 가져와 아래와 같이 `Page`에 전달하는 `getServerSideProps`를 작성할 수 있습니다:

```jsx
export default function Page({ data }) {
// Render data...
// 데이터를 렌더링합니다...
}

// This gets called on every request
// 이 함수는 매 요청마다 호출됩니다.
export async function getServerSideProps() {
// Fetch data from external API
// 외부 API에서 데이터를 가져옵니다.
const res = await fetch(`https://.../data`)
const data = await res.json()

// Pass data to the page via props
// props를 통해 페이지에 데이터를 전달합니다.
return { props: { data } }
}
```

As you can see, `getServerSideProps` is similar to `getStaticProps`, but the difference is that `getServerSideProps` is run on every request instead of on build time.
보시다시피, `getServerSideProps`는 `getStaticProps`와 유사하지만, 차이점은 `getServerSideProps`가 빌드 타임이 아닌 각 요청마다 실행된다는 점입니다.

To learn more about how `getServerSideProps` works, check out our [Data Fetching documentation](/docs/pages/building-your-application/data-fetching/get-server-side-props).
`getServerSideProps`가 어떻게 작동하는지 더 알고 싶다면, [Data Fetching documentation](/docs/pages/building-your-application/data-fetching/get-server-side-props)을 확인하세요.
80 changes: 80 additions & 0 deletions pages/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,83 @@ Next.js 공식문서 한국어 번역 프로젝트입니다. by [@luciancah](htt
### 기여자 목록

🥰 감사합니다 🥰

<br />

<table>
<tbody>
<tr>
<td align="center" valign="top" width="14.28%">
<a href="https://blog.luciancah.com">
<img
src="https://avatars.githubusercontent.com/u/8311335?v=4?s=100"
width="100px;"
alt="Jinhyung Lee"
/>
<br />
<sub>
<b>Jinhyung Lee</b>
</sub>
</a>
<br />
<a
href="https://github.com/luciancah/nextjs-ko/commits?author=luciancah"
title="Documentation"
>
📖
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/kmsu44">
<img
src="https://avatars.githubusercontent.com/u/45655623?v=4?s=100"
width="100px;"
alt="MINSU KIM"
/>
<br />
<sub>
<b>MINSU KIM</b>
</sub>
</a>
<br />
<a href="#content-kmsu44" title="Content">
🖋
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/4anghyeon">
<img
src="https://avatars.githubusercontent.com/u/64076628?v=4?s=100"
width="100px;"
alt="sanghyeon"
/>
<br />
<sub>
<b>sanghyeon</b>
</sub>
</a>
<br />
<a href="#content-4anghyeon" title="Content">
🖋
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="http://www.hansololiviakim.com">
<img
src="https://avatars.githubusercontent.com/u/84097192?v=4?s=100"
width="100px;"
alt="Hansol Olivia Kim"
/>
<br />
<sub>
<b>Hansol Olivia Kim</b>
</sub>
</a>
<br />
<a href="#content-hansololiviakim" title="Content">
🖋
</a>
</td>
</tr>
</tbody>
</table>
Loading

0 comments on commit a2ae6d6

Please sign in to comment.