- 📌 <밑바닥부터 시작하는 웹 브라우저> 완독 챌린지
- 📌 기간 : 2025-11-01 ~ 2025-11-30
✏️ 1. 학습 내용 정리
-
CH01_웹페이지다운로드
1. URL의 구조
http://example.org/index.html구성요소 예시 의미 스키마 http:// 어떻게 정보에 접근 할 수 있는지 호스트 example.org 어디에서 정보를 얻을 수 있는지 경로 index.html 무슨 정보를 얻을 수 있는지 2. 정보 요청 과정
- 브라우저가 URL을 인식하면 운영체제(OS)에 호스트(example.org)로 연결 요청 한다.
- OS는 DNS 서버에 질의하여 호스트명을 IP 주소로 변환 한다.
- 변환된 IP를 사용해 서버에 요청 전송 한다.
3. 서버의 응답
- 형식
HTTP/1.1 200 OK ← 상태 라인 (HTTP버전, 응답코드, 설명) Content-Type: text/html ← 응답 헤더 Content-Length: 1234 ← 빈줄 <html>...</html> ← 응답 Body
4. 암호화된 연결
- HTTPS
- HTTP + TLS/SSL
- HTTP에 TLS 레이어를 추가한 것이다.
- 데이터가 네트워크 상에서 암호화되어 전송되어 도청/위변조를 방지한다.
TLS(Transport Layer Security)란?
- 전송 계층 보안을 의미한다.
- 인터넷에서 데이터를 안전하게 주고받도록 암호화와 무결성, 인증을 제공하는 프로토콜이다.
-
CH02_화면에그리기
1. 기타
- 스크롤은 웹페이지에서 가장 빈번하게 이루어지는 상호작용이다.
- 이 과정을 빠르고 부드럽게 구현하기 위해 많은 시간과 노력이 투자되었다.
- 일반적으로 화면 갱신 속도는 60Hz이며, 한 프레임은 16ms 이내에 처리되어야 한다.
- 반면 마우스 클릭은 100ms 이내에 반응하면 충분하다.
2. 요약
- 운영체제(OS)의 도움을 받아 창을 생성한다.
- 생성된 창에 텍스트를 배치하고 화면에 그린다.
- 사용자 입력(키보드, 마우스 휠 등)에 따라 창을 스크롤한다.
3. 느낀점
텍스트를 단순히 화면에 배치하는 일도 언어와 문화권에 따라 달라진다는 점이 인상 깊었다. 오른쪽에서 왼쪽으로 읽는 언어나 세로쓰기 언어처럼 다양한 표현 방식을 지원하기 위해 우리가 당연하게 사용하는 기능 뒤에 상당한 고민과 기술적 노력이 숨어 있다는 것을 느꼈다.
-
CH4_문서트리구축하기
1. 기타
- HTML은 기본적으로 트리 구조(Tree Structure) 로 이루어져 있다.
2. 셀프 클로징 태그(Self-closing Tag)
- 한 줄로 닫는 태그를 의미한다.
- 예)
<br>,<img>,<input>,<hr>등
- 예)
- HTML5에서는
<br>과<br/>이 동일하게 동작하지만, XHTML에서는 반드시/를 붙여<br/>형태로 작성해야 한다. - React JSX 문법에서는 셀프 클로징 태그에
/를 반드시 붙여야 한다.
3. 암시적 태그 삽입(Implicit Tag Insertion)
- HTML 문서 구조가 불완전할 때 브라우저가 자동으로 누락된 필수 태그(
<html>,<head>,<body>)를 삽입하여 DOM을 완성하는 기능이다. - 브라우저는 깨지지 않게 보여주는 것을 목표로 하기 때문에 이러한 기능이 생긴 것이다.
- 브라우저마다 자체 HTML 파서를 가지고 있으며 파싱 과정에서 자동 보정 기능을 수행한다.
4. 느낀 점
- 브라우저가 누락된 태그를 자동으로 보정해준다는 점이 인상 깊었다.
-
CH8_서버로정보보내기
1. 폼 제출하기
- 폼 안에 있는 모든 form control 요소(
<input>,<select>,<textarea>)의 name=value 쌍을 추출한다. - 값(value)은 폼 URL 인코딩 방식으로 인코딩된다.
- 최종 형태
name1=value1&name2=value2&...
2. 퍼센트 인코딩(Percent Encoding)
- URL 인코딩(URL Encoding)이라고도 불린다.
- URL에서 사용 불가능한 문자나 특별한 의미를 가진 문자를
%+ 16진수로 표시하여 안전하게 전달하기 위한 방식이다. - 인코딩 과정
- 문자를 UTF-8 기준 바이트로 변환한다.
- 바이트값을 16진수로 변환한다.
- 앞에
%를 붙인다.
문자 UTF-8 퍼센트 인코딩 ? 3F %3F
참고
- JS 인코딩 함수는 아래 두 가지가 있으며 역할이 다르다.
- encodeURI(url)
- 전체 URL 전체를 인코딩 할 때 사용한다.
- URL 구조를 깨지지 않게 하기 위해 다음 문자는 인코딩하지 않는다. (
/,:,?,&,=,#) - 예시)
encodeURI("https://test.com/search?q=한글 테스트")
- encodeURIComponent(value)
- 파라미터 값만 인코딩할 때 사용한다.
- URL의 의미 문자(
?,=,&,#등)도 모두 인코딩한다. - 예시)
encodeURIComponent("한글 테스트&abc")
- 폼 안에 있는 모든 form control 요소(
-
CH9_대화형스크립트실행하기
1. 브라우저 렌더링 과정
- 과정
- 브라우저가 HTML을 파싱해 DOM을 만든다.
- 브라우저가 CSS를 파싱해 CSSOM을 만든다.
- DOM과 CSSOM을 합쳐 Render Tree를 만든다.
- Render Tree를 기반으로 화면에 그림을 그린다.
- DOM이나 CSSOM이 변경되면 브라우저는 필요한 부분만 다시 렌더링한다.
- 표준(Web Standards)은 있지만, 각 브라우저는 이를 자체 엔진에서 서로 다르게 구현한다.
- JS 변수는 DOM 객체를 참조만 하는 것이다.
참고
- JSP
- 서버에서 HTML을 생성하는 기술이며 DOM은 브라우저에서만 만들어진다.
- Vue, React
- Virtual DOM 또는 반응형 렌더링을 통해 DOM을 간접적으로 업데이트한다.
- 개발자가 직접 DOM을 조작하는 것이 아니라, 프레임워크가 DOM 변경을 최적화한다.
- 과정
-
CH10_사용자데이터보호하기
1. 쿠키(Cookies)
- 서버가 브라우저에게 '이거 저장해' 하고 준 정보이며, 그걸 브라우저가 가지고 있는 것이다.
- 서버와 브라우저가 주고 받으면서 변할 수 있는 상태 정보이다.
- 쿠키는 도메인과 경로 기준으로 관리된다.
- SameSite 속성
- 쿠키가 다른 사이트 요청에 포함될 수 있는지를 제어한다.
- 종류
Strict: 오직 같은 사이트 요청에서만 전송Lax: 대부분 같은 사이트 요청에서만 전송, GET 링크 클릭 시 일부 전송 가능None; Secure: 다른 사이트 요청에서도 전송 가능, 반드시 HTTPS에서만 허용
참고
- SOP (Same-Origin Policy, 동일 출처 정책)
- 출처가 다르면 브라우저가 접근을 막는다.
- XSS (Cross-Site Scripting, 크로스 사이트 스크립팅)
- 공격자가 브라우저에서 악성 스크립트를 실행시키는 것이다.
- Content Security Policy (CSP)
- XSS 피해를 줄이기 위해 브라우저가 실행 가능한 리소스를 제한한다.
- 브라우저가 허용된 리소스만 실행하게 만드는 보안 규칙이다.
📝 2. 회고
인프런에서 진행한 ‘밑바닥부터 시작하는 웹 브라우저’ 를 4주 동안 읽으며 브라우저의 내부 동작 원리를 훨씬 깊게 이해할 수 있었습니다. 앞부분은 기본적인 개념 중심이라 비교적 수월했지만 뒤로 갈수록 난이도가 꽤 높아져 이해가 어려운 부분도 많았습니다.
업무와 병행하며 연습문제와 미션을 모두 완벽히 따라가진 못했지만, **“웹이 이렇게 동작하는구나”**라는 근본적인 흐름을 잡을 수 있었다는 점에서 큰 성과였다고 생각합니다.
다만, 아쉬웠던 부분도 있었습니다.
- 모든 소스 코드가 파이썬으로 제공되어 파이썬에 익숙하지 않으면 이해가 어렵다는 점
- 연습문제 정답이 제공되지 않는 점
- 전체 코드가 아닌 일부만 수록되어 있어 흐름 파악이 쉽지 않은 부분
이런 요소들이 난이도를 조금 더 높였던 것 같습니다.
하지만 무엇보다도 이번 챌린지 덕분에 책 한 권을 끝까지 읽을 수 있었다는 점이 큰 보람으로 남았습니다.