❓ 웹 브라우저
웹 브라우저는 웹 페이지를 탐색하고 표시하는 소프트웨어이다.
간단히 말하자면, 인터넷에서 정보를 검색하고 원하는 사이트에 접속하게 해주는 프로그램이다.
브라우저는 사용자 요청을 웹 서버에 전달하고, 서버로부터 받은 정보를 사용자에게 보여준다.
우리가 흔히 알고 있는 크롬, 인터넷 익스플로러, 사파리 등이 브라우저이다!
브라우저는 HTML, CSS, JavaScript 와 같은 정보를 처리하며, 이미지나 동영상 같은 다양한 미디어 파일도 함께 처리한다.
또한, 보안 관리나 성능 최적화, 사용자 데이터 보호와 같은 기능도 수행한다.
❗ 브라우저가 화면을 그리는 과정
1. HTML 렌더링
웹 페이지의 구조를 담당하는 HTML 을 화면에 표시한다.
간단 설명:
사용자가 특정 사이트에 접속하면, 브라우저는 서버로부터 우리가 알고 있는 형태의 HTML 파일을 받아온다.
받아온 파일을 브라우저가 해석하여 DOM 이라는 트리 구조로 변환하여, 웹 페이지의 기본 구조를 화면에 그린다.
++ ) DOM 은 웹 페이지의 구조를 나타내는 트리 형태의 데이터이다.
예를 들어, <h1>오늘의 뉴스</h1> 태그가 있으면, 브라우저는 "오늘의 뉴스" 라는 큰 제목을 화면에 표시한다.
2. CSS 해석:
웹 페이지의 스타일과 디자인 요소를 적용한다.
간단 설명:
HTML 에서 기본적인 텍스트나 이미지가 표시된 후, 브라우저는 CSS 파일을 불러와 각 요소에 스타일을 적용한다.
브라우저는 CSS 를 해석하여 DOM 과 결합한 렌더 트리라는 것을 만든다.
이 렌더 트리는 페이지가 화면에 어떻게 보일지를 결정하는 데 중요한 역할을 한다.
예를 들어, h1 { color: red; font-size: 24px; } 라는 CSS 규칙이 있다면,
브라우저는 "오늘의 뉴스" 라는 제목을 빨간색으로 표시하고, 글자 크기를 24px 로 설정한다.
3. JavaScript 실행:
자바스크립트 코드를 읽고 웹 페이지의 동적인 동작을 처리한다.
간단 설명:
JavaScript 는 브라우저의 JavaScript 엔진에서 실행된다.
크롬은 V8 엔진, Firefox 는 SpiderMonkey 엔진 ... 을 사용한다.
JavaScript 는 HTML 의 DOM 과 CSSOM 에 접근하여 웹 페이지의 내용을 동적으로 변경할 수 있다.
예를 들어, 사용자가 "더보기" 버튼을 클릭하면 JacaScript 가 실행되어 서버로부터 추가 데이터를 요청하고,
새로운 뉴스 항목을 페이지에 추가로 표시할 수 있다.
❗ 브라우저의 추가 기능
4. 보안 관리
1) HTTPS 프로토콜을 통한 데이터 암호화
웹 브라우저는 HTTPS 프로토콜을 사용해서 데이터를 암호화함으로써, 사용자 정보를 안전하게 보호한다.
++) HTTPS?
HTTPS 는 HyperText Transfer Protocol Secure" 의 약자이다.
HTTPS 는 웹사이트와 사용자가 주고받는 데이터를 암호화하여 제 3자가 이를 가로채더라도 내용을 알아볼 수 없도록 한다.
예를 들어, 온라인 쇼핑몰에서 결제를 할 때, HTTPS 가 없다면? 중요한 정보가 인터넷을 통해 그대로 전송될 수 있다.
하지만 HTTPS 를 사용하면? 이 정보들이 복잡한 코드로 암호화되어 안전하게 서버로 전송된다.
이를 통해, 데이터가 도중에 해킹되거나 변조되는 위험을 줄일 수 있다!
2) 자물쇠 아이콘의 의미
브라우저의 주소창 왼쪽에 자물쇠 아이콘이 있는 사이트는, 해당 웹사이트가 HTTPS 를 사용해 안전하게 데이터를 보호하고 있다는 뜻이다.
예를 들어, 네이버와 같은 사이트는 HTTPS 를 사용하여 데이터를 암호화한다. 이를 통해 우리가 네이버를 이용하는 동안 사용자의 정보(로그인 정보나 검색 기록 등...)가 안전하게 보호된다.
3) 쿠키 관리와 보안
쿠키는 웹사이트가 사용자 정보를 저장하는 작은 파일? 이라고 생각하면 된다.
예를 들어, 우리가 쇼핑몰에서 장바구니에 상품을 담거나 로그인 상태를 유지할 때 쿠키가 사용된다.
즉, 쿠키 덕분에 우리가 로그인할 때마다 다시 아이디와 비밀번호를 입력하지 않아도 되는 것이다.
++) HTTPS 는 어떻게 쿠키를 보호할 수 있는 걸까?
HTTPS 는 웹사이트와 사용자 간의 모든 데이터를 암호화하는데, 쿠키도 여기에 포함되기 때문이다.
즉, HTTPS 를 사용하면 쿠키도 암호화된 상태로 전송된다는 뜻!
++) 쿠키는 어떻게 저장되는 걸까?
웹사이트 개발자가 쿠키를 사용하여 특정 정보를 저장할 수 있도록 설정한다.
예를 들어, 사용자가 로그인할 때 "로그인 상태 유지" 옵션을 선택하면, 개발자가 이 정보를 쿠키에 저장하도록 설정할 수 있다.
웹 사이트들을 방문하다 보면 쿠키 사용에 대한 동의를 받는 문구를 볼 수 있다.
이는 개인 정보 보호 규정에 따른 조치로, 사용자에게 쿠키가 어떤 목적으로 사용되는지 알리고 동의를 받아야만 쿠키를 저장할 수 있다고 한다.
4) CORS (Cross-Origin Resource Sharing)
CORS 는 다른 출처의 리소스 요청을 관리하는 보안 정책이다.
기본적으로 웹 브라우저는 같은 출처가 아닌 다른 출처의 리소스에 접근하려고 할 때, 보안상의 이유로 요청을 차단한다.
CORS 는 이 과정에서 서버가 요청을 허용할지 여부를 결정할 수 있는 방법을 제공한다.
CORS 를 통해 신뢰할 수 없는 출처에서 리소스를 가져오는 것을 차단하고, 사용자의 정보를 안전하게 보호할 수 있다.
++) 다른 출처의 리소스 요청?
예를 들어, 우리가 블로그 글을 트위터나 다른 사이트로 공유할 때,
블로그에서 공유 버튼을 클릭하면 블로그의 웹사이트는 트위터의 서버에 데이터를 요청한다.
이 요청은 블로그와 트위터가 서로 다른 웹사이트이기 때문에 다른 출처의 리소스를 요청하는 상황인 것이다.
5. 탭 및 히스토리 관리
브라우저는 여러 개의 탭을 통해 여러 웹 페이지를 열 수 있으며, 히스토리를 통해 방문한 페이지를 추적할 수 있다.
🌐 브라우저의 종류
1. 구글 크롬 (Google Chrome)
가장 널리 사용되는 웹 브라우저 중 하나!
크롬은 구글의 V8 JavaScript 엔진을 사용하여 웹 페이지의 속도를 극대화한다.
또한, 업데이트를 자주 하고 크롬 웹 스토어에서 다양한 확장 프로그램을 제공한다.
2. 파이어폭스 (Mozilla Firefox)
오픈 소스 웹 브라우저이다.
3. 사파리
애플의 웹 브라우저로, 주로 macOS 와 iOS 에서 사용된다.
4. 엣지 (Microsoft Edge)
마이크로소프트가 개발한 웹 브라우저로, 윈도우 10 및 11에서 기본 브라우저로 설정되어 있다.
5. 오페라 (Opera)
비교적 덜 알려진 웹 브라우저이다.
오페라는 내장 VPN, 광고 차단 기능을 제공한다.
💡 참고 문헌
https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work
웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN
사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
중요 렌더링 경로 - 웹 성능 | MDN
중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Do
developer.mozilla.org
자바스크립트 엔진 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고,
ko.wikipedia.org
https://developer.mozilla.org/ko/docs/Web/Security
웹 보안 | MDN
웹사이트 또는 개방형 웹 애플리케이션이 안전한지 확인하는 것은 중요합니다. 코드의 단순한 버그라도 개인 정보가 유출될 수 있으며 나쁜 사람들은 그 데이터를 훔칠 방법을 찾으려고 할겁니
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
HTTP 쿠키 - HTTP | MDN
HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
교차 출처 리소스 공유 (CORS) - HTTP | MDN
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP
developer.mozilla.org
https://ko.wikipedia.org/wiki/HTTPS
HTTPS - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. HTTPS(HyperText Transfer Protocol over Secure Socket Layer, HTTP over TLS,[1][2] HTTP over SSL,[3] HTTP Secure[4][5])는 월드 와이드 웹 통신 프로토콜인 HTTP의 보안이 강화된 버전이다. HTTP
ko.wikipedia.org
'Web' 카테고리의 다른 글
| Lighthouse를 이용한 웹 성능 최적화 (1) | 2024.11.04 |
|---|---|
| CSR(Client-Side Rendering)과 SSR(Server-Side Rendering) (2) | 2024.10.08 |
