네트워크

네트워크 Browser 요청의 제한🌱 (HTTP/1.1, HTTP/2)

HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 브라우저에서 동시에 요청을 보내는 개수에 제한이 있습니다. 그래서 HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 외부 resource를 요청할때 예상치 못한 delay를 경험할 수 도 있습니다. css, js일 경우에는 inline으로 변경을 하거나 npm을 이용하거나 webpack과 code split을 적절히 이용, http/2 프로토콜로 변경, 브라우저 요청 제한은 한 도메인에만 해당하므로 여러 도메인에서의 요청으로 변경하면 이를 해결할 수 있습니다. * http/2는 nginx에 http2 모듈을 설치하면 적용할 수 있습니다. 아래의 글은 http/1.1을 이용할 때 브라우저에서의 요청 제한에 대해 알아보고 그 외에 의식의 흐름대로 ..

네트워크 JWT 🗝

JWT(Json Web Token)에 대해 알아보려 합니다. 이 글에서는 공식문서의 내용을 기반으로 제 경험을 섞을 것입니다. JWT란? JSON Web Token은 JSON 객체로 정보를 안전하게 전송하는 자체적인 방법을 정의한 표준입니다. 이 정보들은 디지털 서명이 되어있으므로 신뢰할 수 있습니다. 비밀키나 RSA 혹은 ECDSA를 사용한 공개/개인키를 사용하여 JWT는 서명되어 질수 있습니다. JWT를 사용하는 경우? 인증 : JWT를 쓰는 가장 흔한 경우입니다. 사용자가 로그인을 하면 이후의 연속된 요청들은 JWT를 포함하게 되고(헤더에 포함됨), user에게 routing, service 이용, 자원에 대한 접근을 허용합니다. jwt는 작은 overhead를 유발하고 다른 도메인간에 쉽게 사용될..

주소창에 www.google.com을 입력하면?(성공과 실패를 결정하는 1% 네트워크 원리)

간단하게 정리한 질문에 대한 답변 1. 유저가 브라우저에서 www.google.com을 입력하면 먼저 브라우저에서 HTTP request message를 생성합니다. 2. 이후 DNS lookup을 통해 보내야 하는 서버 주소 ip를 알아 옵니다. 3. HTTP 메시지를 TCP/IP층에 전달합니다. - TCP/IP 층에서는 HTTP 요청메시지에 자신들의 헤더를 추가하여 패킷을 생성합니다. - TCP층에서는 상대방의 포트, 나의 포트가 추가되고, TCP 연결을 위한 flag등이 헤더에 추가되고 - IP층에서는 상대방의 ip 주소, mac주소 등이 추가가 됩니다. 4. 패킷은 전기신호로 변환되어 랜선을 통해 라우터들을 거쳐 목적지 ip에 전달되게 됩니다. 5. 목적지 서버에서는 전달받은 패킷을 생성한 과정과..

네트워크 HTTP, HTTPS, SSL HandShake 😶‍🌫️

HTTP HTTP(Hyper Text Transfer Protocol)은 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 입니다. 웹 브라우저와 웹 서버간의 통신을 위해 디자인 되었습니다. HTTP 요청이 발생하면 브라우저는 HTTP 요청 메시지를 생성하고 TCP/IP 프로토콜을 이용하여 웹 서버에 요청을 전달합니다. 이후 브라우저는 웹 서버로부터 HTTP 응답을 전달 받습니다. HTTP요청 메시지는 크게 startline, 헤더와 바디로 구성되고 startline에는 메소드, 경로, 프로토콜의 버전이 추가됩니다. 헤더에는 요청에 설정한 HTTP 헤더들이 들어갑니다. 바디에는 POST 요청일 경우에 추가되고 다른 메서드의 경우에는 추가되지 않습니다. HTTP 응답 메시지에는 크게 sta..

네트워크 HTTP, HTTP 1.1, HTTP 2.0 🔥

HTTP HTTP(Hyper Text Transfer Protocol)은 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 입니다. 웹 브라우저와 웹 서버간의 통신을 위해 디자인 되었습니다. HTTP 요청이 발생하면 브라우저는 HTTP 요청 메시지를 생성하고 TCP/IP 프로토콜을 이용하여 웹 서버에 요청을 전달합니다. 이후 브라우저는 웹 서버로부터 HTTP 응답을 전달 받습니다. HTTP요청 메시지는 크게 startline, 헤더와 바디로 구성되고 startline에는 메소드, 경로, 프로토콜의 버전이 추가됩니다. 헤더에는 요청에 설정한 HTTP 헤더들이 들어갑니다. 바디에는 POST 요청일 경우에 추가되고 다른 메서드의 경우에는 추가되지 않습니다. HTTP 응답 메시지에는 크게 sta..

