웹 브라우저 동작원리

Q. 웹 브라우저에 google.com 을 치는 순간 일어나는 일을 설명해주세요.

사용자가 주소창에 google.com을 입력하면, 가장 먼저 브라우저가 이 주소를 해석합니다. 그런데 컴퓨터는 실제로 문자로 된 주소를 모르기 때문에, Domain Name Service(DNS)라는 시스템을 통해 IP 주소로 변환하는 작업이 필요합니다. IP 주소를 찾았다면, 이제 구글 서버와 통신을 시작합니다. TCP라는 프로토콜을 사용해서 서로 안전하게 데이터를 주고받을 수 있는 연결을 맺습니다.. 요즘은 보안이 중요하니까 HTTPS를 통해 암호화된 통신을 하구요. 연결이 완료되면 브라우저가 구글 서버에게 웹페이지를 요청합니다. 서버는 이 요청을 받아서 HTML이라는 문서를 보내주죠. 브라우저는 받은 HTML을 해석해서 우리가 보는 화면으로 그려냅니다. 이 과정에서 이미지도 불러오고, 자바스크립트도 실행하고, 여러 가지 작업들이 이루어집니다. 이렇게 해서 최종적으로 우리가 알고 있는 구글 검색 페이지가 화면에 나타나게 됩니다.

Q. 서버에서 그려서 주는 것과 클라이언트에서 그리는 것의 차이를 알고 계신가요?

네, 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)입니다. 가장 큰 차이점은 페이지를 그리는 주체와 시점입니다. 서버에서 그리는 경우는, 사용자가 페이지를 요청하면 서버에서 모든 데이터를 조합해서 완성된 HTML을 전달해줍니다. 반면 클라이언트에서 그리는 경우는, 서버에서는 빈 HTML과 JavaScript 파일만 전달하고, 실제 브라우저에서 JavaScript가 실행되면서 페이지를 그리게 됩니다. 각각의 장단점도 있는데요, 서버에서 그리는 경우는 초기 로딩이 빠르고 검색엔진 최적화(SEO)에 유리합니다. 하지만 서버 부하가 크고 사용자 상호작용마다 새로고침이 필요할 수 있죠. 클라이언트에서 그리는 경우는 서버 부하가 적고 동적인 사용자 경험을 제공할 수 있습니다. 하지만 초기 로딩이 느리고 SEO가 어려울 수 있다는 단점이 있습니다. 최근에는 이러한 장단점을 모두 고려해서 Next.js나 Nuxt.js 같은 프레임워크들이 페이지의 성격에 따라 서버 렌더링과 클라이언트 렌더링을 적절히 조합해서 사용하는 하이브리드 렌더링 방식을 제공하고 있습니다.

Q. DNS 동작 과정을 설명해주세요.

DNS는 브라우저가 도메인 주소를 찾을 때 단계별로 찾아가는 계층적인 구조로 되어있습니다. 먼저 가장 가까운 곳인 브라우저 캐시에서 찾아보고, 그 다음은 운영체제의 DNS 캐시를 확인합니다. 여기서도 못 찾으면 hosts 파일도 확인해보죠. 이렇게 로컬에서 찾지 못하면 이제 실제 DNS 서버에 물어보게 됩니다. DNS 리졸버라고 하는데, 보통 통신사나 구글 DNS(8.8.8.8) 같은 것들이 있습니다.. 이 리졸버가 루트 DNS 서버부터 시작해서 차근차근 찾아갑니다. 예를 들어 google.com을 찾는다고 하면, 먼저 .com을 관리하는 최상위 도메인 서버에 물어보고, 거기서 다시 google.com을 관리하는 서버 정보를 받아서 최종적으로 IP 주소를 알아내게 됩니다. 이렇게 찾은 정보는 일정 시간 동안 캐시로 저장해두기 때문에, 다음에 같은 도메인을 찾을 때는 더 빠르게 접속할 수 있습니다. 이런 계층적인 구조 덕분에 전 세계의 수많은 도메인 정보를 효율적으로 관리하고 찾을 수 있습니다.