<div id="readability-page-1" class="page"><div tabindex="-1" id="___gatsby"><main><div itemscope="" itemtype="http://schema.org/BlogPosting"><section><main><article><div id="post-content" itemprop="articleBody"><p><em>4편 소개</em></p>
<ul>
<li>HTTP의 비연결성을 극복하는 다양한 기술</li>
<li><strong>9장. 폴링</strong>: 클라이언트가 주기적으로 서버에 요청을 보내서 새로운 데이터를 확인하는 방법</li>
<li><strong>10장. 롱 폴링</strong>: 폴링 보다 호율적인 통신 기법</li>
<li><strong>11장. SSE</strong>: 서버가 클라이언트로 실시간 데이터를 푸시하는 방법</li>
<li><strong>12장. 웹 소켓</strong>: 클라이언트와 서버 간의 양방향 통신 프로토콜</li>
</ul>
<h2 id="9장-폴링"><a href="#9%EC%9E%A5-%ED%8F%B4%EB%A7%81" aria-label="9장 폴링 permalink"></a>9장. 폴링</h2>
<h2 id="91-구조"><a href="#91-%EA%B5%AC%EC%A1%B0" aria-label="91 구조 permalink"></a>9.1 구조</h2>
<ul>
<li>지속적인 요청으로 서버와 연결을 유지한다.</li>
<li>네트웍 대역폭과 서버 자원을 낭비할 수 있다</li>
<li>비유: 새로운 소식이 있나요?</li>
</ul>
<h2 id="92-서버-구현"><a href="#92-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84" aria-label="92 서버 구현 permalink"></a>9.2 서버 구현</h2>
<ul>
<li>채팅 어플리케이션 제작</li>
<li>채팅 메세지 조회 기능</li>
<li>채팅 메세지 전송 기능</li>
</ul>
<h2 id="93-클라이언트-구현"><a href="#93-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EA%B5%AC%ED%98%84" aria-label="93 클라이언트 구현 permalink"></a>9.3 클라이언트 구현</h2>
<ul>
<li>지속적으로 요청을 생성</li>
<li>수신한 메세지를 출력</li>
</ul>
<h2 id="94-중간정리"><a href="#94-%EC%A4%91%EA%B0%84%EC%A0%95%EB%A6%AC" aria-label="94 중간정리 permalink"></a>9.4 중간정리</h2>
<ul>
<li>HTTP 연결을 유지하기 위해 주기적으로 요청을 만드는 기법</li>
<li>특징: 단순한 구현</li>
<li>주의사항 1: 네트웍과 서버 자원을 낭비할 수 있다.</li>
<li>주의사항 2: 지연 시간</li>
</ul>
<h3 id="참고"><a href="#%EC%B0%B8%EA%B3%A0" aria-label="참고 permalink"></a>참고</h3>
<ul>
<li><a href="https://ko.javascript.info/long-polling">롱 폴링 | JAVASCRIPT.INFO</a></li>
</ul>
<h2 id="10장-롱-폴링"><a href="#10%EC%9E%A5-%EB%A1%B1-%ED%8F%B4%EB%A7%81" aria-label="10장 롱 폴링 permalink"></a>10장. 롱 폴링</h2>
<h2 id="101-구조"><a href="#101-%EA%B5%AC%EC%A1%B0" aria-label="101 구조 permalink"></a>10.1 구조</h2>
<ul>
<li>서버에 요청하고 데이터가 올 때까지 대기한다.</li>
<li>서버 자원을 낭비할 수 있다.</li>
<li>비유: 새로운 소식이 있나요? 잠깐 기다려 보세요.</li>
</ul>
<h2 id="102-서버-구현"><a href="#102-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84" aria-label="102 서버 구현 permalink"></a>10.2 서버 구현</h2>
<ul>
<li>클라이언트 대기열 준비</li>
<li>채팅 메세지 조회 기능</li>
<li>채팅 메세지 추가 기능</li>
</ul>
<h2 id="103-클라이언트-구현"><a href="#103-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EA%B5%AC%ED%98%84" aria-label="103 클라이언트 구현 permalink"></a>10.3 클라이언트 구현</h2>
<ul>
<li>지속적으로 요청 생성</li>
<li>수신한 메세지를 출력</li>
</ul>
<h2 id="104-중간-정리"><a href="#104-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="104 중간 정리 permalink"></a>10.4 중간 정리</h2>
<ul>
<li>HTTP 연결을 유지하기 위해 응답을 지연하는 기법</li>
<li>특징: 실시간성</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="https://ko.javascript.info/long-polling">롱 폴링 | JAVASCRITP.INFO</a></li>
</ul>
<h2 id="11장-sse"><a href="#11%EC%9E%A5-sse" aria-label="11장 sse permalink"></a>11장. SSE</h2>
<h2 id="111-구조"><a href="#111-%EA%B5%AC%EC%A1%B0" aria-label="111 구조 permalink"></a>11.1 구조</h2>
<ul>
<li>서버가 실시시간으로 메세지를 보낸다.</li>
<li>리소스를 효율적으로 사용할 수 있다.</li>
<li>비유: 새 소식이 오면 알려주세요.</li>
</ul>
<h2 id="112-서버-구현"><a href="#112-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84" aria-label="112 서버 구현 permalink"></a>11.2 서버 구현</h2>
<ul>
<li>클라이언트 대기열 준비</li>
<li>알림 구독 기능</li>
<li>채팅 메세지 추가 기능</li>
</ul>
<h2 id="113-클라이언트-구현"><a href="#113-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EA%B5%AC%ED%98%84" aria-label="113 클라이언트 구현 permalink"></a>11.3 클라이언트 구현</h2>
<ul>
<li>EventSource</li>
<li>수신한 메세지를 출력</li>
</ul>
<h2 id="114-재연결"><a href="#114-%EC%9E%AC%EC%97%B0%EA%B2%B0" aria-label="114 재연결 permalink"></a>11.4 재연결</h2>
<ul>
<li>EventSource 객체는 서버와 연결이 끊기면 다시 연결. retry로 설정</li>
<li>이전에 받은 메세지가 있다면 last-event-id 헤더에 값을 실어서 보낸다.</li>
</ul>
<h2 id="115-중간-정리"><a href="#115-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="115 중간 정리 permalink"></a>11.5 중간 정리</h2>
<ul>
<li>클라이언트와 서버 연결 유지 및 실시간 메세지 전송 기법</li>
<li>EventSource</li>
<li>특징: 실시간 알림을 위한 프로토콜</li>
<li>주의사항: 단방향 메세지</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://ko.javascript.info/server-sent-events">Server Sent Events | JAVASCRIPT.INFO</a></li>
</ul>
<h2 id="12장-웹-소켓"><a href="#12%EC%9E%A5-%EC%9B%B9-%EC%86%8C%EC%BC%93" aria-label="12장 웹 소켓 permalink"></a>12장. 웹 소켓</h2>
<h2 id="121-구조"><a href="#121-%EA%B5%AC%EC%A1%B0" aria-label="121 구조 permalink"></a>12.1 구조</h2>
<ul>
<li>HTTP 단방향성의 한계</li>
<li>웹 소켓 프로토콜</li>
<li>WebSocket API</li>
</ul>
<h2 id="122-서버-구현"><a href="#122-%EC%84%9C%EB%B2%84-%EA%B5%AC%ED%98%84" aria-label="122 서버 구현 permalink"></a>12.2 서버 구현</h2>
<ul>
<li>웹소켓을 웹서버와 통합</li>
<li>클라이언트 대기열 준비</li>
<li>채팅 기능 구현</li>
</ul>
<h2 id="123-클라이언트-구현"><a href="#123-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EA%B5%AC%ED%98%84" aria-label="123 클라이언트 구현 permalink"></a>12.3 클라이언트 구현</h2>
<ul>
<li>채팅 UI</li>
<li>웹 소켓 연결</li>
<li>수신한 메세지를 출력</li>
<li>메세지 전송</li>
</ul>
<h2 id="124-중간-정리"><a href="#124-%EC%A4%91%EA%B0%84-%EC%A0%95%EB%A6%AC" aria-label="124 중간 정리 permalink"></a>12.4 중간 정리</h2>
<ul>
<li>웹 소켓 프로토콜</li>
<li>WebSocket API</li>
<li>특징: 실시간 양방향 통신</li>
<li>주의사항: 연결 관리</li>
</ul>
<h3 id="참고-3"><a href="#%EC%B0%B8%EA%B3%A0-3" aria-label="참고 3 permalink"></a>참고</h3>
<ul>
<li><a href="https://ko.javascript.info/websocket">웹 소켓 | JAVASCRIPT.INFO</a></li>
</ul></div></article></main></section></div></main></div></div>

김정환 블로그 RSS Feed

김정환

4편 소개 HTTP의 비연결성을 극복하는 다양한 기술 9장. 폴링: 클라이언트가 주기적으로 서버에 요청을 보내서 새로운 데이터를 확인하는 방법 10장. 롱 폴링: 폴링 보다 호율적인 통신 기법 11장. SSE…

[HTTP] 4편. 추가 프로토콜

댓글