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.

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

04-functions/headers.mdx #172

Merged
merged 6 commits into from
Jun 22, 2023
Merged
Changes from 2 commits
Commits
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
46 changes: 24 additions & 22 deletions docs/02-app/02-api-reference/04-functions/headers.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
title: headers
description: API reference for the headers function.
title : headers
descriptoion : headers function에 대한 API 레퍼런스입니다.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

description에 대한 오타가 있습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오타 수정했습니다! 확인 감사합니다

---

The `headers` function allows you to read the HTTP incoming request headers from a [Server Component](/docs/getting-started/react-essentials).

`headers` 함수는 [Server 컴포넌트](/docs/getting-started/react-essentials)에서 HTTP 수신 요청 헤더를 읽을 수 있는 기능을 제공합니다.
## `headers()`

This API extends the [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers.
이 API는 [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers)에서 확장된 것입니다. 읽기 전용이며, 요청을 보낼 때 헤더를 설정/삭제할 수 없습니다.

```tsx filename="app/page.tsx" switcher
import { headers } from 'next/headers'
Expand All @@ -31,44 +30,47 @@ export default function Page() {
}
```

> **Good to know**:
> **참고**:
>
> - `headers()` is a **[Dynamic Function](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions)** whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering)** at request time.
> - `headers()`는 **[Dynamic Function](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions)** 으로, 반환되는 값은 미리 알 수 없습니다. 레이아웃이나 페이지에서 이를 사용하면 요청 시간에 **[동적으로 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering)** 됩니다.


### API Reference
### API 레퍼런스

```tsx
const headersList = headers()
```

#### Parameters
#### 매개변수

`headers` does not take any parameters.
`headers`는 어떤 매개변수도 받지 않습니다.
ChanghyeonYoon marked this conversation as resolved.
Show resolved Hide resolved

#### Returns
#### 반환값

`headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) object.
`headers`는 읽기 전용인 [Web Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) 객체를 반환합니다.

- [`Headers.entries()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing to go through all key/value pairs contained in this object.
- [`Headers.forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/forEach): Executes a provided function once for each key/value pair in this `Headers` object.
- [`Headers.get()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get): Returns a [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) sequence of all the values of a header within a `Headers` object with a given name.
- [`Headers.has()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has): Returns a boolean stating whether a `Headers` object contains a certain header.
- [`Headers.keys()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
- [`Headers.values()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object.
- [`Headers.entries()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries): 모든 키/값 쌍을 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.
- [`Headers.forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/forEach): `Headers` 객체의 키/값 쌍에 대해 제공된 함수를 한 번씩 실행합니다.
- [`Headers.get()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get): 주어진 이름과 일치하는 `Headers` 객체 내 헤더의 모든 값을 [`문자열`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) 시퀀스로 반환합니다.

### Examples
- [`Headers.has()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has): `Headers` 객체가 특정 헤더를 포함하고 있는지를 나타내는 boolean 값을 반환합니다.
- [`Headers.keys()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/keys): 해당 객체에 포함된 key/value 쌍의 key를 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this object이 객체로 표현하면 어색할 거 같아서 해당 객체로 표현했는데 의견 부탁드립니다!

Copy link
Contributor

@JoChaeWoo JoChaeWoo Jun 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모두 Headers 객체의 method에 대한 설명이니 "해당 객체"를 "Headers 객체"로 표현해도 좋을 것 같습니다.
억양에 대한 가이드라인의 두 번째 항목과 비슷하게 주어를 반복하는 것이 명확하다 생각합니다.
다른 분들의 의견도 궁금합니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일단 말씀 주신 부분에 대해서 수정했습니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 '이', '해당'의 경우 앞에 언급된 명사 그대로 가져오는 것이 좋다는 것에 동의합니다!

- [`Headers.values()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/values): 해당 객체에 포함된 key/value 쌍의 value를 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.

#### Usage with Data Fetching
### 예시
#### Data fetching과 사용하기

`headers()` can be used in combination with [Suspense for Data Fetching](/docs/app/building-your-application/data-fetching/fetching).

`headers()`는 [Data Fetching에 대한 Suspense](/docs/app/building-your-application/data-fetching/fetching)와 결합하여 사용할 수 있습니다.

```jsx filename="app/page.js"
import { headers } from 'next/headers'

async function getUser() {
const headersInstance = headers()
const authorization = headersInstance.get('authorization')
// Forward the authorization header
// authorization 헤더를 전달하세요.
const res = await fetch('...', {
headers: { authorization },
})
Expand All @@ -85,4 +87,4 @@ export default async function UserPage() {

| Version | Changes |
| --------- | --------------------- |
| `v13.0.0` | `headers` introduced. |
| `v13.0.0` | `headers` 도입. |
ChanghyeonYoon marked this conversation as resolved.
Show resolved Hide resolved