<div id="readability-page-1" class="page"><div><div tabindex="-1" aria-hidden="false" role="tooltip"><a rel="noopener  ugc nofollow" href="/?source=post_page---byline--700ca60095fe---------------------------------------" data-discover="true"><div><p><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:64:64/2*5-DkBQYvxo0TLldXjX88Og.png" width="32" height="32" loading="lazy" data-testid="authorPhoto"></p></div></a></div><p id="c5be">http라는 영역은 매우 광범위하고 세부적으로 보자고 하면 엄청난 양의 학습이 필요하다. 다 살펴보고 정리해보면 좋겠지만 시간이 될 때마다 하나씩 더 해보는것으로 하고 이번 글은 프론트엔드 엔지니어로서 HTTP란 무엇인지 이정도는 알고 있으면 좋을법한 몇 가지만 정리해 본다.</p><figure><div role="button" tabindex="0"><p><span>Press enter or click to view image in full size</span></p></div><figcaption>Web</figcaption></figure><p id="df8d">HTTP(Hypertext Transfer Protocol)는 웹 클라이언트와 웹 서버 간에 데이터를 주고받는 데 사용되는 프로토콜이다.</p><h3 id="6cd8">그럼 프로토콜은?</h3><p id="166a">네트워크에서 데이터를 주고받을 때 지켜야 하는 규칙과 절차이다. 초기 컴퓨터 시대에는 컴퓨터 제조사 마다 서로 다른 방식으로 통신했다. 서로 다른 통신방식으로 인해 생기는 문제를 해결하기 위해 표준화된 통신 규칙을 만들기 시작했다. 이것이 프로토콜이고, 그 중 하나가 HTTP 프로토콜이다. 이 프로토콜이 정립되면서 인터넷의 기초가 되었다.</p><p id="781d">꽤 다양한 프로토콜이 존재한다.</p><p id="197f">HTTP (HyperText Transfer Protocol):</p><ul><li id="3702">웹 페이지와 다른 웹 리소스를 전송하기 위한 프로토콜.</li><li id="0643">주로 웹 브라우저와 웹 서버 간의 통신에 사용된다.</li><li id="c44a">무상태 프로토콜로서 요청간 상태 유지가 되지 않는다.</li><li id="0f1d">헤더를 통해 통신 방법, 캐시, 쿠키, 데이터 타입 등의 정보를 담는다.</li></ul><p id="ff81">HTTPS(HTTP Secure):</p><ul><li id="1fea">HTTP에 SSL/TLS 보안 프로토콜을 추가한 것.</li><li id="0ca0">데이터 암호화를 통해 보안을 강화한 웹 통신 프로토콜.</li></ul><p id="33a7">TCP (Transmission Control Protocol):</p><ul><li id="bdae">인터넷상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 사용되는 프로토콜.</li><li id="de95">신뢰성 있는 데이터 전송을 보장함.</li><li id="8c21">양방향 통신을 할 수 있음.</li><li id="502e">3-way handshaking을 통해 통신 상태를 확인한 후 가능하면 연결을 유지하여 실시간 통신을 할 수 있다.</li><li id="e30f">헤더에 port, 시퀀스 번호, 데이터 오프셋 등의 정보를 담는다.</li></ul><p id="4680">UDP (User Datagram Protocol):</p><ul><li id="4ca9">TCP보다 단순하고 빠르지만, 신뢰성이 낮은 통신 프로토콜입니다.</li><li id="34ea">스트리밍 서비스나 온라인 게임에서 많이 사용됩니다.</li></ul><p id="fcc3">IP (Internet Protocol):</p><ul><li id="2cae">인터넷상에서 데이터 패킷을 전송하기 위한 기본 프로토콜입니다.</li><li id="bf8c">각 장치에 IP 주소를 할당하여 통신을 가능하게 합니다.</li></ul><p id="977e">FTP (File Transfer Protocol):</p><ul><li id="8927">파일을 컴퓨터 네트워크를 통해 전송하기 위한 프로토콜입니다.</li><li id="5d55">서버와 클라이언트 간 파일 전송에 사용됩니다.</li></ul><p id="0eab">SMTP (Simple Mail Transfer Protocol):</p><ul><li id="13b2">이메일 전송을 위한 프로토콜입니다.</li><li id="ba24">이메일 서버 간 또는 클라이언트에서 서버로 이메일을 보낼 때 사용됩니다.</li></ul><h3 id="3ac6">그럼 Hypertext는 뭐지?</h3><p id="60b3">하이퍼텍스트는 참조를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 주로 컴퓨터나 다른 전자기기들을 통해 표시된다.(<a href="https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8" rel="noopener ugc nofollow" target="_blank">위키백과</a>)</p><p id="ada5">이 문서를 작성할 수 있도록 만든 언어가 <a href="https://developer.mozilla.org/ko/docs/Web/HTML" rel="noopener ugc nofollow" target="_blank">HTML</a>(HyperText Markup Language)이다. 아래는 HTML만으로 이루어진 최초의 웹사이트 모습니다.</p><figure><div role="button" tabindex="0"><p><span>Press enter or click to view image in full size</span></p></div><figcaption>1990년 팀 버너스리가 만든 웹사이트(<a href="https://info.cern.ch/" rel="noopener ugc nofollow" target="_blank">https://info.cern.ch/</a>)</figcaption></figure><p id="7792">잠시,</p><h3 id="ed82"><a href="https://ko.wikipedia.org/wiki/%ED%8C%80_%EB%B2%84%EB%84%88%EC%8A%A4%EB%A6%AC" rel="noopener ugc nofollow" target="_blank">팀 버너스리</a>가 누군지 살펴보고 가자.</h3><p id="8a07"><strong>팀 버너스리 경</strong>(<a href="https://ko.wikipedia.org/wiki/%EC%98%81%EC%96%B4" rel="noopener ugc nofollow" target="_blank">영어</a>: Sir Tim Berners-Lee, <a href="https://ko.wikipedia.org/wiki/%EB%A9%94%EB%A6%AC%ED%8A%B8_%ED%9B%88%EC%9E%A5" rel="noopener ugc nofollow" target="_blank">OM</a>, <a href="https://ko.wikipedia.org/wiki/%EB%8C%80%EC%98%81_%EC%A0%9C%EA%B5%AD_%ED%9B%88%EC%9E%A5" rel="noopener ugc nofollow" target="_blank">KBE</a>, <a href="https://ko.wikipedia.org/wiki/%EC%99%95%EB%A6%BD%ED%95%99%ED%9A%8C" rel="noopener ugc nofollow" target="_blank">FRS</a>, <a href="https://ko.wikipedia.org/wiki/1955%EB%85%84" rel="noopener ugc nofollow" target="_blank">1955년</a> <a href="https://ko.wikipedia.org/wiki/6%EC%9B%94_8%EC%9D%BC" rel="noopener ugc nofollow" target="_blank">6월 8일</a> ~ )은 <a href="https://ko.wikipedia.org/wiki/%EC%98%81%EA%B5%AD" rel="noopener ugc nofollow" target="_blank">영국</a>의 <a href="https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99%EC%9E%90" rel="noopener ugc nofollow" target="_blank">컴퓨터 과학자</a>이다.</p><p id="0564">1989년 <a href="https://ko.wikipedia.org/wiki/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9" rel="noopener ugc nofollow" target="_blank">월드 와이드 웹</a>의 <a href="https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8" rel="noopener ugc nofollow" target="_blank">하이퍼텍스트</a> 시스템을 고안하여 개발했다. 인터넷의 기반을 닦은 여러 공로로 <strong>웹의 아버지</strong>라고 불리는 인물 중 하나이다.</p><p id="013d"><a href="https://ko.wikipedia.org/wiki/URL" rel="noopener ugc nofollow" target="_blank">URL</a>, <a href="https://ko.wikipedia.org/wiki/HTTP" rel="noopener ugc nofollow" target="_blank">HTTP</a>, <a href="https://ko.wikipedia.org/wiki/HTML" rel="noopener ugc nofollow" target="_blank">HTML</a> 최초 설계와 구현도 <a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%9F%BD_%EC%9E%85%EC%9E%90_%EB%AC%BC%EB%A6%AC_%EC%97%B0%EA%B5%AC%EC%86%8C" rel="noopener ugc nofollow" target="_blank">CERN</a> 시절에 동료였던 <a href="https://ko.wikipedia.org/wiki/%EB%A1%9C%EB%B2%A0%EB%A5%B4_%EC%B9%B4%EC%9D%B4%EC%98%A4" rel="noopener ugc nofollow" target="_blank">로베르 카이오</a>(Robert Cailliau) 등과 함께 그가 주도한 것이다.</p><p id="cc13">어릴 때부터 자연스럽게 인터넷을 접해온 분들에게는 놀랍게 느껴질 수 있겠지만, 인터넷의 역사는 생각보다 얼마되지 않아서 이렇게 웹의 창시자들이 역사책에만 있는것이 아니라 아직도 활발히 활동하고 있다.</p><p id="e277">이제,</p><p id="6d11">네트워크의 통신규약이 HTTP라는 것을 알았다. 이 네트워크라는 것은 매우 거대하고 복잡한 실체를 가지고 있지만, 개념적으로는 아래처럼 단순화된 개념(layer)로 설명될 수 있다.</p><h2 id="e4f8">OSI7 Layer Model</h2><p id="f725">네트워크 통신이 일어나는 과정을 7단계로 추상화 해놓은 개념이다. 국제표준화기구에서 1970년대 후반에 개발한 모델이다.</p><figure><div role="button" tabindex="0"><p><span>Press enter or click to view image in full size</span></p></div></figure><p id="2c0e">TCP/IP Model은 OSI7 Layer Model을 단순화 한 것으로 실제 인터넷 표준으로 사용되고 있다.</p><p id="75a0">4개 계층을 살펴보면,</p><ul><li id="6e32"><strong>응용 계층 (Application Layer)</strong> HTTP, FTP, SMTP 등과 같은 애플리케이션 프로토콜이 동작하는 계층. 사용자와 가장 가까운 계층으로, 실제 응용 프로그램들이 통신하는 방식을 정의한다.</li><li id="eb17"><strong>전송 계층 (Transport Layer)</strong> TCP와 UDP가 동작하는 계층. TCP는 신뢰성 있는 데이터 전송을 보장하고 양방향 통신이 가능하며, UDP는 더 빠르지만 신뢰성이 낮은 통신을 제공한다.</li><li id="b47b"><strong>인터넷 계층 (Internet Layer)</strong> IP 프로토콜이 동작하는 계층으로, 데이터 패킷의 라우팅과 전달을 담당. 각 장치에 IP 주소를 할당하여 통신을 가능하게 한다.</li><li id="f5bd"><strong>네트워크 접근 계층 (Network Access Layer)</strong> 물리적인 네트워크 하드웨어와 직접 상호작용하는 최하위 계층. TCP/IP 패킷을 네트워크 매체로 전달하는 것과 네트워크 매체에서 TCP/IP 패킷을 받아들이는 과정을 담당</li></ul><p id="fba0">HTTP와 TCP 두 가지 프로토콜은 서로다른 규약으로서 다른 프로토콜이지만, 실제 브라우저와 서버간 통신과정을 보면 이 두 가지가 상호작용한다는 것을 알 수 있다.</p><h2 id="3cbc"><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers" rel="noopener ugc nofollow" target="_blank">HTTP 헤더</a></h2><p id="0eaa">HTTP통신을 할때는 헤더에 정보를 넣어 주고 받게 된다. 이 정보들은 4가지 그룹으로 범주화 할 수 있다.</p><ul><li id="45e9"><a href="https://developer.mozilla.org/ko/docs/Glossary/General_header" rel="noopener ugc nofollow" target="_blank">General header</a>: 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련이 없는 헤더.</li><li id="1d8c"><a href="https://developer.mozilla.org/ko/docs/Glossary/Request_header" rel="noopener ugc nofollow" target="_blank">Request header</a>: 페치될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더.</li><li id="f06d"><a href="https://developer.mozilla.org/ko/docs/Glossary/Response_header" rel="noopener ugc nofollow" target="_blank">Response header</a>: 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더.</li><li id="e857"><a href="https://developer.mozilla.org/ko/docs/Glossary/Entity_header" rel="noopener ugc nofollow" target="_blank">Entity header</a>: 컨텐츠 길이나 MIME 타입과 같이 엔티티 바디에 대한 자세한 정보를 포함하는 헤더.</li></ul><p id="98f5">헤더에서 다루는 정보들</p><p id="b3ca">인증, 캐싱, 클라리언트 힌트, 조건부, 연결관리, 컨텐츠 협상, 제어, 쿠키, CORS, 메시지 바디, 프록시, 웹소켓, 보안 등이 있다. 이 중에서 우리가 자주보거나 조금은 다뤄야 할것들은 인증, 캐시, CORS 정도는 될것이다.</p><p id="ab81">하지만 오늘은 CORS까지만 정리를 해보고자 한다.</p><h2 id="31ed"><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/CORS" rel="noopener ugc nofollow" target="_blank">CORS란</a></h2><p id="735f">우리말로 하면 서로 다른 오리진 간의 리소스 공유? (Cross-Origin Resource Sharing, <a href="https://developer.mozilla.org/ko/docs/Glossary/CORS" rel="noopener ugc nofollow" target="_blank">CORS</a>)는 브라우저가 자신의 출처가 아닌 다른 어떤 <a href="https://developer.mozilla.org/ko/docs/Glossary/Origin" rel="noopener ugc nofollow" target="_blank">출처</a>(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 <a href="https://developer.mozilla.org/ko/docs/Glossary/HTTP" rel="noopener ugc nofollow" target="_blank">HTTP</a> 헤더 기반 메커니즘이다. 사전요청(Prefilight)메커니즘을 통해 실제 요청을 허가할 것인지 확인한다.</p><p id="9a2b">오리진(Origin)이란?</p><p id="7a3c">서버의 이름으로서 아래와 같이 표시한다.</p><p id="9a4b"><code>&lt;Scheme&gt;://&lt;hostname&gt;:&lt;port&gt;</code></p><ul><li id="3887">scheme는 프로토콜. htttp or https</li><li id="a989">hostname은 아이피 혹은 도메인(서버(가상 호스팅)의 이름)</li><li id="847e">port: 서버와 연결을 맺기 위한 TCP 포트 번호. 포트번호를 입력하지 않으면, 요청한 서비스의 기본 포트(HTTP의 경우 “80”)가 사용</li></ul><p id="8582">CORS 헤더정보 : http 헤더 정보중에서 CORS 와 관련된 정보는 아래와 같다.</p><ul><li id="d3df"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin" rel="noopener ugc nofollow" target="_blank">Access-Control-Allow-Origin</a></code>응답이 공유될 수 있는지를 나타낸다.</li><li id="a2cc"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Credentials" rel="noopener ugc nofollow" target="_blank">Access-Control-Allow-Credentials</a></code>credentials 플래그가 true일 때 요청에 대한 응답이 노출될 수 있는지를 나타낸다.</li><li id="bb05"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Headers" rel="noopener ugc nofollow" target="_blank">Access-Control-Allow-Headers</a></code>실제 요청을 만들 때 사용될 수 있는 HTTP 헤더를 나타내는 preflight 요청에 대한 응답으로 사용된다.</li><li id="8a83"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Methods" rel="noopener ugc nofollow" target="_blank">Access-Control-Allow-Methods</a></code>preflight 요청에 대한 응답으로 리소스에 접근할 때 허용되는 메소드를 명시한다.</li><li id="c455"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Expose-Headers" rel="noopener ugc nofollow" target="_blank">Access-Control-Expose-Headers</a></code>헤더의 이름을 나열하여 어떤 헤더가 응답의 일부로 노출될 수 있는지를 나타낸다.</li><li id="2aeb"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Max-Age" rel="noopener ugc nofollow" target="_blank">Access-Control-Max-Age</a></code>preflight 요청의 결과가 캐시되는 기간을 나타낸다.</li><li id="2d25"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Request-Headers" rel="noopener ugc nofollow" target="_blank">Access-Control-Request-Headers</a></code>실제 요청이 있을 때 사용될 HTTP 헤더를 서버에 알리기 위한 preflight 요청을 보낼 때 사용된다.</li><li id="5fd8"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Access-Control-Request-Method" rel="noopener ugc nofollow" target="_blank">Access-Control-Request-Method</a></code>실제 요청이 있을 때 사용될 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Methods" rel="noopener ugc nofollow" target="_blank">HTTP 메소드</a>를 서버에 알리기 위한 preflight 요청을 보낼 때 사용된다.</li><li id="08bd"><code><a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Origin" rel="noopener ugc nofollow" target="_blank">Origin</a></code>페치가 시작된 위치를 나타낸다.</li><li id="fbef"><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Timing-Allow-Origin" rel="noopener ugc nofollow" target="_blank">Timing-Allow-Origin</a></code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing" rel="noopener ugc nofollow" target="_blank">Resource Timing API</a>의 기능을 통해 반환되는 속성을 확인할 수 있게해주는 오리진을 명시합니다. 교차-오리진 제한으로인해 0으로 기록될 수도 있다.</li><li id="4208"><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Permitted-Cross-Domain-Policies" rel="noopener ugc nofollow" target="_blank">X-Permitted-Cross-Domain-Policies</a></code>교차-도메인 정책 파일(XML)이 허용되었는지를 명시합니다. 해당 파일은 Adobe Flash Player 또는 Adobe Acrobat(예, PDF)과 같은 웹 클라이언트가 도메인을 넘어 데이터를 다룰 수 있도록 허용하는 정책을 정의할수도 있다.</li></ul><h3 id="2c24">더 알아보고 싶은 내용들</h3><ul><li id="3f39">http 헤더의 내용들 중 인증과 캐시에 대한 내용</li><li id="184c">현업에서 만나는 CORS의 다양한 이슈들과 Preflight에 대한 자세한 내용</li></ul></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

