Django 주차가 시작되면서 같이 시작하게 된 웹 특강!!
지금까지 튜터님들이 잘 알려주신 지식들도 있어서 복습을 하는 내용들도 있지만
CS주차에서 자세하게 다루지 못했던 내용들을 추가로 알려주셔서 오늘 배운 내용을 정리하려고 한다.
브라우저의 작동 원리
1. 먼저 브라우저는 웹 서버로부터 HTML,CSS, JavaScript파일을 요청하고 응답받아 이를 파싱(해석)한다.
- HTML 파싱: HTML 파일을 받아들인 브라우저는 이를 파싱하여 DOM(Document Object Model) 트리를 구축한다.
DOM 트리는 HTML 문서의 구조를 계층적으로 표현한 객체 모델로, 각 HTML 요소가 하나의 객체로 표현되며 HTML 문서를 위에서 아래로 순차적으로 읽어 내려가면서 HTML 태그들을 각각의 DOM 노드로 변환하고, 이 노드들이 부모-자식 관계를 통해 트리 구조로 연결된다고 한다. - CSS 파싱: CSS 파일을 받아들인 브라우저는 이를 파싱하여 CSSOM(CSS Object Model) 트리를 구축한다.
CSSOM 트리는 스타일 규칙들을 객체 모델로 변환한 것으로, 각 규칙이 적용될 HTML 요소와 연결되며 이 과정에서 CSS 규칙의 상속과 우선순위(계단형) 등이 계산된다고 한다. - JavaScript 파싱: JavaScript 파일이 포함된 경우, 브라우저는 이를 해석하여 실행한다.
JavaScript는 DOM이나 CSSOM 트리에 접근하여 동적으로 HTML 요소를 추가, 제거하거나 스타일을 변경하거나 하며 JavaScript는 비동기적으로 실행될 수 있으며, 때로는 DOM이 완전히 로드된 후에 실행된다고 한다. - ※ 이해가 잘 안되는 부분이 있으니 용어를 찾아보며 내용 추가할 것
2. DOM(Document Object Model) 트리, CSSOM(CSS Object Model) 트리를 구축한다.
- DOM 트리 구축: HTML 문서가 파싱됨에 따라 브라우저는 DOM 트리를 구축하는데 DOM 트리는 HTML 문서의 계층 구조를 반영하며, 각 HTML 요소는 노드로 표현한다. DOM 트리는 브라우저와 JavaScript에서 문서의 구조와 콘텐츠를 조작하는 데 사용한다.
- CSSOM 트리 구축: 브라우저는 CSS 파일을 파싱하여 CSSOM 트리를 생성한다. 이 트리는 CSS 규칙들을 반영하며, DOM 트리의 각 요소에 어떤 스타일이 적용될지를 결정해준다.
3. DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성한다.
- 렌더 트리는 실제로 화면에 그려질 요소들로 구성되며, DOM 요소 중에서 화면에 표시되지 않는 요소는 렌더 트리에 포함되지 않는다.
- 각 렌더 트리 노드는 DOM 요소와 스타일 정보를 결합하여 렌더링을 위한 구체적인 레이아웃 정보를 갖는다.
4. 렌더 트리가 완성되면, 브라우저는 각 요소의 정확한 위치와 크기를 계산한다.
- 이 과정을 ''레이아웃(Layout)'' 단계 또는 "리플로우(Reflow)"라고도 하며 각 요소가 페이지 내에서 어디에 배치될지, 얼마나 큰지를 결정하는 단계이다.
5. 레이아웃이 완료된 후, 브라우저는 각 렌더 트리 노드를 실제로 화면에 그린다.
- 이 과정을 페인트(Painting)라고 하며 각 요소의 색상, 테두리, 그림자 등 스타일이 적용되어 화면에 그려진다.
6. 페이지의 요소들이 각각 다른 레이어로 나뉘어 그려진 후에 브라우저는 이를 최종적으로 하나의 이미지로 합성 (Compositing)하여 사용자에게 보여준다.
- 이 과정은 특히 복잡한 애니메이션이나 3D 변환 등이 사용될 때 중요한데 요소들이 개별 레이어로 분리되면 변경된 부분만 다시 그리므로, 성능이 향상되는 효과가 있다.
7. 모든 과정이 끝난 후 브라우저는 최종적인 웹 페이지를 사용자 화면에 보여주는데 이 과정을 페이지 렌더링이라고 한다.
사용자가 페이지와 상호작용하거나, JavaScript에 의해 콘텐츠가 변경되면, 브라우저는 이 과정을 반복하여 화면을 업데이트 해준다.
HTTP 프로토콜의 요청 메소드와 상태 코드
- 요청 메서드: 클라이언트가 서버에게 특정 작업을 요청할 때 사용하는 명령어이다.
- GET(데이터 요청): 서버로부터 데이터를 요청하는 메소드로 데이터 조회, 웹 페이지 로드 등에 사용한다.
- POST(데이터 전송): 서버에 데이터를 전송하는 메서드로 데이터 제출, 폼 전송 등에 사용한다.
- PUT(데이터 갱신): 서버의 리소스를 갱신하거나 새 리소스를 생성하는 메서드로 데이터 갱신, 리소스 생성 등에 사용한다.
- DELETE(데이터 삭제): 서버의 리소스를 삭제하는 메서드로 데이터 삭제를 위해 사용한다.
- 상태 코드: 서버가 클라이언트의 요청을 처리한 결과를 나타내는 3자리 숫자 코드들이다.
- 200번대(ex: OK, 성공): 요청이 성공적으로 처리되었음을 나타내는 코드들이다.
- 400번대(ex: Not Found, 페이지 없음): 요청한 리소스를 서버에서 찾을 수 없을 경우로 보통 사용자가 잘못된 용청을 보낸 경우가 많다.
- 500번대(ex: Internal Server Error, 서버 오류): 서버에서 처리 중 오류가 발생했음을 나타내는 상태 코드로 서버쪽에 문제가 있어서 페이지가 안나오는 경우가 많다.
HTTPS의 SSL/TLS의 역할
SSL(Secure Sockets Layer) 및 TLS(Transport Layer Security)는 HTTP 프로토콜 위에서 동작하며 데이터 전송 시 보안을 강화하고, 데이터 무결성과 서버 인증을 제공해준다.
암호화와 인증
- 데이터 무결성: 데이터가 전송되는 동안 변조되지 않았는지를 확인하는 기능을 제공한다. 이를 통해 수신자는 데이터가 원래 전송된 형태와 일치하는지 확인이 가능하다.
- 서버 인증: 클라이언트(사용자)와 서버 간의 연결을 암호화하기 전에, 서버가 신뢰할 수 있는 인증 기관(CA)에 의해 인증되었음을 보장해준다.
- 데이터 전송 시 보안 강화: SSL/TLS는 데이터가 네트워크를 통해 전송될 때 암호화하여 제 3자가 데이터를 읽거나 변조할 수 없도록 한다. 암호화된 데이터는 중간에 있는 누군가가 쉽게 해독할 수 없으며, 이로 인해 데이터가 안전하게 전송된다.
URL 구성요소
- 프로토콜(Protocol): URL의 시작 부분에 위치하며, 웹 페이지와 서버 간의 통신 방식을 규정한다. 일반적으로 http 또는 https가 사용된다.
- 도메인(Domain): URL 중앙 부분에 위치하며, 웹 사이트의 고유한 주소를 나타낸다. 도메인은 DNS를 통해 IP 주소로 변환된다.
- 경로(Path): 도메인 뒤에 위치하며, 웹 사이트 내의 특정 리소스나 페이지를 식별 가능하고 서버 내에서 리소스의 위치를 지정해준다.
- 쿼리 문자열(Query): URL의 마지막 부분에 위치하고, 웹 페이지에 전달할 추가 정보를 포함하며 ?로 시작하며, 매개변수와 값을 &로 구분한다.
웹 페이지 구성 요소(HTML, CSS, JavaScript)
HTML(Hyper Text Markup Language)
웹 페이지의 구조를 정의하는 마크업 언어로 웹 페이지의 내용과 구조를 정의하는데 사용한다. 텍스트, 이미지, 링크, 폼 등 다양한 요소를 포함하고 웹 브라우저가 웹 페이지를 표시하는데 필요한 정보를 제공해준다.
- 태그(Tag): HTML 문서는 태그로 구성되며 태그는 <열기 태그>와 </닫기 태그>로 구성된다. 웹 페이지의 콘텐츠를 구조화하는 데 사용한다.
- 속성(Attribute): HTML 태그는 추가적인 정보를 제공하기 위해 속성을 가진다. 속성은 태그의 기능을 조절하거나 내용을 수정하는데 사용한다.
CSS(Cascading Style Sheets)
웹 페이지의 스타일을 정의하는 언어로 CSS를 사용해 웹 페이지의 레이아웃, 색상, 폰트, 간격 등을 설정한다. CSS는 HTML의 구조와 내용을 시각적으로 꾸미는 데 사용한다.
- 인라인 스타일: HTML 요소 내에서 직접 스타일을 정의하는 방법으로 style 속성을 이용해 요소에 직접 CSS 스타일 적용한다. (ex: <p style="color: blue;">파란색</p> )
- 내부 스타일 시트: HTML 문서의 <head> 섹션 내에 <style> 태그를 이용하여 정의한다.
(ex: <style> p { color: blue; } </style> ) - 외부 스타일 시트: 별도의 CSS 파일을 생성하여 웹 페이지에 링크하는 방법으로 여러 HTML 문서에서 동일한 스타일을 적용할 때 사용한다. (ex: <link rel="stylesheet" href="style.css"> )
JavaScript
웹 페이지의 동적 동작을 제어하는 프로그래밍 언어로 페이지의 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리하는데 사용한다. 변수는 let, const를 이용해 선언하고 함수는 function 키워드를 사용한다.
변수 선언, 함수 정의, 조건문, 반복문 등의 기본적인 문법을 사용한다.
- <script> 태그: JavaScript 코드를 HTML 문서에 포함시키기 위해 <script> 태그를 사용하며 <script> 태그는 HTML 문서의 <head> 태그 내부나 <body> 태그 내부에 배치가능하다.(이 때 <body>태그 에는 </body>태그 위에 배치한다.)
외부 JavaScript 파일을 링크하는 것도 가능하다. (ex: <script src="script.js"></script>) - <head>태그 내에 위치하는 경우
- 장점: 스크립트가 페이지 로딩 이전에 로드되므로, 초기화된 JavaScript가 바로 사용할 수 있다. 예를 들어, 페이지 로딩 이전에 이벤트 핸들러를 설정해야 할 경우 유리하다. 그리고 검색 엔진 크롤러가 페이지의 스크립트를 쉽게 인식하고 분석할 수 있다는 장점이 있다.
- 단점: 스크립트 파일이 크면 페이지 로딩 속도가 느려질 수 있으며(스크립트를 로드하고 실행하는 동안 HTML 렌더링이 차단되기 때문), 콘텐츠가 늦게 표시되면 사용자 경험이 떨어질 수 있다.
- <body>태그 끝에 위치하는 경우
- 장점: HTML 콘텐츠가 먼저 로드되므로 페이지가 빠르게 보인다는 장점이 있으며 JavaScript는 콘텐츠가 모두 로드된 후에 실행되므로 렌더링이 차단되지 않는다. 그리고 페이지 콘텐츠가 먼저 보이기 때문에 사용자에게 빠르게 콘텐츠를 제공 가능하다는 장점도 있다.
- 단점: JavaScript가 HTML 요소를 조작하기 전에 로드될 때까지 기다려야 하기 때문에, 페이지 초기화 시점에 문제가 발생할 수 있다.
- <head>에 defer 또는 async 속성을 사용하는 경우
(ex: <head><script src="script.js" defer></script></head>)- defer 장점: HTML 로드와 JavaScript 로드를 병렬로 진행하지만 JavaScript는 HTML이 모두 파싱된 후에 실행되므로 렌더링을 방해하지 않는다. 그리고 HTML이 완전히 로드된 후에 스크립트가 실행되므로, DOM을 안전하게 조작이 가능하다.
- async 장점: 스크립트가 로드되는 즉시 실행되며 이 방법은 스크립트 간의 의존성이 없을 때 유용하다.
- async 단점: 스크립트 로드 순서가 보장되지 않으며 이는 스크립트 간 의존성이 있을 때 문제가 될 수 있다.
'CS' 카테고리의 다른 글
| [CS] 웹 서버와 웹 애플리케이션 (0) | 2024.08.13 |
|---|---|
| [CS] 소프트웨어 문서 (0) | 2024.07.31 |
| [CS] 빅데이터 및 인공지능 (0) | 2024.07.30 |
| [CS] 네트워크 (0) | 2024.07.29 |
| [CS] 소프트웨어 설계 (0) | 2024.07.26 |