CS/Web

로컬 스토리지와 세션 스토리지에 대해 정리하는 포스팅이다. 웹 개발자로써 무지를 반성하며 작성. 로컬 스토리지와 세션스토리지는 HTML5에서 추가된 저장소이다. 간단하게 key - value로 저장할 수 있다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이고 이것을 제외하고 모든 아래에서 예시와 자세히 알아보자. 1. 로컬 스토리지 로컬 스토리지는 사용자가 데이터를 지우지 않는 이상 브라우저에 계속 남아있다. 브라우저 탭을 닫아도 해당 주소에 다시 재접속하면 로컬스토리지에 저장된 데이터를 사용할 수 있다. 로컬 스토리지는 window.localstorage 로 접근하여 사용할 수 있다. 데이터 저장 및 조회 localStorage.setItem('name', '홍길동'); localStora..

쿠키와 세션을 사용하는 이유 HTTP는 기본적으로 무상태(Stateless) 프로토콜이다. 이말은 즉슨 클라이언트와 서버가 요청을 주고 받으면 연결이 끊어지게 되고 클라이언트가 다시 요청시 서버는 이전요청을 기억하지 못한다. 클라이언트와 서버는 서로 상태를 유지하지 않는다는 의미이다. 하지만 실제로는 상태를 유지해야 하는 경우가 많다. 예시로 로그인한 사용자만 접속할 수 있는 페이지가 있다고 가정하면 해당 페이지에 매번 접근할때마다 로그인을 다시 해야한다. 이렇게 Stateful한 경우를 대처하기 위해서 쿠키와 세션을 이용한다. 쿠키(Cookie) 특징 및 저장방식 key, value, expires(만료일), path 정보로 구성 클라이언트가 서버에서 받은 쿠키를 로컬(브라우저)에 저장하고, HTTP ..

브라우저의 동작원리와 렌더링 과정에 대해 정리해보고자 한다. 브라우저 동작 방식 브라우저(클라이언트)의 주소창에서 URL을 입력 URL 호스트명(도메인)이 DNS를 통해 IP 주소로 변환 브라우저(클라이언트)는 IP주소를 갖는 서버에게 요청을 전송 브라우저 렌더링 과정 렌더링 엔진이 HTML(index.html) 을 파싱하는 도중에 외부 리소스를 로드하는 태그, 즉 CSS파일을 로드하는 link 태그, 이미지파일을 로드하는 img 태그, 자바스크립트를 로드하는 script태그 등을 만나면 HTML파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청 이때 link 태그의 href 어트리뷰트를 통해 로드한 CSS 파일이나 style태그 내 CSS를 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM(CS..