: 웹 서버에서 양방향으로 통신을 하며 HTML 문서, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램
브라우저는 페이지를 다운로드하기 위해 응용 계층의 HTTP 프로토콜을 이용해 데이터를 송신/수신한다.
브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고, 서버로부터 받은 응답(Response)을 브라우저에 렌더링한다.(Render).
여기서 자원은 HTML 문서, PDF, 멀티미디어 등 여러 형태일 수 있으며, 자원의 주소는 URI(Uniform Resource Identifier)로 되어있다.
1. 사용자
브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다.
2. DNS 서버
사용자가 입력한 URL 주소 중 도메인 네임을 검색하고,
도메인 네임에 일치하는 IP 주소를 찾아, 사용자가 입력한 URL 정보와 함께 전달한다.
3. HTTP 프로토콜
이렇게 전달 받은 IP 주소와 웹 페이지 URL 정보는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성한다.
4. TCP/IP 프로토콜
이 HTTP 요청 메세지는 TCP 프로토콜 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송되고,
도착한 HTTP 요청 메세지는, HTTP 프로토콜을 이용해 웹 페이지 URL 정보로 변환한다.
5. 웹 서버
변환된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤, HTTP 응답 메세지를 생성한다.
이 HTTP 응답 메세지는 다시 TCP 프로토콜을 사용해 인터넷을 거쳐 사용자의 컴퓨터로 전송되고,
도착한 HTTP 응답 메세지는, HTTP 프로토콜을 이용해 웹 페이지 데이터로 변환된다.
6. 웹 브라우저
변환된 데이터가 웹 브라우저에 출력되어 사용자가 볼 수 있게 된다.
: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 유저와 가장 밀접하게 맞닿아있는 부분
: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 엔진
HTML 문서와 기타 지원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료구조를 구현한다.
레이아웃 엔진(Layout Engine)이라고도 불리며, 렌더링 엔진과 밀접하게 연관이 있어 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진이라고 부르기도 한다.
웹 브라우저마다 전용 브라우저 엔진을 사용한다.
이외에도 많은 브라우저 엔진들이 존재한다.
: 요청한 콘텐츠를 화면에 출력하는 엔진
: HTTP 요청과 같은 네트워크 호출에 사용되며, 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행된다.
: JavaScript 코드를 해석하고 실행하는 해석기
이중에서 가장 유명한 V8 엔진을 통해 자바스크립트 엔진의 구조를 살펴보자.
: 동적 메모리 할당에 사용되는 자료구조
: 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
스택 추적(Stack Trace)
브라우저의 콘솔에 출력되는 에러 로그를 통해 어디서 에러가 발생하고 있는지, 에러의 결과가 무엇인지 추적할 수 있다.
스택 오버플로
아래처럼 스택 내부에 동일한 스택 프레임이 계속 쌓이다가 스택의 크기(용량)를 넘어버리면 웹 브라우저가 멈춰버린다.
: 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할
사용자 인터페이스 종류
- 명령어 라인 인터페이스(CLI; Command Line Interface)
: 문자로만 명령어를 입력해 처리해야 하는 인터페이스 (mac은 터미널, 윈도우는 명령 프롬프트)- 일괄 처리 인터페이스(Batch Interface)
: 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스
대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용된다.- 그래픽 사용자 인터페이스(GUI; Graphic User Interface)
: 마우스, 키보드, 모니터 등을 이용해 아이콘을 클릭하는 등의 직관적인 입력이 가능한 인터페이스
: 영구적인 저장소인 로컬 스토리지와 임시적인 저장소인 세션 스토리지를 따로 두어 응용 환경에 맞는 선택이 가능하다.
: 로컬 스토리지 객체는 보관 기한이 없는 데이터를 저장한다.
window.localStorage
)을 통해 저장 및 조회할 수 있다. : 세션 스토리지 객체는 하나의 세션만을 위한 데이터를 저장한다.
window.sessionStorage
)을 통해 저장 및 조회할 수 있다.
- 브라우징 : 브라우저 프로그램을 실행해서 인터넷에서 정보를 찾는 행위
- 브라우저 컨택스트 : 브라우저가 문서를 표시하는 환경
각 브라우징 컨택스트는 활성화되고 있는 문서의 출처, 표시했던 문서의 방문 기록을 가지고 있다.
브라우저 컨택스트 내에서 저장된 데이터를 가지고 활용할 수 있기 때문에 복구 및 백업에 관련된 기능이 주로 사용된다.
two 스펠링이 잘못 된 것 같아요!!