1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
---
title: Client hints(클라이언트 힌트)
slug: Glossary/Client_hints
tags:
- Client hints
- Reference
- UA 대안
- User-agent
- 클라이언트 힌트
translation_of: Glossary/Client_hints
---
<p><span class="seoSummary"><strong>Client Hints</strong>는 클라이언트 장치 및 에이전트별 기본 설정 목록을 확인할 수 있도록 사전 컨텐츠 체크를 위한 <a href="/en-US/docs/Web/HTTP/Headers">HTTP request header</a> 입니다. </span><a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints</a>를 사용하면 이미지 <abbr title="device pixel ratio">DPR</abbr> 해상도의 자동 조절과 최적화 된 assets을 자동으로 적용할 수 있습니다.</p>
<p>Client Hints는 자동으로 적용되는 것이 아닙니다 : ClientHints를 지원한다고 선언하기 위해서 서버에서 <code><a href="https://tools.ietf.org/html/draft-grigorik-http-client-hints-03#section-2.2.1">Accept-CH</a></code> (accept client hints) header 또는 클라이언트에서 HTML Meta 태그의 <code><a href="/en-US/docs/Web/HTML/Element/meta#Attributes">http-equiv</a></code> 속성을 사용하여 선언해주어야 합니다.</p>
<p><code>Accept-CH: <abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code></p>
<p>또는</p>
<p><code><meta http-equiv="Accept-CH" content="<abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code><code>"></code></p>
<p>클라이언트가 <code>Accept-CH</code> header를 전달받게 되면 지원되는 경우, Client Hint header를 추가합니다. 예를 들어 위의 Accept-CH 예제를 기반으로 클라이언트는 모든 후속 요청에 DPR, Width, Viewport-Width 및 Downlink 헤더를 추가 할 수 있습니다.</p>
<p>두 번째 예에서 서버는 Accept-CH 메타 태그를 설정하여 브라우저에 힌트를 제공합니다.</p>
<p>일반적으로, Client Hints header를 가지고 개발자 또는 어플리케이션은 브라우저에게 장치 픽셀 비율, 뷰포트 너비 및 디스플레이 너비와 같은 서버 자체 정보를 제공하도록 할 수 있습니다. 그러면 클라이언트는 서버에 클라이언트 환경에 대한 정보를 제공할 수 있고, 서버는 해당 정보를 기반으로 전송할 리소스를 결정할 수도 있습니다.</p>
<h2 id="Vary_Client_Hints">Vary Client Hints</h2>
<p>다른 <a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints</a>가 응답에 영향을 줄 수 있는 캐시를 전달하기 위해서는, <code><a href="/en-US/docs/Web/HTTP/Headers/Vary">Vary</a></code> HTTP header를 사용해야만 합니다.</p>
<p id="Example_varying_response">응답 예시 :</p>
<p><code>Vary: Accept, <abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code></p>
<h2 id="See_Also">See Also</h2>
<ul>
<li><a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints headers</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary"><code>Vary</code> HTTP Header</a></li>
</ul>
|
