Front-End 정리

marafo·2021년 1월 13일

Network

∙ data- :

∙ URI(URL + URN) :

∙ TLS(Transport Layer Security):

Web

∙ SPA(Single Page Application)

하나의 페이지로 웹 애플리케이션을 구성하는 방식이다. 처음 렌더링이 끝나면 서버로부터 데이터만 받아 와서 상대적으로 서버 요청 및 부하가 적다. 그리고 가상돔(Virtual DOM) 방식으로 돌아간다. 프론트/백엔드의 분리 및 협업이 쉽다. CSR과 비슷한 면이 많지만 반드시 일치하진 않는다.

∙ SSR(Server Side Rendering), CSR(Client Side Rendering)

SSR : 웹 페이지 이동시 브라우저에서 서버에 변경된 페이지에 대한 반영 요청을 한다.
서버에서 렌더링을 마치고 (갱신된 Data + HTML)을 클라이언트에 전달한다. 이러한 이유로 클라이언트에 갱신 정보를 받아오는 동안 깜빡임 현상이 생길 수 있다.

CSR : 처음 렌더링 요청시 서버로부터 HTML, CSS, JavaScript를 받아온다. 두 번째 렌더링부터는 데이터 갱신에 대한 정보만 서버에 요청하고 자바스크립트 문법에 의해 뷰가 컨트롤 된다. 초기 렌더링은 요청 리소스가 많아서 SSR보다 느리지만 그 이후엔 더 빠른 로딩 속도를 제공한다.

∙ DOM, 가상 DOM, BOM

BOM : Browser Object Model. 해당 브라우저(+ 관리, 인터랙션)에 대한 모든 내용을 객체에 담아서 관리하는 모델이다. 뒤로가기, 북마크, URL 정보 등이 있다. 최상위 객체인 window를 통해 접근이 가능하다.

DOM : Document Object Model. 웹 페이지를 문서 객체로 표현하여 렌더링해서 화면을 그릴 수 있는 모델. 브라우저마다 방식이 상이하다. HTML 문서의 태그 파싱하여 DOM Tree 만들고 스타일시트 마크업 CSS를 파싱한다. 이 과정을 합쳐서 렌더 트리를 만들고 화면을 구성한다. W3C DOM 체계에는 Core DOM(모든 문서 타입), HTML DOM, XML DOM 등이 있다.

가상 DOM : 기존 DOM의 브라우저 렌더링 방식은 DOM Tree가 아주 약간만 수정되어도 그 부분을 반영하기 위해 전체가 수정사항의 수만큼 갱신되는 단점을 가지고 있다. 이와 다르게 가상 DOM 체제는 데이터 상태값이나 수정 사항을 모두 취합한 후 1번의 DOM 수정을 하고 렌더트리를 갱신한다. 불필요한 렌더링을 줄이는 장점을 갖는다.