전체 글

SPA vs MPA

SPA ( Single Page Application ) 싱글 페이지 애플리케이션 ( SPA ) 는 새로운 페이지를 불러오지 않고 같은 페이지에 동적으로 요소들을 다시 작성하는 페이지를 의미한다. React, Vue, Angular 셋 다 SPA 에 속하는 프레임 워크이다. 보통 클라이언트 사이드 랜더링이다 SPA 특징 단일 페이지이기 때문에, 모든 정적 리소스를 최초 접근시 단 한번만 다운로드 한다. 미리 다운 받아놓기 때문에 새로고침 없이 리렌더링 하지 않고 변경되는 부분만 갱신한다. 네이티브 앱과 비슷한 UX를 준다 SPA 장점 자연스러운 사용자 경험 ( UX ) 전체 페이지를 업데이트 하지 않기 때문에, 빠르고 깜빡거림이 없다. 필요한 리소스만 부분적 로딩 SPA 의 Application 은 정적..

Window, DOM, BOM

Window DOM, BOM 을 모두 가지고 있는 최상위 객체이다. DOM ( Document Object Model, 문서 객체 구조 ) Dom 이란 Document Object Model 의 약자로 HTML 문서를 객체로 표현한 것이다. 보통 웹 페이지를 제어할 수 있게 만든 문서 객체 구조로, Core DOM, HTML DOM, XML DOM 으로 나뉜다. BOM ( Browser Object Model, 브라우저 객체 구조 ) BOM 은 자바스크립트가 브라우저와 소통하기 위해 만들어진 모델이다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와 상호작용에 있어 비슷한 메소드와 동작 하기에 BOM 이라고 부른다. window 객체를 통해 접근이 가능하다. navigator 브라우저명과 버전정보를..

[ Frontend ] 브라우저 렌더링 과정 과 동작 원리

주소창에 도메인을 입력했을때 일어나는 일 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS 가 연결해줄 곳을 찾는다. 서버에서 HTML 파일을 클라이언트로 보낸다. HTML 문서는 파싱되어 DOM 을 생성한다. ( 객체 형식 ) 중간에 CSS 를 로드하는 Link 또는 Style 태그를 만나면 DOM 생성을 중지한다. CSS 를 파싱하고 CSSOM 을 생성한다. 이렇게 만들어진 CSSOM + DOM 은 렌더링을 위해 렌더 트리로 결합된다. 만약 script 태그를 만나면, 파싱을 중단하고 JS 엔진을 실행해 JS 코드를 파싱한다. 브라우저 동작 원리 설명 브라우저의 기본 구조 사용자 인터페이스 : 사용자가 보여지는 인터페이스 부분 ( 주소 표시줄, 북마크 등 페이지 뷰 이외의 부분 ) 브라우저 ..