이 글은 Academind - How The Web Works를 참고하여 작성되었습니다. 자세하게 알고싶으신 분은 해당 링크를 참고해주세요.
웹사이트에 접속할 때 일어나는 일
URL 처리
대게 사용자가 접속을 원하는 웹페이지는 사용자가 사용하는 기기에 저장되어 있지 않습니다. 따라서 해당 웹페이지가 저장되어 있는 다른 곳에서 웹페이지를 받아올 필요가 있습니다. 이 때, 웹페이지가 저장되어 있는 곳을 서버라고 부릅니다. 이 서버는 웹페이지를 사용자에게 제공하는 역할을 합니다.
여러분들이 velog.io에 접속한다고 가정해보겠습니다. velog.io와 같은 도메인은 하나의 별칭의 개념과 비슷합니다. 실제 각 서버를 구분하기 위해 우리는 IP 주소를 사용합니다. 따라서 여러분들이 브라우저에 velog.io을 입력하면 브라우저는 velog.io의 IP 주소에 웹사이트에 대한 요청을 보내게 됩니다.
우리는
velog.io뿐만 아니라velog.io/@cada와 같이 브라우저에 입력할 수 있습니다. 여기에서@Cada@는 경로를 나타냅니다. 또, 접미사로 사용되는www는 서브도메인을 나타냅니다. 이것들을 모두 포함하여 URL이라고 부릅니다.
그렇다면 어떻게 도메인 주소가 IP 주소로 변환되어 사용될 수 있을까요? 이것은 인터넷상에 존재하는 DNS(Domain Name System)이 그 역할을 수행하기 때문입니다.
DNS는 도메인을 IP주소로 변환해주는 일을 합니다.
따라서 브라우저에 도메인을 입력하면 DNS가 먼저 도메인을 받아 도메인에 해당하는 IP 주소를 전달해줍니다.
요청 전송
브라우저에 도메인을 입력하면 DNS에 의해 IP 주소를 얻을 수 있고, 그 IP 주소에 우리가 원하는 웹사이트에 대한 요청을 전송합니다.
이 요청에는 URL에 포함된 경로, 그리고 요청 방법 등 여러가지 정보들이 담겨있습니다.
이러한 정보들은 HTTP(Hypertext Transfer Protocol)로 전송이 됩니다. HTTP에 대해 더 알고싶다면 이곳을 참고해주세요.
모든 과정과 형식이 HTTP 통신으로 규격화와 표준화가 되어있기 때문에 세부 내용에 대한 부분은 크게 신경쓸 필요가 없습니다.
서버는 요청을 받아 적절하게 처리하고 다시 응답을 보냅니다. 응답은 요청과 비슷하게 동작하며 마찬가지로 HTTP 통신을 사용합니다. 쉽게 요청에 대한 반대 방향이라고 보면 쉽게 이해할 수 있습니다.
응답은 요청과 마찬가지로 여러가지 데이터를 담고있습니다. 만약 웹사이트에 대한 요청이었다면 웹사이트를 화면에 렌더링하기 위한 코드가 포함되어있을 것입니다.
서버는 어떻게 각 요청을 처리할 수 있을까요?
각 요청에 대한 응답은 웹 개발자가 정의합니다. 이 응답들은 꼭 웹사이트일 필요는 없으며 이미지, 파일 등 어떠한 형태의 데이터도 응답으로서 사용될 수 있습니다.
서버에는 여러 종류가 있습니다. 웹사이트를 요청에 따라 동적으로 생성하여 제공하는 서버(e.g. 프로필과 같은 개인정보에 대한 웹사이트), 미리 생성된 HTML 페이지를 제공하는 서버(e.g. 뉴스 페이지), 혹은 두 가지를 섞은 서버도 있습니다. 또, 미리 생성된 HTML 페이지를 제공하지만 브라우저에서 화면과 데이터를 조작할 수 있는 페이지를 제공하는 서버도 있습니다.
더 자세하게 알고싶다면 이곳을 참고해주세요.
응답 파싱
이제 여러분들의 브라우저는 서버로부터 응답을 받았습니다. 하지만 아직 화면에는 아무 것도 보이지 않습니다. 응답 패킷에 대한 파싱을 먼저 수행해야하기 때문이죠.
HTTP 통신으로 서버가 요청 패킷을 어떻게 받는지 신경을 쓰지 않아도 되는 것처럼 우리는 응답 패킷을 어떻게 받을지 신경 쓰지 않아도 됩니다.
브라우저가 응답 패킷에 포함된 데이터와 메타데이터를 확인합니다. 이 데이터들에 따라 다음 동작을 할지 결정됩니다.
만약 PDF 파일을 요청했다면 브라우저에는 해당 PDF가 열릴 것입니다. 이렇게, 브라우저는 받은 데이터나 파일에 따라 가장 적절한 동작을 수행합니다.
그렇다면 웹사이트에 대한 응답은 어떻게 처리될까요?
웹사이트는 text/html 타입으로 받습니다. 이 타입은 브라우저가 응답 패킷에 포함된 HTML 코드를 파싱하여 화면에 출력하도록 합니다.
브라우저는 HTML 코드를 어떻게 파싱하고 출력해야 하는지 알고있기 때문에 웹사이트 요청에 대한 응답도 쉽게 동작할 수 있게 됩니다. 우리는 어떻게 동작하는지 몰라도 되지만요!
페이지 출력
브라우저는 서버가 보낸 응답 패킷에서 HTML 코드를 파싱하여 화면에 출력합니다.
HTML은 페이지의 구조를 나타내기 위한 마크업 언어입니다.
즉, 스타일과 같은 정보는 포함하고 있지 않습니다. 그렇다면 멋있고 아름다운 페이지는 어떻게 보여지는 것일까요? 그것은 페이지는 CSS(Cascading Style Sheet)에 의해서 스타일링이 되기 때문입니다.
이 CSS는 어떻게 웹사이트에 적용되어 보여질까요?
사실 요청 패킷은 서버로 한 번만 보내지는 것이 아닙니다. HTML을 먼저 요청하여 받은 후에, HTML에 포함된 데이터에 따라 서버에 추가적으로 요청을 보낼 수 있습니다.
HTML 파일에 아래와 같은 코드가 있다면 서버에 해당 파일을 추가적으로 요청하여 웹페이지 구성에 활용합니다.
<link rel="stylesheet" href="/page-styles.css" />
이와 비슷하게 동적 동작을 위해 자바스크립트도 요청하여 활용합니다.
