웹(Web)
인터넷 상에서 정보를 제공하거나 접근할 수 있는 서비스 (웹 애플리케이션)
인터넷: 네트워크 인프라 구조로, wb, e-mail, telnet 등
웹 기본 동작
- 클라이언트 - 서버 모델
- 클라이언트: 사용자 컴퓨터, 서버: 웹 사이트를 호스팅하는 컴퓨터
- 클라이언트가 서버한테 요청(url)을 보내고, 서버는 요청에 따라 데이터를 응답하는 방식(view에서 url 패턴 처리)
- 검색, 로그인, 회원가입 등
- HTTP 요청 - 응답
- 클라이언트가 웹 페이지를 요청하면 서버는 요청을 처리하고 HTML 문서를 반환함
- 클라이언트는 이를 해석해 화면에 표시
HTTP/ HTTPS
HTTP
HyperText Transfer Protocol의 약어로, 월드 와이드 웹(WWW)에서 웹 페이지를 주고받기 위해 사용되는 프로토콜
- 데이터를 평문으로 전송하기 때문에 네트워크 트래픽의 경우 데이터가 쉽게 유출될 수 있음
- 암호화 과정이 없어 속도는 약간 빠를 수 있음
- 기본적으로 80번 포트 사용
HTTPS
HTTP에 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)라는 암호화 프로토콜을 결합
- 중간에 데이터가 노출되도 내용을 읽을 수 없도록 보호
- 데이터가 전송되는 도중 변경되거나 손상되지 않았는지 확인 가능
- SSL/TLS 인증서를 사용하여 서버의 신원을 확인
- 기본적으로 443번 포트 사용
브라우저
웹 서버로부터 HTML, CSS, JavaScript 파일을 요청하고 응답받아 이를 파싱(해석)하는 단계
HTML 파싱
HTML (Hyper Text Markup Language): 웹 페이지의 구조를 정의하는 마크업 언어, 필요한 정보 제공
- 브라우저-> HTML 파일 파싱 후 DOM(Document Object Model) 트리 구축
- DOM 트리: HTML 문서의 구조를 계층적으로 표현한 객체 모델로, 각 HTML 요소가 하나의 객체로 표현
- HTML 문서를 순차적으로(위에서 아래로) 읽어 내려가며, HTML 태그들을 각각의 DOM 노드로 변환하고, 이 노드들이 부모-자식 관계를 통해 트리 구조로 연결
CSS 파싱
CSS(Cascading Style Sheets): 웹 페이지의 스타일을 정의하는 언어, HTML의 구조와 내용을 시각적으로 꾸밈
- 브라우저-> CSS 파일 파싱 후 CSSOM(CSS Object Model) 트리를 구축
- CSSOM 트리: 스타일 규칙들을 객체 모델로 변환한 것, 각 규칙이 적용될 HTML 요소와 연결
- CSS 규칙의 상속과 우선순위(계단형) 등이 계산
JavaScript 파싱
JavaScript: 웹 페이지의 동적 동작을 제어하는 프로그래밍 언어, 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리
- 브라우저-> JavaScript 파일을 해석하여 실행
- DOM이나 CSSOM 트리에 접근하여 동적으로 HTML 요소를 추가, 제거하거나 스타일을 변경 가능
- 비동기적으로 실행될 수 있으며 때로는 DOM이 완전히 로드된 후에 실행