<div id="readability-page-1" class="page"><article><div id="post-content" itemprop="articleBody"><p><em>2편 소개</em></p>
<ul>
<li>웹 브라우져가 HTTP를 어떻게 사용하는지 이해할수 있습니다.</li>
<li><strong>3장. 컨텐츠 협상</strong>: 웹브라우져가 서버와 데이터를 주고 받을 때 최적의 형태로 만들기 위한 매커니즘을 이해하실 수 있습니다.</li>
<li><strong>4장. 쿠키</strong>: 서버가 웹 브라우져를 식별하기 위한 방법인 쿠키에 대해 배우실 수 있습니다.</li>
<li><strong>5장. 네트워크 요청</strong>: 웹 브라우저에서 발생할 수 있는 HTTP 요청의 종류에 대해 알 수 있습니다.</li>
</ul>
<h2 id="3장-컨텐츠-협상"><a href="#3%EC%9E%A5-%EC%BB%A8%ED%85%90%EC%B8%A0-%ED%98%91%EC%83%81" aria-label="3장 컨텐츠 협상 permalink"></a>3장. 컨텐츠 협상</h2>
<ul>
<li>서버는 다양한 클라이언트에 적합한 자원을 제공해야합니다.</li>
<li>컨텐츠 협상에 사용되는 HTTP 헤더와 동작 방식을 공부합니다.</li>
</ul>
<h2 id="31-컨텐츠-타입"><a href="#31-%EC%BB%A8%ED%85%90%EC%B8%A0-%ED%83%80%EC%9E%85" aria-label="31 컨텐츠 타입 permalink"></a>3.1 컨텐츠 타입</h2>
<ul>
<li>Accept 요청 헤더, Content-Type 응답 헤더</li>
</ul>
<div data-language="text"><pre><code>&gt; Accpet: text/html
&lt; Content-Type: text/html</code></pre></div>
<ul>
<li>사례: 깃헙</li>
<li>라이브러리: <a href="https://github.com/expressjs/express/blob/master/lib/response.js#L562">express.js의 res.format</a></li>
</ul>
<h2 id="32-압축"><a href="#32-%EC%95%95%EC%B6%95" aria-label="32 압축 permalink"></a>3.2 압축</h2>
<ul>
<li>Accept-Encoding 요청 헤더, Content-Encoding 응답 헤더</li>
</ul>
<div data-language="text"><pre><code>&gt; Accept-Encoding: gzip
&lt; Content-Encoding: gzip</code></pre></div>
<ul>
<li>사례: 깃헙</li>
<li>라이브러리: <a href="https://github.com/expressjs/compression#readme">compression</a></li>
</ul>
<h2 id="33-언어"><a href="#33-%EC%96%B8%EC%96%B4" aria-label="33 언어 permalink"></a>3.3 언어</h2>
<ul>
<li>Accept-Language 요청 헤더</li>
</ul>

