728x90 반응형 SMALL IT 지식/Web8 클라이언트 사이드 렌더링(CSR) vs 서버 사이드 렌더링(SSR) 브라우저 렌더링이란? 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업을 말한다. 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려준다. 브라우저 렌더링은 크게 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 방식으로 나누어진다. 클라이언트 사이드 렌더링(CSR) CSR은 "Client-Side Rendering"의 약어로, 클라이언트 측에서 페이지를 렌더링하는 방식을 말한다. CSR은 서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링한다. 클라이언트에서 데이터를 받아오고 렌더링하기 때문에 초기 로딩 속도는 느리지만, 이후에는 페이.. 2023. 4. 17. Cookie의 MaxAge, Expires 옵션 Session cookies - 웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐 → MaxAge와 Expires 옵션 중 하나라도 설정하지 않을 때 Permanent cookie - 웹브라우저를 껐다 켜도 유지됨 Permanent cookie 기간 설정할 때 쓰이는 옵션이 바로 MaxAge와 Expires 이다. MaxAge와 Expires 옵션은 둘 다 쿠키의 수명을 결정하는 데 사용된다. MaxAge 쿠키가 유지되는 시간(초)을 정의한다. 이 값은 현재 시간에서 더해져서 쿠키의 만료 시간이 계산된다. 예를 들어, MaxAge가 3600으로 설정되어 있으면, 쿠키는 1시간 동안 유지된다. Expires 쿠키가 만료되는 날짜와 시간을 정의한다. 이 값은 HTTP Date 형식의 문자열로 설정된.. 2023. 4. 4. 브라우저 저장소(local storage, session storage, cookie) 브라우저 저장소란? 브라우저 저장소는 웹 애플리케이션에서 데이터를 저장하기 위한 방법으로, 주로 사용자의 프로필 정보, 로그인 상태, 사용자 환경 설정 등을 저장하고 유지하는 데 사용된다. 브라우저 저장소는 HTML5부터 지원되며, JavaScript를 사용하여 사용자의 로컬 브라우저에 데이터를 저장할 수 있다. 대표적으로 로컬 스토리지, 세션 스토리지, 쿠키가 있다. 로컬 스토리지(Local Storage) 일반적으로 키-값 쌍으로 구조화된 방식으로 데이터를 저장한다. 로컬 스토리지는 브라우저 내부에 데이터를 저장할 수 있는 영구 저장소다. 데이터는 클라이언트 측 컴퓨터에 저장되며 데이터를 수동으로 지우지 않는 이상 영구적으로 보관이 가능하다. 사용자가 웹 사이트를 나가더라도 데이터가 유지된다. 저장된.. 2023. 3. 31. [Web] HTTP와 HTTP 메시지 구조 HTTP란? HTTP는 HyperText Transfer Protocol(하이퍼텍스트 전송 프로토콜)의 약자로, HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜이다. 즉, 인터넷에서 데이터를 주고 받는 데 사용되는 프로토콜이다. HTTP는 클라이언트와 서버 간에 데이터를 전송하고 웹페이지, 이미지, 비디오, 오디오 등을 요청하고 전송하기 위해 사용된다. HTTP는 TCP/IP 프로토콜을 기반으로 하며, 보통 80번 포트를 사용한다. 클라이언트는 HTTP 요청을 서버에 보내고, 서버는 이 요청에 대한 응답을 보낸다. HTTP 요청과 응답에는 여러 가지 종류가 있으며, 가장 흔한 종류는 GET 요청과 200 OK 응답이다. HTTP는 무상태(Stateless) 프로토콜이다. 이.. 2023. 3. 30. Restful API RESTful API란? RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스다. API란 애플리케이션 프로그래밍 인터페이스로, 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙이다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성한다. 웹 API는 클라이언트(웹에서 정보에 액세스하려는 사용자)와 웹 리소스(다양한 애플리케이션이 클라이언트에게 제공하는 정보) 사이의 게이트웨이라고 생각할 수 있다. REST는 Representational State Transfer로, API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처다. API 개발자는 여러 아키텍처를 사용하여 API를 설계할 .. 2023. 3. 27. [Web] 웹페이지가 브라우저에 렌더링되는 과정 브라우저의 렌더링 과정 렌더링이란? HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 브라우저마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. ex) 크롬 → 블링크(Blink), 사파리 → 웹킷(Webkit), 파이어폭스 → 게코(Gecko) 렌더링 과정 1. DOM, CSSOM 트리 생성 사용자가 브라우저를 통해 웹사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드 받는다. 브라우저가 페이지를 렌더링 하려면, 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야한다. DOM(Document Object Model) 트리 생성 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HT.. 2023. 3. 27. 이전 1 2 다음 728x90 반응형 LIST
