사용자 인터페이스
💡 User Interface, UI
💡 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭
브라우저 엔진
💡 Browser Engine, 레이아웃 엔진
💡 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
💡 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
게코(Gecko) : 모질라 제작, 파이어폭스 사용
웹킷(Webkit) : KHTML 파생, 사파리 사용
블링크(Blink) : 웹킷(Webkit) 파생, 크롬, 오페라 사용
트라이던트(Trident) : 마이크로소프트 제작, 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 사용
엣지HTML(EdgeHTML) : 트라이던트(Trident) 파생, 마이크로소프트 엣지 스파르탄 버전(~2019) 사용
렌더링 엔진
💡 요청한 콘텐츠를 화면에 출력
💡 HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시 가능
통신
💡 Networking
💡 HTTP 요청과 같은 네트워크 호출에 사용
💡 플랫폼의 독립적인 인터페이스, 각 플랫폼의 하부에서 실행
자바스크립트 해석기
💡 JavaScript Interpreter, 자바스크립트 엔진(JavaScript Engine)
💡 JavaScript는 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱(parsing)하는 언어(Interpreted Language)라 해석기가 필요
Rhino : 모질라 재단 운영, 자바(Java)로 개발
SpiderMonkey : 최초의 Javascript 엔진, 넷스케이프 내비게이터를 지원, 현재는 파이어폭스
V8 : 구글이 개발, 크롬에서 사용
JavascriptCore : 애플에서 개발, WebKit 프레임워크를 위해 개발되었으나 현재는 사파리와 React Native App를 지원
Chakra : 마이크로소프트가 개발, Edge 브라우저를 지원
📗 힙 메모리
-힙(heap)은 동적 메모리 할당에 사용되는 자료구조
-힙을 이용하여 V8은 객체 또는 동적 데이터를 저장
-V8 엔진 내부에서 가장 큰 공간, 가비지 컬렉션 발생
📗 콜 스택
-콜 스택은 프로그램 상에서 어디에 있는지 기록하는 자료구조
-JavaScript는 싱글 스레드 기반. 콜 스택이 하나, 한 번에 한 작업만 가능
-함수가 실행되면 콜 스택 최상단에 위치, 종료되면 바로 제거
-함수가 리턴될 경우, 특정 값이 리턴될 때까지 스택에 쌓임 그 후 리턴된 순서대로 제거
스택 프레임(Stack Frame) 콜 스택에 쌓이는 데이터 하나 하나
스택 오버플로(Stack Overflow) 스택은 자료구조 자체가 크기에 제한 존재, 한정된 메모리 공간을 넘어가면 발생하는 에러
스택 추적(Stack trace) 브라우저의 콘솔 로그에서 에러의 발생과 발생한 이유를 훌륭하게 추적 가능
UI 백엔드
💡 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할(Select, Input 창과 같은 기본적인 위젯)
💡 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용
OS 사용자 인터페이스 체계
명령어 라인 인터페이스(Command Line Interface, CLI) : mac이라면 터미널, 윈도우라면 명령 프롬프트 등의 문자로만 명령어를 입력해 처리해야 하는 인터페이스
일괄 처리 인터페이스(Batch Interface) : 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스
그래픽 사용자 인터페이스 (Graphic User Interface, GUI) : 마우스, 키보드, 모니터 등을 이용해 아이콘을 클릭하거나 직관적인 입력이 가능한 인터페이스
자료저장소-웹 스토리지(Web Storage)
💡 쿠키 자체의 보안상 취약, 저장소의 절대적인 허용 용량 작음을 극복한 다른 대안
💡 웹 브라우저가 직접 데이터를 저장
💡 저장된 데이터가 클라이언트에만 존재하므로 네트워크 트래픽 비용 감소
💡 오리진(origin)마다 단 하나씩
오리진
도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자
📗 로컬스토리지(localStorage)
보관 기한이 없는 데이터를 저장
브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 잔존
Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능
도메인 마다 별도의 localStorage 존재
📗 세션스토리지(sessionStorage)
하나의 세션만을 위한 데이터를 저장
브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지
사용자가 브라우저 탭이나 창을 닫으면 사라짐
Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회 가능
도메인 마다 별도의 sessionStorage 존재
브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징
브라우징 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위
브라우저 컨텍스트 브라우저가 문서를 표시하는 환경, 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록
📗 지원하는 웹 브라우저 버전
ie(8.0) / chrome(4.0) / firefox(3.5) / sapari(4.0) / opera(11.5)
window.localStorage : 만료 날짜가 없는 데이터를 저장
window.sessionStorage : 세션이 있는 데이터를 저장
if (typeof(Storage) !== "undefined") {
// web storage를 지원하는 브라우저 객체(ex. function)을 반환
} else {
// web storage를 지원하지 않는 브라우저 undefined를 반환
}📗 활용 예시
사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업 기능
현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)