html5, 웹 표준 및 웹 접근성 🔥

HTML5에서 추가된 내용 html 5에서는 doctype의 선언이 변경되었습니다. 기존에는 html의 태그가 그려지는 명세를 브라우저에게 알려주기 위해 doctype 뒤에 많은 것들이 추가되었으나 html5에서는 으로 html 태그 위에 추가해주어 선언해줄 수 있습니다. 이 태그를 추가해주지 않으면 호환 모드로 렌더링이 되어 화면에 다르게 보여질수가 있습니다. 플래시 없이 비디오 및 오디오 기능을 자체적으로 지원합니다. 애플에서 html5를 safari에서 지원하면서 플래시를 safari에서 지원하지 않기로 했을때 잡음이 심했습니다. 서버와의 소켓 통신을 지원하므로 서버와 양뱡향 통신이 가능해 졌습니다. 시맨틱 태그를 지원하기 위한 태그를 예를 들면 button, main, header, section..

쿠키, 세션 🔥

쿠키와 세션에 대한 정보를 알아보기 전에 http의 특징을 알아봐서 쿠키, 세션이 왜 필요한지를 알아야 합니다. http의 특징은 connectionless, stateless 입니다. connectionless(비연결지향) => 서버에서는 클라이언트의 요청에 대한 응답을 하고 클라이언트와의 연결을 끊습니다. http 1.0 에서는 TCP프로토콜을 이용한 요청이 3번 있다면 3-way handshake/4-way handshake 3번을 매번 수행했어야 했습니다. 그래서 http 1.1 에서는 Connection 헤더에 keep-alive라고 설정하면 컨넥션을 유지할 수 있었습니다. stateless(상태를 가지고 있지 않음) => http 통신은 요청을 응답하고 접속을 끊기 때문에 클라이언트의 상태정보..

CORS 🔥

웹 보안에는 동일 출처 정책이 존재합니다. 동일 출처 정책에서는 어떤 출처에서 불러온 문서나 스크립트의 출처 경로가 같아야 합니다. 이때 경로의 같음은 프로토콜/호스트/포트 등을 비교합니다. 이 경로가 모두 같아야 같은 출처라고 인식하여 문제가 발생하지 않습니다. SOP(Same-Origin Policy) 원칙하에 다른 출처의 리소스를 가져올때 필요한 체제가 CORS(Cross Origin Resource Sharing) 입니다. cors는 브라우저에서 비교하고 판단합니다. 출처가 다른 요청이여도 서버에서는 요청을 받고 정상적인 응답을 보내줍니다. 하지만 브라우저에서 다른 출처에서온 경우 해당 응답을 reject 합니다. cors 체제하에서 요청은 크게 두개의 종류로 나뉘어 집니다. 단순 요청 사전 요청..

OSI 7 layer 🌱

네트워크에는 osi 7 layer 라는 개념이 존재합니다. 네트워크에서 통신이 일어나는 과저을 7계층으로 표현한 것입니다. 이렇게 7계층으로 표현을 함으로써 통신이 일어나는 과정을 단계별로 파악할 수 있습니다. 흐름을 한 눈에 알아보기 쉬워졌습니다. 에러 디버깅이 쉬워졌습니다(역할이 구분되어졌으므로 에러 발생시 특정계층에서만 에러를 수정하면 됩니다.) Application Layer 응용서비스 HTTP(웹), SMTP(메일) Presentation Layer 인코딩, 암호화, 압축 Session Layer TCP/IP 통신 연결을 위한 수립/유지/중단 Transport Layer TCP, UDP, l4 로드밸런서 Internet Layer IP통신, 라우터, l3 스위치/라우터 Data Link Laye..

로컬에서 CORS policy 관련 에러가 발생하는 이유 😃

로컬에서 html을 cli 환경에서 open 명령어로 실행 시켰을시 위와 같이 CORS Policy 관련 에러가 발생할 수 있습니다. 동일 출처 정책으로 인해 호스트, 포트, 프로토콜이 다른 url 으로부터의 응답은 script에서 받을 수 없습니다. 서버에서 응답을 주더라도 브라우저단에서 사용을 할 수 없게 됩니다. 위의 error는 vscode 환경에서 live server로 html 파일을 실행시키거나 http-server 패키지를 이용하면 해결할 수 있습니다. 그런데 왜 로컬에서 위와 같은 현상이 발생하는 것일까요??? 답은 script의 type 속성에 있습니다. 위의 코드는 예제에서 사용한 html 파일입니다. 실제로 type="module"을 제거하면 위의 에러는 발생하지 않습니다. 하지만..