Coding/Front-end (3) 썸네일형 리스트형 클라이언트사이드 렌더링(CSR) vs. 서버사이드 렌더링(SSR) 초심플하게 말하면, 서버에서 페이지 html을 완성해 클라이언트에 전달하면 서버사이드 렌더링, 클라이언트에서 페이지HTML을 완성해 클라이언트에 전달하면 클라이언트 사이드 렌더링이다. 서버 사이드 렌더링 서버사이드 렌더링은 매 요청마다 페이지 전체를 렌더 하기 때문에 새로고침이 발생하고 트래픽이 증가한다. 사용자가 느끼기에는 작동은 되지 않지만 정적인 화면을 빠르게 렌더해 보여주기 때문에 첫 로딩 속도가 상대적으로 속도가 빠르다고 느낄 수 있다. asp, jsp, php 클라이언트 사이드 렌더링 이에 비해 클라이언트 사이드 렌더링은 HTML과 자바스크립트 파일 등을 로드한 후 브라우저에서 렌더링을 하므로 상대적으로 초기 로딩 속도는 서버사이드 렌더링 오래 걸린다. 하지만 이후로는 서버로부터 페이지를 다시.. 쿠키, 로컬스토리지, 세션스토리지 비교해보기 헷갈리기 쉬운 쿠키, 로컬 스토리지, 세션 스토리지의 공통점과 차이점은 뭘까? 각각의 항목별 특징을 표로 만든 자료를 보면 비교가 쉽다. 쿠키, 로컬스토리지, 세션 스토리지 모두 데이터를 저장하는 저장소이며, 'key-value' 값으로 데이터를 저장한다. 이때 모든 key와 value는 항상 string으로 저장된다. (object와 integer 등도 string으로 자동 변환됨.) 이 세 가지 저장소의 가장 큰 차이점은 데이터의 보관 기간이라고 할 수 있는데, 얼마만큼의 영속성을 갖는지에 따라 목적에 맞게 활용하면 된다. 로컬 스토리지 클라이언트의 정보를 영구적으로 저장한다. 의도적으로 삭제하지 않으면 영구 보관됨. 클라이언트에서만 읽을 수 있고, HTML5 이상의 브라우저만 지원된다. 세션 스토리.. 브라우저는 어떻게 동작하나? 브라우저는 몇 가지 단계를 거처 사용자가 입력한 URL의 웹 페이지 정보를 렌더링 해서 사용자에게 보여주는 역할을 한다. 브라우저의 기본 구조와 작동하는 방식을 내가 말로 설명할 수 있도록 쉽게 정리해봄. 브라우저의 기본구조 브라우저마다 약간의 차이는 있지만, 대부분 다음 이미지와 같은 구조를 가지고 있다. UI 레이어(사용자 인터페이스) 브라우저 엔진 렌더링 엔진 네트워킹(통신) 자바스크립트 해석기 UI 백엔드 저장소(스토리지) 브라우저 동작 과정 1. Get Request 유저가 주소창에 URL을 입력하면, 브라운저는 URL의 서버에 get요청을 보낸다. 요청한 HTML 리소스에는 html내의 텍스트 정보와 각종 태그, img 등 미디어 콘텐츠, 자바스크립트, 스타일시트 등이 포함된다. 2. Get .. 이전 1 다음