<ul>
<li>사례: 유투브</li>
<li>라이브러리: <a href="https://expressjs.com/en/5x/api.html#req.acceptsLanguages">express.js req.acceptLanuages()</a>, <a href="https://github.com/jshttp/accepts/blob/master/index.js#L195">accepts</a>, <a href="https://github.com/jshttp/negotiator/blob/master/index.js#L63">negotiator</a></li>
</ul>
<h2 id="34-사용자-에이전트"><a href="#34-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8" aria-label="34 사용자 에이전트 permalink"></a>3.4 사용자 에이전트</h2>
<ul>
<li>User-Agent 요청 헤더</li>
</ul>
<div data-language="text"><pre><code>&gt; User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15</code></pre></div>
<ul>
<li>사례: 구형 브라우져 감지</li>
<li>라이브러리: <a href="https://github.com/biggora/express-useragent/blob/master/lib/express-useragent.js">express-useragent</a></li>
</ul>
<h2 id="36-중간-정리"><a href="#36-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="36 중간 정리 permalink"></a>3.6 중간 정리</h2>
<ul>
<li>컨텐츠 협상은 HTTP 헤더를 기반으로 동작</li>
<li>경험했던 사례 소개</li>
</ul>
<h3 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h3>
<ul>
<li><a href="/2024/05/04/content-negotiation">컨텐츠 협상 | 김정환블로그</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_device_detection">사용자 에이전트를 사용한 브라우저 감지 | MDN</a></li>
<li><a href="https://github.com/expressjs/express">expressjs/express | 깃헙</a></li>
<li><a href="https://github.com/expressjs/compression">expressjs/compression | 깃헙</a></li>
<li><a href="https://github.com/jshttp/accepts/">jshttp/accepts | 깃헙</a></li>
<li><a href="https://github.com/jshttp/negotiator">jshttp/negotiator | 깃헙</a></li>
<li><a href="https://github.com/biggora/express-useragent/blob/master/lib/express-useragent.js">biggora/express-useagent | 깃헙</a></li>
</ul>
<h2 id="4장-쿠키"><a href="#4%EC%9E%A5-%EC%BF%A0%ED%82%A4" aria-label="4장 쿠키 permalink"></a>4장. 쿠키</h2>
<ul>
<li>쿠키의 시초: 매직 쿠키. 쇼핑카트</li>
<li>HTTP 관점으로 보아야 쿠키를 제대로 이해할 수 있습니다.</li>
</ul>
<h2 id="41-쿠키-헤더"><a href="#41-%EC%BF%A0%ED%82%A4-%ED%97%A4%EB%8D%94" aria-label="41 쿠키 헤더 permalink"></a>4.1 쿠키 헤더</h2>
<ul>
<li>무상태 HTTP</li>
<li>Set-Cookie 응답 헤더와 Cookie 요청 헤더</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1
&gt; Cookie: sid=1</code></pre></div>
<ul>
<li>클라이언트를 식별할 수 있는 서버 제작</li>
</ul>
<h2 id="42-쿠키-유효-범위"><a href="#42-%EC%BF%A0%ED%82%A4-%EC%9C%A0%ED%9A%A8-%EB%B2%94%EC%9C%84" aria-label="42 쿠키 유효 범위 permalink"></a>4.2 쿠키 유효 범위</h2>
<ul>
<li>Domain 쿠키 디렉티브</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1; Domain=mysite.com</code></pre></div>
<ul>
<li>Path 쿠키 디렉티브</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1; Path=/private</code></pre></div>
<h2 id="43-쿠키-생명주기"><a href="#43-%EC%BF%A0%ED%82%A4-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0" aria-label="43 쿠키 생명주기 permalink"></a>4.3 쿠키 생명주기</h2>
<ul>
<li>세션 쿠키(Session Cookie)</li>
<li>Max-Age와 Expries 쿠키 디렉티브</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1; Max-Age=10</code></pre></div>
<ul>
<li>영속적인 쿠키(Permanent Cookie)</li>
</ul>
<h2 id="44-쿠키-secure"><a href="#44-%EC%BF%A0%ED%82%A4-secure" aria-label="44 쿠키 secure permalink"></a>4.4 쿠키 Secure</h2>
<ul>
<li>쿠키는 평문이라 유출될 수 있다.</li>
<li>Secure 쿠키 디렉티브</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1; Secure</code></pre></div>
<h2 id="45-쿠키-httponly"><a href="#45-%EC%BF%A0%ED%82%A4-httponly" aria-label="45 쿠키 httponly permalink"></a>4.5 쿠키 HttpOnly</h2>
<ul>
<li>자바스크립트로 쿠키를 위조할 수 있다.</li>
<li>HttpOnly 쿠키 디렉티브</li>
</ul>
<div data-language="text"><pre><code>&lt; Set-Cookie: sid=1; httpOnly</code></pre></div>
<h2 id="46-쿠키-라이브러리서버"><a href="#46-%EC%BF%A0%ED%82%A4-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%84%9C%EB%B2%84" aria-label="46 쿠키 라이브러리서버 permalink"></a>4.6 쿠키 라이브러리(서버)</h2>
<ul>
<li>쿠키 데이터를 문자열로 변환하는 함수 : Express.js <a href="https://github.com/expressjs/express/blob/master/lib/response.js">res.cookie()</a></li>
<li>문자열을 쿠키 데이터로 변환하는 함수: <a href="https://github.com/expressjs/cookie-parser/tree/master">cookie-parser</a></li>
</ul>
<h2 id="47-쿠키-라이브러리브라우져"><a href="#47-%EC%BF%A0%ED%82%A4-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%B8" aria-label="47 쿠키 라이브러리브라우져 permalink"></a>4.7 쿠키 라이브러리(브라우져)</h2>
<ul>
<li>브라우져에서 쿠키를 제어하는 사례. '오늘 하루 다시 보지 않기'</li>
<li>쿠키 데이터를 변경/조회/삭제하는 라이브러리: <a href="https://github.com/js-cookie/js-cookie/tree/main">js-cookie</a></li>
</ul>
<h2 id="48-중간정리"><a href="#48-%EC%A4%91%EA%B0%84%EC%A0%95%EB%A6%AC" aria-label="48 중간정리 permalink"></a>4.8 중간정리</h2>
<ul>
<li>상태가 없는 HTTP에 상태를 추가할 목적으로 쿠키를 사용합니다.</li>
<li>쿠키 유효범위 디렉티브: Domain, Path</li>
<li>쿠키 생명 주기 디렉티브: Max-Age, Expires</li>
<li>쿠키 보안 디렉티브: Secure, HttpOnly</li>
<li>쿠키 라이브러리</li>
</ul>
<h3 id="참고-1"><a href="#%EC%B0%B8%EA%B3%A0-1" aria-label="참고 1 permalink"></a>참고</h3>
<ul>
<li><a href="/2024/03/04/http-cookie">HTTP 쿠키 | 김정환블로그</a></li>
<li><a href="https://ko.wikipedia.org/wiki/HTTP_%EC%BF%A0%ED%82%A4">HTTP 쿠키 | 위키피디아</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies">HTTP 쿠키 | MDN</a></li>
<li><a href="https://ko.javascript.info/cookie">쿠키와 document.cookie | JAVASCRIPT INFO</a></li>
<li>도서) HTTP 완벽가이드 &gt; 11.6 쿠키</li>
<li>도서) 리얼월드 HTTP &gt; 2.5 쿠키</li>
</ul>
<h2 id="5장-네트워크-요청"><a href="#5%EC%9E%A5-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%9A%94%EC%B2%AD" aria-label="5장 네트워크 요청 permalink"></a>5장. 네트워크 요청</h2>
<ul>
<li>브라우져에서 발생하는 HTTP 요청의 종류와 특징을 알아보겠습니다.</li>
</ul>
<h2 id="51-html-요청"><a href="#51-html-%EC%9A%94%EC%B2%AD" aria-label="51 html 요청 permalink"></a>5.1 HTML 요청</h2>
<ul>
<li>사용자가 <strong>URL</strong>을 입력하면 HTTP 요청을 만든다.</li>
<li>브라우져에 따라 <strong>파비콘</strong>을 얻기 위해 HTTP 요청을 만든다.</li>
<li>사용자가 웹 문서의 <strong>링크</strong>를 클릭하면 HTTP 요청을 만든다.</li>
</ul>
<h2 id="52-html-외-요청"><a href="#52-html-%EC%99%B8-%EC%9A%94%EC%B2%AD" aria-label="52 html 외 요청 permalink"></a>5.2 HTML 외 요청</h2>
<ul>
<li><strong>CSS 로딩 태그</strong>를 만나면 HTTP 요청을 만든다.</li>
<li><strong>글꼴 로딩 태그</strong>를 만나면 HTTP 요청을 만든다.</li>
<li><strong>JS 로딩 태그</strong>를 만나면 HTTP 요청을 만든다.</li>
</ul>
<h2 id="53-img-요청"><a href="#53-img-%EC%9A%94%EC%B2%AD" aria-label="53 img 요청 permalink"></a>5.3 img 요청</h2>
<ul>
<li><strong>img 태그</strong>를 만나면 HTTP 요청을 만든다.</li>
<li>광고 효과를 높이기 위한 도구로 활용한다.</li>
<li>img 태그를 이용해 광고 픽셀을 만들어 데이터를 수집한다.</li>
</ul>
<h2 id="54-form-요청"><a href="#54-form-%EC%9A%94%EC%B2%AD" aria-label="54 form 요청 permalink"></a>5.4 Form 요청</h2>
<ul>
<li><strong>form 태그</strong>는 사용자가 원하는 시점에 HTTP 요청을 만든다.</li>
<li>GET 메소드 방식</li>
<li>POST 메소드 방식</li>
<li>application/x-www-form-urlencoded과 multipart/form-data</li>
</ul>
<h2 id="55-중간-정리"><a href="#55-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="55 중간 정리 permalink"></a>5.5 중간 정리</h2>
<ul>
<li>브라우져는 HTML을 얻기 위해 HTTP 요청을 만듭니다.</li>
<li>브라우져는 HTML 렌더링 과정에 필요한 HTTP 요청을 만듭니다.</li>
<li>브라우져는 img 태그를 만나면 HTTP 요청을 만듭니다.</li>
<li>브라우져는 form 태그를 만나면 HTTP 요청을 만듭니다.</li>
</ul>
<h3 id="참고-2"><a href="#%EC%B0%B8%EA%B3%A0-2" aria-label="참고 2 permalink"></a>참고</h3>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path">중요 렌더링 경로 | MDN</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/form">&lt;form&gt; | MDN</a></li>
</ul></div></article></div>

김정환 블로그 RSS Feed

김정환

2편 소개 웹 브라우져가 HTTP를 어떻게 사용하는지 이해할수 있습니다. 3장. 컨텐츠 협상: 웹브라우져가 서버와 데이터를 주고 받을 때 최적의 형태로 만들기 위한 매커니즘을 이해하실 수 있습니다.…

[HTTP] 2편. 브라우져

댓글