[WEB] 웹 브라우저 동작원리 와 과정

 

웹 브라우저의 동작 과정 및 원리

 

웹 브라우저는 어떻게 동작 하는지?

그리고 그 원리에 대해서 정리해 보았다. 

 

 

 

---

 

 

아래는 웹 브라우저의 동작 과정을 이미지로 정리 한 것이다.

 

 

웹 브라우저의 동작 과정

 

위 이미지 순서도와 함께

과정에 대해 설명을 하도록 하겠습니다 ㅎㅎ

 

무슨 소리야? 할 수 있겠지만..

자주 읽고 보다보면 언젠가 아! 하는 날이 오니까 

다들 화이팅.. 합시다..

 

 

1. 브라우저 주소창에 URL 입력 후 ENTER를 하면,

 

 

2. 브라우저는 해당 URL과 매핑되는 IP주소를 찾기 위해

Cache를 통해 DNS 기록을 찾는다.

 

 

3. 요청한 URL이 Cache에 존재하지 않으면, 

ISP의 DNS서버는 IP 주소 정보를 찾기 위해 DNS 쿼리를 한다.

 

 

4. IP 주소를 받은 브라우저는

서버와의 TCP(전송 제어 프로토콜) 연결을 시작한다.

 

1. 브라우저가 IP 주소를 받게 되면,

해당 IP 주소의 서버와 통신하기 위해 연결을 맺으려고 한다.

 

2. 브라우저는 인터넷 프로토콜을 사용해 그러한 연결을 맺는다.

 

3. 이러한 프로토콜에는 몇몇 종류가 있지만, 

TCP가 다양한 타입의 HTTP 요청들을 위해 가장 일반적으로 사용되는프로토콜이다.

 

4. TCP 연결을 맺어야 내 컴퓨터와 서버가 통신을 할 수 있는데,

이런 연결은 TCP/IP three-way handshake라는 프로세스를 통해 맺어진다.

 

5. 클라이언트가 새로운 연결을 허용해 줄건지 묻는

SYN 패킷을 인터넷을 통해 서버에게 전송한다.

 

6. 만약 서버가 새로운 연결들을 받아줄 수 있는 Port들을 열어두고 있었다면,

SYN에 대한 응답으로 SYN/ACK 패킷을 돌려준다.

 

7. 클라이언트가 SYN/ACK 패킷을 서버로부터 받으면,

그에 대한 ACK 패킷을 서버에게 전송하면 TCP 연결이 맺어지게 된다.

 

 

5. 브라우저가 HTTP 요청을

웹 서버(Web Server)에게 전송한다.

 

1. TCP 연결이 맺어지게 되면,

브라우저는 GET 요청을 해당 URL의 웹 페이지를 요청하기 위해 전송한다.

만약, form을 submit하면 POST요청을 보낸다.

 

2. 이러한 요청은 브라우저 식별자(User-Agent header)나 받게 될 요청들의 타입(Accept header), 

추가적인 요청들을 위해 TCP 연결을 계속 유지할 것인가를 묻는 connection header와 같은 추가적인 정보를 가지고 있다.

또한 브라우저가 해당 도메인을 위해 저장해 두고 있던 cookie에서 가져온 정보들도 전달한다.

 

 

6. 서버가 요청을 처리 후 응답을 전달한다.

 

1. 서버는 브라우저로부터 온 요청들을 받는

Web Server(apache나 IIS 같은 것)를 가지고 있다.

 

2. Web Server는 요청 핸들러(Request Handler)에게

이 요청을 읽고 응답을 만들어 내라고 요청을 전달한다.

 

3. 요청 핸들러들은 ASP.NET, PHP, Ruby 등으로 구현되어 있다.

 

4. 이 요청 핸들러들은 어떤 게 요청되었는지,

그리고 만약 필요하다면 서버에 있는 정보를 업데이트 하기 위해 

요청과 요청의 header, 그리고 cookie를 읽는다.

 

5.그리고 응답을 특정 포맷(JSON, XML, HTML)으로 조합한다.

 

 

7. 서버가 HTTP 응답을 보낸다.

 

1. 서버의 응답이 포함하고 있는 것들

• 요청한 웹페이지
• 상태 코드 압축 타입 (content-encoding)
• 어떻게 페이지를 캐시할 것인지 (cache-control) 
• 쿠키들 
• 보안 정보 
• 기타

 

2. HTTP 상태 코드 

👉🏼 응답의 상태를 알 수 있는 코드이다. 숫자 코드를 사용하는 5개 종류의 상태가 있다.

• 1xx : 오직 정보 메시지만 의미함
• 2xx : 어떤 종류의 성공을 의미함
• 3xx : 클라이언트를 다른 URL로 리다이렉트
• 4xx : 클라이언트에 의한 에러를 의미함
• 5xx : 서버에 의한 에러를 의미함

 

 

8. 브라우저가 HTML content를 보여준다.

 

1. 브라우저는 HTML content를 단계별로 보여준다.

 

2. HTML skeleton을 렌더링 한다.

 

3. HTML 태그를 확인하고

웹 사이트에 있는 이미지나 CSS, JavaScript 파일들 같은

추가적인 요소들을 GET method로 요청한다.

 

4. 이러한 정적 파일들은

브라우저에 의해 캐시 될 수 있기 때문에

이 페이지를 다시 방문했을 때 다시 요청해서 가져오지 않아도 된다.

 

5. URL을 통해 요청했던 페이지를 브라우저에서 볼 수 있게 된다.

 

---

 

이렇게,

웹 브라우저 동작 과정에 대해 정리를 해보았는데요

도움이 되셨음 좋겠습니다..

 

개발자라면 꼭 알아야하는 필수 지식이면서도

면접에서도 자주 나오는 질문이니깐요

 

화이팅 

😎