From bb5a7d3dd3e5d6d64db0c2ec7dafa7da8978b188 Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-J22D89D>
Date: Sun, 16 Jul 2023 04:45:49 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B2=88=EC=97=AD=20=EC=B4=88?=
 =?UTF-8?q?=EC=95=88=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03-data-fetching/01-fetching.mdx          | 167 +++++++++---------
 1 file changed, 86 insertions(+), 81 deletions(-)

diff --git a/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
index aa282804f..c9d548271 100644
--- a/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
+++ b/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
@@ -1,28 +1,28 @@
 ---
-title: Data Fetching
+title: 데이터 Fetching
 nav_title: Fetching
-description: Learn how to fetch data in your Next.js application.
+description: Next.js 어플리케이션에서 데이터 fetch 하는 방법 배우기
 ---
 
-The Next.js App Router allows you to fetch data directly in your React components by marking the function as `async` and using `await` for the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+Next.js App Router를 사용하면 React 컴포넌트들 안에서 함수에 `async`를 표시하고 `await`를 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)에 사용하여 직접 데이터 fetch를 할 수 있습니다.
 
-Data fetching is built on top of the [`fetch()` Web API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and React Server Components. When using `fetch()`, requests are [automatically deduped](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) by default.
+데이터 fetching은 [`fetch()` Web API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)와 React 서버 컴포넌트들을 기반으로 작동됩니다. `fetch()`를 사용했을 때, 기본적으로 요청들은 [자동으로 중복이 제거됩니다](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping)
 
-Next.js extends the `fetch` options object to allow each request to set its own [caching and revalidating](/docs/app/building-your-application/data-fetching/caching).
+Next.js은 `fetch`에 객체 옵션들을 추가했습니다. 이 객체 옵션들은 각 요청들의 [캐싱과 revalidate](/docs/app/building-your-application/data-fetching/caching) 기능들을 갖습니다.
 
-## `async` and `await` in Server Components
+## 서버 컴포넌트들에서 `async` 와 `await`
 
-You can use `async` and `await` to fetch data in Server Components.
+서버 컴포넌트들에서 데이터를 fetch하면서 `async` and `await`를 사용할 수 있습니다.
 
 ```tsx filename="app/page.tsx" switcher
 async function getData() {
   const res = await fetch('https://api.example.com/...')
-  // The return value is *not* serialized
-  // You can return Date, Map, Set, etc.
+  // 이 return 값은 *직렬화 되지 않습니다.*
+  // Date, Map, Set 등을 return 할 수 있습니다.
 
-  // Recommendation: handle errors
+  // 추천: handle errors
   if (!res.ok) {
-    // This will activate the closest `error.js` Error Boundary
+    // res와 가장 밀접한 `error.js` Error Boundary를 활성화시킵니다.
     throw new Error('Failed to fetch data')
   }
 
@@ -39,12 +39,12 @@ export default async function Page() {
 ```jsx filename="app/page.js" switcher
 async function getData() {
   const res = await fetch('https://api.example.com/...')
-  // The return value is *not* serialized
-  // You can return Date, Map, Set, etc.
+  // 이 return 값은 *직렬화 되지 않습니다.*
+  // Date, Map, Set 등을 return 할 수 있습니다.
 
-  // Recommendation: handle errors
+  // 추천: handle errors
   if (!res.ok) {
-    // This will activate the closest `error.js` Error Boundary
+    // res와 가장 밀접한 `error.js` Error Boundary를 활성화시킵니다.
     throw new Error('Failed to fetch data')
   }
 
@@ -58,60 +58,62 @@ export default async function Page() {
 }
 ```
 
-> **Good to know**:
+> **알면 좋은 것**:
 >
-> To use an `async` Server Component with TypeScript, ensure you are using TypeScript `5.1.3` or higher and `@types/react` `18.2.8` or higher.
+> TypeScript와 함께 서버 컴포넌트에서 `async` 사용하려면, TypeScript `5.1.3` 또는 이 이상 버전과 `@types/react` `18.2.8` 또는 이 이상의 버전을 사용하고 있는지 확인하세요.
 
-### Server Component Functions
+### 서버 컴포넌트 함수들
 
-Next.js provides helpful server functions you may need when fetching data in Server Components:
+Next.js는 서버 컴포넌트들에서 데이터 fetching할 때, 필요할지 모르는 아주 도움 되는 서버 함수들을 제공합니다.
 
 - [`cookies()`](/docs/app/api-reference/functions/cookies)
 - [`headers()`](/docs/app/api-reference/functions/headers)
 
-## `use` in Client Components
+## 클라이언트 컴포넌트들에서 `use`
 
-`use` is a new React function that **accepts a promise** conceptually similar to `await`. `use` **handles the promise** returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about `use` in the [React RFC](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#usepromise).
+`use` 는 개념적으로 `await`와 유사한 **promise를 처리할 수 있는** 새로운 React 함수입니다. `use`는 components, hooks 와 Suspense와 호환되는 방식으로 함수를 통해 반환되는 **promise를 다룹니다.**. [React RFC](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md#usepromise)에서 `use`에 대해 더 배울 수 있습니다.
 
-Wrapping `fetch` in `use` is currently **not** recommended in Client Components and may trigger multiple re-renders. For now, if you need to fetch data in a Client Component, we recommend using a third-party library such as [SWR](https://swr.vercel.app/) or [React Query](https://tanstack.com/query/v4).
+클라이언트 컴포넌트들에서 `use`에서 `fetch`를 감싸는 것은 현재 **추천하지 않습니다.** 이것은 재렌더링을 여러번 야기시킬지도 모릅니다. 현재, 클라이언트 컴포넌트에서 data fetch가 필요하다면, [SWR](https://swr.vercel.app/) 또는 [React Query](https://tanstack.com/query/v4)와 같은 서드파티 라이브러리 사용을 추천합니다.
 
-> **Good to know**: We'll be adding more examples once `fetch` and `use` work in Client Components.
+> **알면 좋은 것**:
+>
+> 클라이언트 컴포넌트들에서 `fetch` 와 `use`가 원할히 동작하게 되면 더 많은 예제들을 추가할 계획입니다.
 
-## Static Data Fetching
+## 정적 데이터 Fetching
 
-By default, `fetch` will automatically fetch and [cache data](/docs/app/building-your-application/data-fetching/caching) indefinitely.
+기본적으로, `fetch` 자동으로 기한 없이 데이터와 [캐시 데이터](/docs/app/building-your-application/data-fetching/caching)를 가져옵니다.
 
 ```ts
-fetch('https://...') // cache: 'force-cache' is the default
+fetch('https://...') // 캐시: 'force-cache' 이 기본 옵션
 ```
 
-### Revalidating Data
+### 데이터 revalidate
 
-To revalidate [cached data](/docs/app/building-your-application/data-fetching/caching) at a timed interval, you can use the `next.revalidate` option in `fetch()` to set the `cache` lifetime of a resource (in seconds).
+[캐시된 데이터](/docs/app/building-your-application/data-fetching/caching)를 일정 시간 간격으로 revalidate하려면 `fetch()`에서 `next.revalidate` 옵션을 사용하여 `캐시`의 revalidate하기 전 유지되는 시간(초)을 설정할 수 있다.
 
 ```ts
 fetch('https://...', { next: { revalidate: 10 } })
 ```
 
-See [Revalidating Data](/docs/app/building-your-application/data-fetching/revalidating) for more information.
+더 많은 정보가 필요하다면 [Revalidating Data](/docs/app/building-your-application/data-fetching/revalidating) 자료를 참고하세요.
 
-> **Good to know**:
+> **알면 좋은 것**:
 >
-> Caching at the fetch level with `revalidate` or `cache: 'force-cache'` stores the data across requests in a shared cache. You should avoid using it for user-specific data (i.e. requests that derive data from `cookies()` or `headers()`)
+> `revalidate` 또는 `cache: 'force-cache'`를 사용하여 fetch 수준에서 캐싱하면 공유될 수 있는 캐시에 요청들 간 데이터를 저장한다. 그러므로 유저를 특정할 수 있는 데이터(예: `cookies()` 또는 `headers()`에서 데이터를 파생시키는 요청)에는 사용하지 않아야 합니다.
 
-## Dynamic Data Fetching
+## 동적 데이터 Fetching
 
-To fetch fresh data on every `fetch` request, use the `cache: 'no-store'` option.
+모든 `fetch` 요청으로 최신의(신선한) 데이터를 가져오려면 `cache: 'no-store'` 옵션을 사용합니다.
 
 ```ts
 fetch('https://...', { cache: 'no-store' })
 ```
 
-## Data Fetching Patterns
+## 데이터 Fetching 패턴들
 
-### Parallel Data Fetching
+### 병렬적 데이터 fetching
 
-To minimize client-server waterfalls, we recommend this pattern to fetch data in parallel:
+클라이언트-서버 간의 무리한 연속적인 요청을 최소화하기 위해, 데이터를 병렬적으로 가져오는 이 패턴을 추천합니다.
 
 ```tsx filename="app/artist/[username]/page.tsx" switcher
 import Albums from './albums'
@@ -131,11 +133,11 @@ export default async function Page({
 }: {
   params: { username: string }
 }) {
-  // Initiate both requests in parallel
+  // 병렬적으로 두 요청들을 시작한다.
   const artistData = getArtist(username)
   const albumsData = getArtistAlbums(username)
 
-  // Wait for the promises to resolve
+  // promise들이 모두 처리될 때까지 기다린다.
   const [artist, albums] = await Promise.all([artistData, albumsData])
 
   return (
@@ -161,11 +163,11 @@ async function getArtistAlbums(username) {
 }
 
 export default async function Page({ params: { username } }) {
-  // Initiate both requests in parallel
+  // 병렬적으로 두 요청들을 시작한다.
   const artistData = getArtist(username)
   const albumsData = getArtistAlbums(username)
 
-  // Wait for the promises to resolve
+  // promise들이 모두 처리될 때까지 기다린다.
   const [artist, albums] = await Promise.all([artistData, albumsData])
 
   return (
@@ -177,11 +179,11 @@ export default async function Page({ params: { username } }) {
 }
 ```
 
-By starting the fetch prior to calling `await` in the Server Component, each request can eagerly start to fetch requests at the same time. This sets the components up so you can avoid waterfalls.
+서버 컴포넌트에서 'await'를 호출하기 전에 fetch를 시작하면 각 요청이 동시에 fetch 요청들을 빠르게 시작할 수 있습니다. 이렇게 컴포넌트들을 적용해놓으면 무리한 연속적인 요청들로 인한 문제를 피할 수 있습니다.
 
-We can save time by initiating both requests in parallel, however, the user won't see the rendered result until both promises are resolved.
+병렬적으로 두 요청들을 시작하면 시간을 아낄 수 있다. 그러나, 사용자는 두 promise들이 모두 처리될 때까지 화면에 보여지는 결과를 볼 수 없습니다.
 
-To improve the user experience, you can add a [suspense boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming) to break up the rendering work and show part of the result as soon as possible:
+이런 유저 경험을 개선하기 위해 [suspense boundary](/docs/app/building-your-application/routing/loading-ui-and-streaming)를 추가하여 렌더링 작업을 중단하고 가능한 한 빨리 결과의 일부를 보여줄 수 있습니다.
 
 ```tsx filename="artist/[username]/page.tsx" switcher
 import { getArtist, getArtistAlbums, type Album } from './api'
@@ -191,18 +193,18 @@ export default async function Page({
 }: {
   params: { username: string }
 }) {
-  // Initiate both requests in parallel
+  // 병렬적으로 두 요청들을 시작한다.
   const artistData = getArtist(username)
   const albumData = getArtistAlbums(username)
 
-  // Wait for the artist's promise to resolve first
+  // artist의 promise가 처음으로 처리되는 걸 기다린다.
   const artist = await artistData
 
   return (
     <>
       <h1>{artist.name}</h1>
-      {/* Send the artist information first,
-          and wrap albums in a suspense boundary */}
+      {/* 처음 artist 정보를 보내고,
+          suspense boundary 안으로 albums를 감싸라.*/}
       <Suspense fallback={<div>Loading...</div>}>
         <Albums promise={albumData} />
       </Suspense>
@@ -210,9 +212,9 @@ export default async function Page({
   )
 }
 
-// Albums Component
+// Albums 컴포넌트
 async function Albums({ promise }: { promise: Promise<Album[]> }) {
-  // Wait for the albums promise to resolve
+  // albums의 promise가 처리되는 걸 기다린다.
   const albums = await promise
 
   return (
@@ -229,18 +231,18 @@ async function Albums({ promise }: { promise: Promise<Album[]> }) {
 import { getArtist, getArtistAlbums } from './api'
 
 export default async function Page({ params: { username } }) {
-  // Initiate both requests in parallel
+  // 병렬적으로 두 요청들을 시작한다.
   const artistData = getArtist(username)
   const albumData = getArtistAlbums(username)
 
-  // Wait for the artist's promise to resolve first
+  // artist의 promise가 처음으로 처리되는 걸 기다린다.
   const artist = await artistData
 
   return (
     <>
       <h1>{artist.name}</h1>
-      {/* Send the artist information first,
-      and wrap albums in a suspense boundary */}
+      {/* 처음 artist 정보를 보내고,
+      suspense boundary 안으로 albums를 감싸라.*/}
       <Suspense fallback={<div>Loading...</div>}>
         <Albums promise={albumData} />
       </Suspense>
@@ -248,9 +250,9 @@ export default async function Page({ params: { username } }) {
   )
 }
 
-// Albums Component
+// Albums 컴포넌트
 async function Albums({ promise }) {
-  // Wait for the albums promise to resolve
+  // albums의 promise가 처리되는 걸 기다린다.
   const albums = await promise
 
   return (
@@ -263,17 +265,17 @@ async function Albums({ promise }) {
 }
 ```
 
-Take a look at the [preloading pattern](/docs/app/building-your-application/data-fetching/caching#preload-pattern-with-cache) for more information on improving components structure.
+컴포넌트들의 구조를 개선하기에 대한 자세한 정보는 [preloading 패턴](/docs/app/building-your-application/data-fetching/caching#preload-pattern-with-cache) 자료를 참고하세요.
 
-### Sequential Data Fetching
+### 순차적 데이터 fetching
 
-To fetch data sequentially, you can `fetch` directly inside the component that needs it, or you can `await` the result of `fetch` inside the component that needs it:
+데이터를 순차적으로 가져오기 위해 컴포넌트 내부에서 직접 `fetch`를 사용하거나 컴포넌트 내부에서 `fetch`의 결과를 `await`를 사용해 처리할 수 있습니다.
 
 ```tsx filename="app/artist/page.tsx" switcher
 // ...
 
 async function Playlists({ artistID }: { artistID: string }) {
-  // Wait for the playlists
+  // playlists를 기다립니다.
   const playlists = await getArtistPlaylists(artistID)
 
   return (
@@ -290,7 +292,7 @@ export default async function Page({
 }: {
   params: { username: string }
 }) {
-  // Wait for the artist
+  // artist를 기다립니다.
   const artist = await getArtist(username)
 
   return (
@@ -308,7 +310,7 @@ export default async function Page({
 // ...
 
 async function Playlists({ artistID }) {
-  // Wait for the playlists
+  // playlists를 기다립니다.
   const playlists = await getArtistPlaylists(artistID)
 
   return (
@@ -321,7 +323,7 @@ async function Playlists({ artistID }) {
 }
 
 export default async function Page({ params: { username } }) {
-  // Wait for the artist
+  // artist를 기다립니다.
   const artist = await getArtist(username)
 
   return (
@@ -335,43 +337,46 @@ export default async function Page({ params: { username } }) {
 }
 ```
 
-By fetching data inside the component, each fetch request and nested segment in the route cannot start fetching data and rendering until the previous request or segment has completed.
+컴포넌트 내부에서 데이터를 가져오면, route 안에 있는 각 fetch 요청과 중첩된 세그먼트는 그 이전의 요청 또는 세그먼트가 완료될 때까지 데이터 fetching과 렌더링을 할 수 없습니다.
+
+### Route에서 렌더링 막는 것
 
-### Blocking Rendering in a Route
+[layout](/docs/app/building-your-application/routing/pages-and-layouts)에서 data 가져오면 그 아래의 모든 route 세그먼트들에 대한 렌더링을 데이터 loading이 완료된 후에만 시작할 수 있습니다.
 
-By fetching data in a [layout](/docs/app/building-your-application/routing/pages-and-layouts), rendering for all route segments beneath it can only start once the data has finished loading.
+`pages` 디렉토리에서 서버 렌더링을 사용하는 페이지는 `getServerSideProps`가 완료될 때까지 브라우저 loading 스피너를 표시한 다음 해당 페이지에 대한 React 컴포넌트를 렌더링합니다. 이것은 "모두 아니면 아무것도 없음"으로 데이터를 가져와 표현할 수 있습니다. 페이지에 대한 전체 데이터가 있거나 없는 것입니다.
 
-In the `pages` directory, pages using server-rendering would show the browser loading spinner until `getServerSideProps` had finished, then render the React component for that page. This can be described as "all or nothing" data fetching. Either you had the entire data for your page, or none.
+`app` 디렉토리에는 살펴볼 수 있는 추가 옵션들이 있습니다:
 
-In the `app` directory, you have additional options to explore:
+1. 첫 번째, 데이터 fetching 함수의 결과를 스트리밍하는 동안 `loading.js`를 사용하여 서버에서 즉시 로드 상태를 표시할 수 있습니다.
 
-1. First, you can use `loading.js` to show an instant loading state from the server while streaming in the result from your data fetching function.
-2. Second, you can move data fetching _lower_ in the component tree to only block rendering for the parts of the page that need it. For example, moving data fetching to a specific component rather than fetching it at the root layout.
+2. 두 번째, 필요한 페이지 부분들에 대한 렌더링만 막도록 컴포넌트 트리에서 데이터 fetching을 *lower*로 이동시킬 수 있습니다. 예를 들어 데이터 fetching을 루트 레이아웃에서 가져오는 대신 특정 컴포넌트로 이동합니다.
 
-Whenever possible, it's best to fetch data in the segment that uses it. This also allows you to show a loading state for only the part of the page that is loading, and not the entire page.
+가능하면 사용하는 세그먼트에서 데이터를 가져오는 것이 가장 좋습니다. 또한 전체 페이지가 아닌 로드 중인 페이지의 일부에 대한 로드 상태만 표시할 수 있습니다.
 
-## Data Fetching without `fetch()`
+## `fetch()` 없이 데이터 Fetching
 
-You might not always have the ability to use and configure `fetch` requests directly if you're using a third-party library such as an ORM or database client.
+ORM 또는 database client와 같은 서드파티 라이브러리를 사용하는 경우 'fetch' 요청을 직접 설정하고 사용하는 기능이 항상 있는 것은 아닙니다.
 
-In cases where you cannot use `fetch` but still want to control the caching or revalidating behavior of a layout or page, you can rely on the [default caching behavior](#default-caching-behavior) of the segment or use the [segment cache configuration](#segment-cache-configuration).
+`fetch`를 사용할 수 없지만 여전히 레이아웃 또는 페이지의 캐싱 또는 revalidating 동작을 제어하려는 경우 세그먼트의 [기본 캐싱 동작](/docs/app/building-your-application/data-fetching/caching#fetch)을 사용하거나 [세그먼트 캐시 설정](/docs/app/building-your-application/data-fetching/caching#segment-level-caching)을 사용할 수 있습니다.
 
-### Default Caching Behavior
+### 기본 캐싱 동작
 
-Any data fetching libraries that do not use `fetch` directly **will not** affect caching of a route, and will be static or dynamic depending on the route segment.
+`fetch`를 직접 사용하지 않는 모든 데이터 fetching 라이브러리는 route 캐싱에 **영향을 미치지 않으며** route 세그먼트에 따라 정적 또는 동적이 됩니다.
 
-If the segment is static (default), the output of the request will be cached and revalidated (if configured) alongside the rest of the segment. If the segment is dynamic, the output of the request will _not_ be cached and will be re-fetched on every request when the segment is rendered.
+세그먼트가 정적(기본값)인 경우, 요청의 출력이 나머지 세그먼트와 함께 캐시되고 revalidated 됩니다(구성된 경우). 세그먼트가 동적이면 요청 출력이 캐시되지 않고 세그먼트가 렌더링될 때 모든 요청에서 다시 가져옵니다.
 
-> **Good to know**: Dynamic functions like [`cookies()`](/docs/app/api-reference/functions/cookies) and [`headers()`](/docs/app/api-reference/functions/headers) will make the route segment dynamic.
+> **알면 좋은 것**:
+>
+> [`cookies()`](/docs/app/api-reference/functions/cookies) 와 [`headers()`](/docs/app/api-reference/functions/headers) 같은 동적 함수들은 동적 route 세그먼트를 만들 수 있다.
 
-### Segment Cache Configuration
+### 세그먼트 캐시 설정
 
-As a temporary solution, until the caching behavior of third-party queries can be configured, you can use [segment configuration](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) to customize the cache behavior of the entire segment.
+서드파티 쿼리들의 캐싱 동작을 설정할 수 있을 때까지, 임시방편으로 [세그먼트 설정](/docs/app/api-reference/file-conventions/route-segment-config#revalidate)을 사용하여 전체 세그먼트의 캐시 동작을 사용자 조정할 수 있습니다.
 
 ```tsx filename="app/page.tsx" switcher
 import prisma from './lib/prisma'
 
-export const revalidate = 3600 // revalidate every hour
+export const revalidate = 3600 // 매시간 revalidate
 
 async function getPosts() {
   const posts = await prisma.post.findMany()
@@ -387,7 +392,7 @@ export default async function Page() {
 ```jsx filename="app/page.js" switcher
 import prisma from './lib/prisma'
 
-export const revalidate = 3600 // revalidate every hour
+export const revalidate = 3600 // 매시간 revalidate
 
 async function getPosts() {
   const posts = await prisma.post.findMany()

From 558baab8bcedad0ad98565a91bd3465325e13e52 Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-J22D89D>
Date: Tue, 15 Aug 2023 14:26:09 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EA=B2=BD=EC=96=B4=EC=B2=B4=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03-data-fetching/01-fetching.mdx          | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
index c9d548271..0784cb6c6 100644
--- a/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
+++ b/docs/02-app/01-building-your-application/03-data-fetching/01-fetching.mdx
@@ -22,7 +22,7 @@ async function getData() {
 
   // 추천: handle errors
   if (!res.ok) {
-    // res와 가장 밀접한 `error.js` Error Boundary를 활성화시킵니다.
+    // res와 가장 밀접한 `error.js` Error Boundary를 활성화 합니다.
     throw new Error('Failed to fetch data')
   }
 
@@ -44,7 +44,7 @@ async function getData() {
 
   // 추천: handle errors
   if (!res.ok) {
-    // res와 가장 밀접한 `error.js` Error Boundary를 활성화시킵니다.
+    // res와 가장 밀접한 `error.js` Error Boundary를 활성화 합니다.
     throw new Error('Failed to fetch data')
   }
 
@@ -58,7 +58,7 @@ export default async function Page() {
 }
 ```
 
-> **알면 좋은 것**:
+> **참고**:
 >
 > TypeScript와 함께 서버 컴포넌트에서 `async` 사용하려면, TypeScript `5.1.3` 또는 이 이상 버전과 `@types/react` `18.2.8` 또는 이 이상의 버전을 사용하고 있는지 확인하세요.
 
@@ -75,7 +75,7 @@ Next.js는 서버 컴포넌트들에서 데이터 fetching할 때, 필요할지
 
 클라이언트 컴포넌트들에서 `use`에서 `fetch`를 감싸는 것은 현재 **추천하지 않습니다.** 이것은 재렌더링을 여러번 야기시킬지도 모릅니다. 현재, 클라이언트 컴포넌트에서 data fetch가 필요하다면, [SWR](https://swr.vercel.app/) 또는 [React Query](https://tanstack.com/query/v4)와 같은 서드파티 라이브러리 사용을 추천합니다.
 
-> **알면 좋은 것**:
+> **참고**:
 >
 > 클라이언트 컴포넌트들에서 `fetch` 와 `use`가 원할히 동작하게 되면 더 많은 예제들을 추가할 계획입니다.
 
@@ -97,13 +97,13 @@ fetch('https://...', { next: { revalidate: 10 } })
 
 더 많은 정보가 필요하다면 [Revalidating Data](/docs/app/building-your-application/data-fetching/revalidating) 자료를 참고하세요.
 
-> **알면 좋은 것**:
+> **참고**:
 >
-> `revalidate` 또는 `cache: 'force-cache'`를 사용하여 fetch 수준에서 캐싱하면 공유될 수 있는 캐시에 요청들 간 데이터를 저장한다. 그러므로 유저를 특정할 수 있는 데이터(예: `cookies()` 또는 `headers()`에서 데이터를 파생시키는 요청)에는 사용하지 않아야 합니다.
+> `revalidate` 또는 `cache: 'force-cache'`를 사용하여 fetch 수준에서 캐싱하면 공유될 수 있는 캐시에 요청들 간 데이터를 저장합니다. 그러므로 유저를 특정할 수 있는 데이터(예: `cookies()` 또는 `headers()`에서 데이터를 파생시키는 요청)에는 사용하지 않아야 합니다.
 
 ## 동적 데이터 Fetching
 
-모든 `fetch` 요청으로 최신의(신선한) 데이터를 가져오려면 `cache: 'no-store'` 옵션을 사용합니다.
+모든 `fetch` 요청으로 최신의 데이터를 가져오려면 `cache: 'no-store'` 옵션을 사용합니다.
 
 ```ts
 fetch('https://...', { cache: 'no-store' })
@@ -137,7 +137,7 @@ export default async function Page({
   const artistData = getArtist(username)
   const albumsData = getArtistAlbums(username)
 
-  // promise들이 모두 처리될 때까지 기다린다.
+  // promise들이 모두 처리될 때까지 기다립니다.
   const [artist, albums] = await Promise.all([artistData, albumsData])
 
   return (
@@ -167,7 +167,7 @@ export default async function Page({ params: { username } }) {
   const artistData = getArtist(username)
   const albumsData = getArtistAlbums(username)
 
-  // promise들이 모두 처리될 때까지 기다린다.
+  // promise들이 모두 처리될 때까지 기다립니다.
   const [artist, albums] = await Promise.all([artistData, albumsData])
 
   return (
@@ -197,14 +197,14 @@ export default async function Page({
   const artistData = getArtist(username)
   const albumData = getArtistAlbums(username)
 
-  // artist의 promise가 처음으로 처리되는 걸 기다린다.
+  // artist의 promise가 처음으로 처리되는 걸 기다립니다.
   const artist = await artistData
 
   return (
     <>
       <h1>{artist.name}</h1>
       {/* 처음 artist 정보를 보내고,
-          suspense boundary 안으로 albums를 감싸라.*/}
+          suspense boundary 안으로 albums를 감싸세요.*/}
       <Suspense fallback={<div>Loading...</div>}>
         <Albums promise={albumData} />
       </Suspense>
@@ -214,7 +214,7 @@ export default async function Page({
 
 // Albums 컴포넌트
 async function Albums({ promise }: { promise: Promise<Album[]> }) {
-  // albums의 promise가 처리되는 걸 기다린다.
+  // albums의 promise가 처리되는 걸 기다립니다.
   const albums = await promise
 
   return (
@@ -235,14 +235,14 @@ export default async function Page({ params: { username } }) {
   const artistData = getArtist(username)
   const albumData = getArtistAlbums(username)
 
-  // artist의 promise가 처음으로 처리되는 걸 기다린다.
+  // artist의 promise가 처음으로 처리되는 걸 기다립니다.
   const artist = await artistData
 
   return (
     <>
       <h1>{artist.name}</h1>
       {/* 처음 artist 정보를 보내고,
-      suspense boundary 안으로 albums를 감싸라.*/}
+      suspense boundary 안으로 albums를 감싸세요.*/}
       <Suspense fallback={<div>Loading...</div>}>
         <Albums promise={albumData} />
       </Suspense>
@@ -252,7 +252,7 @@ export default async function Page({ params: { username } }) {
 
 // Albums 컴포넌트
 async function Albums({ promise }) {
-  // albums의 promise가 처리되는 걸 기다린다.
+  // albums의 promise가 처리되는 걸 기다립니다.
   const albums = await promise
 
   return (
@@ -365,7 +365,7 @@ ORM 또는 database client와 같은 서드파티 라이브러리를 사용하
 
 세그먼트가 정적(기본값)인 경우, 요청의 출력이 나머지 세그먼트와 함께 캐시되고 revalidated 됩니다(구성된 경우). 세그먼트가 동적이면 요청 출력이 캐시되지 않고 세그먼트가 렌더링될 때 모든 요청에서 다시 가져옵니다.
 
-> **알면 좋은 것**:
+> **참고**:
 >
 > [`cookies()`](/docs/app/api-reference/functions/cookies) 와 [`headers()`](/docs/app/api-reference/functions/headers) 같은 동적 함수들은 동적 route 세그먼트를 만들 수 있다.