http라는 영역은 매우 광범위하고 세부적으로 보자고 하면 엄청난 양의 학습이 필요하다. 다 살펴보고 정리해보면 좋겠지만 시간이 될 때마다 하나씩 더 해보는것으로 하고 이번 글은 프론트엔드 엔지니어로서 HTTP란 무엇인지 이정도는 알고 있으면 좋을법한 몇 가지만 정리해 본다.
HTTP(Hypertext Transfer Protocol)는 웹 클라이언트와 웹 서버 간에 데이터를 주고받는 데 사용되는 프로토콜이다.
그럼 프로토콜은?
네트워크에서 데이터를 주고받을 때 지켜야 하는 규칙과 절차이다. 초기 컴퓨터 시대에는 컴퓨터 제조사 마다 서로 다른 방식으로 통신했다. 서로 다른 통신방식으로 인해 생기는 문제를 해결하기 위해 표준화된 통신 규칙을 만들기 시작했다. 이것이 프로토콜이고, 그 중 하나가 HTTP 프로토콜이다. 이 프로토콜이 정립되면서 인터넷의 기초가 되었다.
꽤 다양한 프로토콜이 존재한다.
HTTP (HyperText Transfer Protocol):
웹 페이지와 다른 웹 리소스를 전송하기 위한 프로토콜.
주로 웹 브라우저와 웹 서버 간의 통신에 사용된다.
무상태 프로토콜로서 요청간 상태 유지가 되지 않는다.
헤더를 통해 통신 방법, 캐시, 쿠키, 데이터 타입 등의 정보를 담는다.
HTTPS(HTTP Secure):
HTTP에 SSL/TLS 보안 프로토콜을 추가한 것.
데이터 암호화를 통해 보안을 강화한 웹 통신 프로토콜.
TCP (Transmission Control Protocol):
인터넷상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 사용되는 프로토콜.
신뢰성 있는 데이터 전송을 보장함.
양방향 통신을 할 수 있음.
3-way handshaking을 통해 통신 상태를 확인한 후 가능하면 연결을 유지하여 실시간 통신을 할 수 있다.
헤더에 port, 시퀀스 번호, 데이터 오프셋 등의 정보를 담는다.
UDP (User Datagram Protocol):
TCP보다 단순하고 빠르지만, 신뢰성이 낮은 통신 프로토콜입니다.
스트리밍 서비스나 온라인 게임에서 많이 사용됩니다.
IP (Internet Protocol):
인터넷상에서 데이터 패킷을 전송하기 위한 기본 프로토콜입니다.
각 장치에 IP 주소를 할당하여 통신을 가능하게 합니다.
FTP (File Transfer Protocol):
파일을 컴퓨터 네트워크를 통해 전송하기 위한 프로토콜입니다.
서버와 클라이언트 간 파일 전송에 사용됩니다.
SMTP (Simple Mail Transfer Protocol):
이메일 전송을 위한 프로토콜입니다.
이메일 서버 간 또는 클라이언트에서 서버로 이메일을 보낼 때 사용됩니다.
그럼 Hypertext는 뭐지?
하이퍼텍스트는 참조를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 주로 컴퓨터나 다른 전자기기들을 통해 표시된다.(위키백과)
이 문서를 작성할 수 있도록 만든 언어가 HTML(HyperText Markup Language)이다. 아래는 HTML만으로 이루어진 최초의 웹사이트 모습니다.
잠시,
팀 버너스리가 누군지 살펴보고 가자.
팀 버너스리 경(영어: Sir Tim Berners-Lee, OM, KBE, FRS, 1955년 6월 8일 ~ )은 영국의 컴퓨터 과학자이다.
1989년 월드 와이드 웹의 하이퍼텍스트 시스템을 고안하여 개발했다. 인터넷의 기반을 닦은 여러 공로로 웹의 아버지라고 불리는 인물 중 하나이다.
URL, HTTP, HTML 최초 설계와 구현도 CERN 시절에 동료였던 로베르 카이오(Robert Cailliau) 등과 함께 그가 주도한 것이다.
어릴 때부터 자연스럽게 인터넷을 접해온 분들에게는 놀랍게 느껴질 수 있겠지만, 인터넷의 역사는 생각보다 얼마되지 않아서 이렇게 웹의 창시자들이 역사책에만 있는것이 아니라 아직도 활발히 활동하고 있다.
이제,
네트워크의 통신규약이 HTTP라는 것을 알았다. 이 네트워크라는 것은 매우 거대하고 복잡한 실체를 가지고 있지만, 개념적으로는 아래처럼 단순화된 개념(layer)로 설명될 수 있다.
OSI7 Layer Model
네트워크 통신이 일어나는 과정을 7단계로 추상화 해놓은 개념이다. 국제표준화기구에서 1970년대 후반에 개발한 모델이다.
TCP/IP Model은 OSI7 Layer Model을 단순화 한 것으로 실제 인터넷 표준으로 사용되고 있다.
4개 계층을 살펴보면,
응용 계층 (Application Layer) HTTP, FTP, SMTP 등과 같은 애플리케이션 프로토콜이 동작하는 계층. 사용자와 가장 가까운 계층으로, 실제 응용 프로그램들이 통신하는 방식을 정의한다.
전송 계층 (Transport Layer) TCP와 UDP가 동작하는 계층. TCP는 신뢰성 있는 데이터 전송을 보장하고 양방향 통신이 가능하며, UDP는 더 빠르지만 신뢰성이 낮은 통신을 제공한다.
인터넷 계층 (Internet Layer) IP 프로토콜이 동작하는 계층으로, 데이터 패킷의 라우팅과 전달을 담당. 각 장치에 IP 주소를 할당하여 통신을 가능하게 한다.
네트워크 접근 계층 (Network Access Layer) 물리적인 네트워크 하드웨어와 직접 상호작용하는 최하위 계층. TCP/IP 패킷을 네트워크 매체로 전달하는 것과 네트워크 매체에서 TCP/IP 패킷을 받아들이는 과정을 담당
HTTP와 TCP 두 가지 프로토콜은 서로다른 규약으로서 다른 프로토콜이지만, 실제 브라우저와 서버간 통신과정을 보면 이 두 가지가 상호작용한다는 것을 알 수 있다.
HTTP 헤더
HTTP통신을 할때는 헤더에 정보를 넣어 주고 받게 된다. 이 정보들은 4가지 그룹으로 범주화 할 수 있다.
General header: 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련이 없는 헤더.
Request header: 페치될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더.
Response header: 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더.
Entity header: 컨텐츠 길이나 MIME 타입과 같이 엔티티 바디에 대한 자세한 정보를 포함하는 헤더.
헤더에서 다루는 정보들
인증, 캐싱, 클라리언트 힌트, 조건부, 연결관리, 컨텐츠 협상, 제어, 쿠키, CORS, 메시지 바디, 프록시, 웹소켓, 보안 등이 있다. 이 중에서 우리가 자주보거나 조금은 다뤄야 할것들은 인증, 캐시, CORS 정도는 될것이다.
하지만 오늘은 CORS까지만 정리를 해보고자 한다.
CORS란
우리말로 하면 서로 다른 오리진 간의 리소스 공유? (Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘이다. 사전요청(Prefilight)메커니즘을 통해 실제 요청을 허가할 것인지 확인한다.
오리진(Origin)이란?
서버의 이름으로서 아래와 같이 표시한다.
<Scheme>://<hostname>:<port>
scheme는 프로토콜. htttp or https
hostname은 아이피 혹은 도메인(서버(가상 호스팅)의 이름)
port: 서버와 연결을 맺기 위한 TCP 포트 번호. 포트번호를 입력하지 않으면, 요청한 서비스의 기본 포트(HTTP의 경우 “80”)가 사용
CORS 헤더정보 : http 헤더 정보중에서 CORS 와 관련된 정보는 아래와 같다.
Access-Control-Allow-Origin응답이 공유될 수 있는지를 나타낸다.
Access-Control-Allow-Credentialscredentials 플래그가 true일 때 요청에 대한 응답이 노출될 수 있는지를 나타낸다.
Access-Control-Allow-Headers실제 요청을 만들 때 사용될 수 있는 HTTP 헤더를 나타내는 preflight 요청에 대한 응답으로 사용된다.
Access-Control-Allow-Methodspreflight 요청에 대한 응답으로 리소스에 접근할 때 허용되는 메소드를 명시한다.
Access-Control-Expose-Headers헤더의 이름을 나열하여 어떤 헤더가 응답의 일부로 노출될 수 있는지를 나타낸다.
Access-Control-Max-Agepreflight 요청의 결과가 캐시되는 기간을 나타낸다.
Access-Control-Request-Headers실제 요청이 있을 때 사용될 HTTP 헤더를 서버에 알리기 위한 preflight 요청을 보낼 때 사용된다.
Access-Control-Request-Method실제 요청이 있을 때 사용될 HTTP 메소드를 서버에 알리기 위한 preflight 요청을 보낼 때 사용된다.
Origin페치가 시작된 위치를 나타낸다.
Timing-Allow-OriginResource Timing API의 기능을 통해 반환되는 속성을 확인할 수 있게해주는 오리진을 명시합니다. 교차-오리진 제한으로인해 0으로 기록될 수도 있다.
X-Permitted-Cross-Domain-Policies교차-도메인 정책 파일(XML)이 허용되었는지를 명시합니다. 해당 파일은 Adobe Flash Player 또는 Adobe Acrobat(예, PDF)과 같은 웹 클라이언트가 도메인을 넘어 데이터를 다룰 수 있도록 허용하는 정책을 정의할수도 있다.
더 알아보고 싶은 내용들
http 헤더의 내용들 중 인증과 캐시에 대한 내용
현업에서 만나는 CORS의 다양한 이슈들과 Preflight에 대한 자세한 내용

HTTP가 뭐지?

댓글