Web/ETC5 [CSR] 클라이언트 사이드 렌더링 기존의 MPA 방식 기존 웹은 요청 시마다 새로고침이 발생해서 서버로부터 리소스들을 받아 렌더링하는 방식이었다. 서버가 해당하는 HTML을 주는 방식을 SSR(Server Side Rendering)이라고 한다. 대체로 헤더나 푸터는 그대로인데 전체를 다 렌더링하면 비효율적이다. 불변하는 정보도 다 받기 때문이다. SPA와 반대로 MPA에서는 서버로 form 데이터를 전달해서 새로운 페이지 렌더링을 요청하게 된다. 기존에는 SPA와 반대되는 MPA(Multi Page Application) 디자인 패턴으로 많이 개발되었다 다른 페이지로 넘어갈 때 URL도 바뀌고 서버로 들어가는 요청에 응답으로 HTML 파일을 건네서 완전히 새로운 페이지로 넘어가는 것이다. HTML 파일을 건네면 굳이 다시 그리지 않아도.. 2021. 7. 12. [AJAX] AJAX란? AJAX (Asynchronous Javascript And XML) - AJAX는 Javascript의 라이브러리중 하나이며 Asynchronous Javascript And XML(비동기식 자바스크립트와 XML)의 약자 - 브라우저가 가지고있는 XMLHttpRequest 객체로 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위해 데이터를 로드 - Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 Javascript에서 비동기 http 통신을 위한 대표적인 방법 3가지 ❓ - Ajax - Axios - fetch HTML과 XML ❓ 같은 Markup Language라, 생긴건 비슷하지만 큰 차이점이 존재한다 HTML의 태그는 이미 약속한 태그들만 사용.. 2021. 6. 29. [WEB] 브라우저 렌더링 원리 브라우저 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 1. 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석 2. 해석된 문서는 브라우저 렌더링 엔진에 따라서 브라우저에 사용자가 볼 수 있도록 그리기 시작 -> 브라우저 별로 화면에 그리는 방식은 다름 -> 대표적으로 Chrome과 Safari는 Webkit 엔진을 사용하며, 파이어폭스는 Gecko 엔진을 사용하기 때문 Webkit과 Gecko 렌더링 엔진 동작과정 차이 ❓ - Gecko 엔진을 사용하는 Firefox에서 프리젠테이션은 DOM 업데이트를 위한 리스너로 등록하고 "Frame Constructor"에서 프레임을 생성 - Webki.. 2021. 6. 28. [Web] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지) 쿠키란? 1. 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미 2. 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 (↔세션) 3. 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다 4. SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다 (CSRF 취약) 5. 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재 6. 대부분의 브라우저가 지원 document.cookie하면 현재 쿠키 정보가 나옴 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질수 있다 Response Header에 Set-Cookie 속성을 .. 2021. 6. 21. [SSR] 서버사이드 렌더링 overview 서버사이드 렌더링(SSR)은 브라우저에서 전적으로 렌더링을 담당하는 클라이언트 사이드 렌더링(CSR)과는 다르게 웹 서버에서 어느 정도 완성된 HTML을 제작해서 로딩하는 방식을 의미합니다 기존에는 유저 인터렉션(User Interaction)이 거의 없는 스태틱 페이지(예를 들어 통계 페이지나 About 페이지 등 동적으로 페이지가 변할 일이 거의 없는 페이지)에만 주로 서버 사이드 렌더링을 사용했었습니다. 즉 극히 제한된 상황에서만 SSR을 사용했었습니다. 하지만, 요즘에는 렌더링 속도 개선, SEO 최적화 등 여러 가지 퍼포먼스적인 이슈들로 인해서 SSR을 UserInteraction이 많은 동적인 페이지에도 적용하고 있습니다. React - Nextjs (Vue - Nustjs) .. 2021. 6. 16. 이전 1 다음
