웹 브라우저의 동작 순서 사용자가 브라우저에 도메인 입력(ex. https://www.naver.com) 웹 브라우저는 DNS에 입력된 도메인의 IP 주소를 요청 해당 IP주소에 해당하는 서버로 접근(이때, random sequence 번호를 가지고 접근) 서버에서 브라우저에 번호에 1을 더하여 응답(random sequence + 1) 브라우저에서 다시 서버에 1을 더하여 응답 (3, 4, 5 과정을 3 Way-Handshake 라고 한다. 브라우저가 서버에게 자신의 존재를 알리고 -> 서버는 브라우저의 존재를 확인했다는 사실 + 자신의 존재를 알리는 신호를 브라우저에 보냄 -> 브라우저는 서버의 존재를 확인했다는 신호를 서버에 다시 보냄 ===> 위 세 과정을 통해 브라우저와 서버간의 TCP 연결이 성립된다.) 브라우저 렌더링 과정 Refference 웹 브라우저의 동작 순서(유튜브)

Web Storage HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. Web Storage의 개념은 key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 맞게 선택이 가능하다. Web Storage는 기존 Cookie와 매우 유사한 개념이다. 몇 가지 쿠키의 단점을 보완하기 위해 도입되었다. Web Storage와 Cookie의 차이점 쿠키는 매번 서버로 전송된다. 웹사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. 단순 문자열을 넘어 객체정보를 저장할 수 있다. 문자열 기반 데이터이 외에 구조화된 객체를 저장할 수 있다. 제한 용량이 쿠키에 비해 자유롭다. 쿠키는 개수와 용량에 제한이 있다. 하나의 사…

Webpack(웹팩) 이란? 현대 Javascript Application의 Static Module Bundler 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것을 말한다. Bundle(번들) 이란? 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package Webpack을 사용하는 이유 연관되어 있는 자바스크립트 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 걸리는 시간을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능을 최적화 해준다. 다른 Module Bundler도 많이 존재하지만, performance가 우수하다. Babel(바벨) 이란? ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저 내에서 동작할 수 있도록 하는…

GET 이란? GET은 지정된 리소스에서 데이터를 요청하는데 사용되는 HTTP Method GET 요청의 특징 Browser history에 남아있다. 북마크가 가능하다. 민감한 데이터를 처리할 때 GET을 사용하지 않는다. (보안) 데이터 요청에만 사용된다. POST 란? 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용된다. POST 요청의 특징 Browser history에 남아있지 않는다. 북마크 불가능 데이터 길이에 대한 제한이 없다. 궁금증 Browser history가 무엇일까? (개발할 때 사용하던 history가 이 history인가?) 북마크가 무엇일까? 흔히들 사용하는 북마크기능을 말하는 것일까? POST 요청은 데이터 길이에 제한이 없다고 하는데 아예 없는 것일까? (vs GET에 비해 비교적 프리한 것인가?) 궁금한건 직접 해봐야지 Refference: https://www.w3schools.com/tags/ref_httpmethods.…