용어 정리
웹(World Wide Web, a.k.a Web)
인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공하는 공간
웹 페이지(Web Page)
HTML 언어를 사용하여 작성된 형태로 제공된 문서
웹 사이트(Web Site)
웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합
웹 브라우저(Web Browser)
- 웹 서버에서 HTTP를 통해 양방향으로 통신을 하며
- HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는
- GUI 기반의 소프트웨어 프로그램
웹의 동작 원리
웹 브라우저의 동작 방식
요청과 응답
브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작
참고
Resource: 보통 HTML 문서이나 가끔 PDF, 멀티미디어 등 다양한 형태임
Resource의 주소: URI(Uniform Resource Identifier)형식임
웹 브라우저의 동작 과정
- 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력
- DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색
- DNS 서버가 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달
- HTTP 프로토콜을 사용하여 웹 페이지 URL 정보와 전달받은 IP 주소를 바탕으로 HTTP 요청 메세지를 생성
- TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 컴퓨터로 전송
- HTTP 프로토콜을 통해 HTTP 요청 메세지가 웹 페이지 URL 정보로 변환
- 웹 서버가 변환된 URL 정보에 해당하는 데이터를 검색하여 찾음
- HTTP 프로토콜을 통해 HTTP 응답 메세지를 생성
- TCP 프로토콜을 이용해 HTTP 메세지가 인터넷을 거쳐 사용자의 컴퓨터로 전송
- 사용자의 컴퓨터에 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환
- 변환된 데이터는 웹 브라우저 상에 출력되어 사용자가 확인
브라우저의 기본 구조와 특징
브라우저의 기본 구조
사용자 인터페이스(User Interface)
- 유저와 가장 밀접하게 맞닿은 영역
- ex. 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등
브라우저 엔진(Browser Engine)
레이아웃 엔진(Layout Engine)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
렌더링 엔진(Rendering Engine)
- 요청한 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱해 최종적으로 화면에 출력
- HTML 및 XML 문서와 이미지를 표시 가능
- 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형을 표시할 수도 있음
참고
일반적으로 레이아웃 엔진과 렌더링 엔진 구분 없이 브라우저 엔진이라고 부름
통신(Networking)
- HTTP 요청과 같은 네트워크 호출에 사용
- 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행
자바스크립트 해석기(JavaScript Interpreter)
- a.k.a 자바스크립트 엔진(JavaScript Engine)
- JavaScript 코드를 해석하고 실행하는 역할
구글 크롬의 V8엔진
- 힙 메모리(Heap Memory)
- 동적 메모리 할당에 사용되는 자료구조인 힙(Heap)을 이용하여 객체 또는 동적 데이터 저장
- v8 엔진 내부에서 가장 큰 공간을 차지
- 가비지 컬렉션이 발생하는 곳
- 콜 스택(Call Stack)
- 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조
- JavaScript는 싱글 스레드 기반의 언어로, 콜 스택이 하나이기 때문에 한 번에 한 작업만 실행
- 후입선출(LIFO)의 구조
- 함수를 실행하면 해당 함수가 콜 스택의 가장 상단에 위치
- 함수의 실행이 끝나면 해당 함수가 콜 스택의 가장 상단에 위치하고 있기 때문에 바로 제거됨
- 스택 프레임(Stack Frame)
- 콜 스택에 쌓이는 데이터 하나 하나
- 쌓이는 순서가 있기 때문에 콜 스택이 동작하는 방식을 안다면 브라우저의 콘솔 로그를 살펴봄으로써 스택 추적 (Stack trace) 가능
- 스택 오버플로(Stack Overflow)
- 자료구조 특성상 크기에 제한이 있기 때문에 한정된 메모리 공간을 넘어버리게 되면 발생하는 에러
- 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 일어남
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할
- Select, Input 창과 같은 기본적인 위젯을 렌더링함
- 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용
- 명령어 라인 인터페이스나 일괄 처리 인터페이스를 사용하여 OS 사용자 인터페이스를 다룸
명령어 라인 인터페이스(Command Line Interface, CLI)
mac의 터미널, 윈도우의 명령 프롬프트 등의 문자로만 명령어를 입력해 처리해야 하는 인터페이스
일괄 처리 인터페이스(Batch Interface)
- 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스
- 대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용되는 인터페이스
자료 저장소
- 자료를 저장하는 계층
- 쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재
- 영구적인 저장소인 로컬스토리지(localStorage)와 임시적인 저장소인 세션스토리지(sesseionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능
특징
- 웹 브라우저가 직접 데이터를 저장할 수 있음
- 모든 정보는 서버로 전송되지 않고 오직 클라이언트에만 데이터가 존재함
- 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있음
- 네트워크 트래픽 비용이 줄어듦
- 오리진(origin)마다 단 하나씩만 존재
- 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있음
참고
- 오리진(origin): 도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자
- 브라우징: 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위
- 브라우저 컨텍스트: 브라우저가 문서를 표시하는 환경으로, 특정 출처 및 활성화되고 있는 문서의 출처 및 표시했던 모든 문서의 방문기록을 가짐
종류
| 로컬스토리지(localStorage) | 세션스토리지(sessionStorage) | |
|---|---|---|
| 의미 | 보관 기한이 없는 데이터를 저장 | 하나의 세션만을 위한 데이터를 저장 |
| 특징 | 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 저장된 데이터가 남아있음 | 브라우저 탭이나 창을 닫으면 저장된 데이터가 사라짐 |
| 데이터 저장과 조회 | - Windows 전역 객체의 localStorage라는 컬렉션을 통해 데이터 저장 및 조회 - 도메인마다 별도의 localStorage가 생성 | - Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 데이터 저장 및 조회 - 도메인별로 sessionStorage가 별도로 생성됨 |
| 데이터 공유 여부 | 도메인만 같으면 전역으로 데이터의 공유가 가능 | 브라우저 두 개를 실행해 같은 페이지를 열었을 때, 이 두 페이지의 sessionStorage는 각 별개의 영역으로 인지되어 서로 데이터를 공유할 수 없음 |
사용법
- 해당 브라우저가 웹 스토리지를 지원하는지 확인
//window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 undefined를 반환하고, 존재한다면 object를 반환합니다.
if (typeof(Storage) !== "undefined") {
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}- 어떤 종류의 저장소에 어떤 데이트를 저장할지 지정하기
window.localStorage: 만료 날짜가 없는 데이터를 저장할 때 쓰임window.sessionStorage: 세션이 있는 데이터를 저장할 때 쓰임
(브라우저 탭을 닫으면 손실되는 것을 의도한 데이터를 저장할 때)
활용 예시
- 브라우저 컨텍스트 내에서 저장한 데이터를 가지고 활용할 수 있기 때문에 복구 및 백업에 관련된 기능에 주로 사용
- 블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
- 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
- 현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)
