Table of Contents
들어가며
웹이 어떻게 이뤄져있는가? 웹 브라우저는 어떻게 동작하는가?
우리가 인터넷 브라우저 검색창에 www.naver.com 을 입력했을 때 대충 어떤 일들이 어떻게 일어나는가?
본인은 네트워크 전문가가 아니다. 다만, 백엔드를 검색해도, 프론트엔드를 검색해도, HTML을 검색해도 각자 본인의 영역에서 본인이 아는 네트워크의 일부분만 설명하니 전체적인 개요를 명쾌히 이해할 수가 없었다. 그래서 이런저런 조사를 통해 brief 하게 이해한 브라우저와 웹에 대해서 설명해본다.
웹 브라우저가 화면을 보여주는 원리
Client 브라우저
1. 사용자가 웹 브라우저에 www.naver.com 입력하면,
DNS 서버
2. DNS 서버(보통 구글)에서 www.naver.com 의 ip가 어떤 것인지 찾아준다,
Web Server
3. 해당하는 ip와 사용자의 ip간에 http or https connection(보통 포트 80)이 생긴다
4. 이 커넥션을 담당하는 서버를 웹 서버(nginx, apache httpd 등, 다만 개념은 약간 모호함)라고 함
5. 웹은 파일서버나 파일시스템과 비슷하다. 웹 서버는 단순히 파일 요청을 받고 요청한 파일을 찾아 전송해준다.(웹 서버는 파일만 전해줄 뿐, 이를 브라우저에 보이는 것(파싱 & 렌더링)은 온전히 사용자의 브라우저의 몫이다.)
Web Application Server
6. 하지만, 우리가 보는 naver는 그 화면 frame(html)은 같으나 그 컨텐츠들은 매번 다르다. 다시말해 컨텐츠들은 동적으로 만들어질 필요가 있다.
7. 동적으로 컨텐츠를 만들기 위해 was가 개입한다. Web application server의 약자로, web server와는 다르게 컨텐츠를 채우는 용도다. Was는 jeus, tomcat, django 등이 있다.
8. 아무튼 was는 웹서버로부터 파일 요청을 받으면, 해당 파일에 빈칸을 채워넣어 웹서버로 전달하고, 웹서버는 이를 사용자에게 전달해준다.
Browser Engine
9. 여기서 해당 파일이라함은 보통 html이다. Html은 브라우저에 비춰질 웹페이지 화면의 정의서 느낌.
10. Html에 화면구성, 구성에 필요한 스타일(.css 파일), 구성에 필요한 동적 파일, 스크립트(.js 파일) 등이 동봉 된다.
11. 사용자의 웹 브라우저에는 엔진이 있어서, 웹서버로 부터 받은 html 파일을 파싱한다. Html 파싱을 하다가 .css 파일, 동적 파일, 스크립트 등이 등장하면 파싱을 중단하고 .css 처리, 파일 다운, 스크립트 처리 등으로 프로세스가 넘어간다. 절차적 언어의 함수 스택과 비슷하게 들어가다가 다 끝나면 다시 해당 부분으로 돌아간다.
12. 모든 html 프로세싱이 끝나면(css 전부 처리, 파일 전부 다운, 스크립트 전부 처리) DOM이 만들어져서 이를 브라우저에 뿌려준다.
13. 모두 처리 후 렌더링을 한다… 듣기만 해도 느리기 때문에 javascript를 비동기 방식으로 해결하는 일이 많음.
14. Javascript는 나를 헷갈리게 하는 주범이었다. 웹 애플리케이션도 아닌 것이 페이지에서 동적인 기능만 담당하는 것도 아닌 것이라… 하지만 우선 심플하게 보면 javascript는 단순히 웹 브라우저 내에서 동적인 기능을 담당하는 존재가 맞다.
15. 웹 페이지 내에 버튼을 클릭했다면, 다른 페이지로 링크가 되어 위의 내용을 반복할 수도 있지만, 같은 페이지 그대로 특정 부분의 데이터만 바뀔 수도 있고, 어떤 컴포넌트가 펴지거나 접어지거나 등 동작이 있을 수도 있다. 이런 내용을 정의하는 부분임.
이건 빙산의 일각일 뿐
우리가 단순히 크롬 브라우저에 www.naver.com을 입력해도 내부에서는 이리도 많은 일들이 발생한다. 여기서 CDN, 자바스크립트의 비동기, 서버 사이드의 로드 밸런싱 등 수많은 기술들을 담지 않았다. 그래도 이 정도면 웹의 프론트와 백이 어떤 식으로 서로 상호작용 하는지는 대충은 이해할 수 있을 것이다.
답글 남기기