나는 오늘도 멋있다

브라우저의 동작 원리 본문

Web/CS

브라우저의 동작 원리

나는 오늘도 멋있다 2024. 4. 4. 18:55
1. 모든 행동에는 목표를정하고, 근거가 있어야 한다
2. 다른사람의 관점을 고려하자
3. 문제가 발생하였을때는 해결보다는 원인을 찾자
4. 알고자하는것의 정의는 무엇인가?
5. 알고자하는것의 의도하는 바는 무엇인가?

목적
브라우저의 동작원리를 파악하여, Vanilla JS로 개발하였을경우 문제점과, Virtual DOM의 필요성을 파악하고자 조사한다

 

#간단요약

1. 사용자가 브라우저 도메인을 입력한다

 

2. 운영체제가 내부 DNS 캐시에서 사용자가 입력한 도메인IP를 찾는다.

# DNS란?: 입력받은 도메인에 대한 IP를 찾아주는 시스템

 

3. 내부 DNS에서 해당 도메인을 찾지 못한다면 외부 DNS 서버로 조회 요청을 보낸다

#한번도 방문한 적이 없다면 외부 DNS 조회

 

4. 외부 DNS에서 해당 도메인에 대한 IP를 브라우저에게 반환

# IP는 일정 기간 동안 캐시된다

 

5. 브라우저는 반환 받은 IP로 해당 서버와 TCP 3방향 헨드셰이크를 통해 연결을 설정함

# TCP 핸드셰이크란?: 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정

# TLS 협상?: HTTPS를 이용한 보안성있는 연결을 위한 통신암호화, 서버확인, 데이터 전송에 대한 안전성

# 8 번의 왕복이 이루어진다?

 

6. web server로 연결이 성립되고 나면, 브라우저는 HTTP GET Request를 보낸다.

# webServer(정적?): HTML,CSS,JavaScript등을 종합하여 생성하고 클라이언트에게 반환해주는것

# web Application Server(동적?): HTML,CSS,JavaScript등을 종합하여 생성하고 클라이언트에게 반환해주는것

# SSR and CSR에 따라 받은 데이터(파일) 구조가 틀린것 같다.

 

7. server에서 HTML, CSS, JavaScript등의 파일과 함께 HTTP응답을 반환한다

 

8. 브라우저가 받은 데이터에 대해서 구문분석을 시작

9. 브라우저는 HTML파일을 파싱하여 DOM트리를 만든다

10. 

9. 

'Web > CS' 카테고리의 다른 글

JavaScript의 동작 - 1 (stack,heap,Event Loop)  (0) 2024.03.27
함수형 프로그래밍  (0) 2024.03.26
컴퓨터 부품조사  (2) 2024.01.11
CORS(Cross-Origin Resource Sharing)에 대해서  (1) 2023.12.06