0andme.github.io
0andme gitHub

웹 작동 방식

클라이언트 + 서버 / 웹 동작 방식/ 웹페이지 구성 파일 분석 순서
May 20, 2022
  1. 네크워크

How the web works


클라이언트와 서버

클라이언트는 일반적인 웹 사용자의 연결 장치와 해당 장치에서 사용할 수 있는 웹 브라우저를 말한다.

서버는 웹 페이지, 사이트, 앱을 저장하는 컴퓨터이다. 클라이언트가 웹 페이지에 액세스 하려고 하면 웹 페이지의 복사본이 서버에서 클라이언트로 전송되어 사용자의 웹 브라우저에 표시된다.

클라이언트와 서버
클라이언트와 서버

기본적으로 클라이언트에서 정보를 요구하면 해당 정보를 서버가 전송해주는 것이다. 이때 거치는 것들이 많다.
  • 인터넷 연결 :데이터를 전송받고 보내기 위해서는 인터넷에 연결이 되어야 한다.
  • TCP/IP : 데이터가 인터넷을 통해 이동하는 방법을 정의한 프로토콜
  • DNS : DNS는 웹사이트 주소록과 같다. 브라우저에 웹주소를 입력하면 DNS에서 해당 웹사이트의 ip주소를 찾는다.
  • HTTP : HTTP는 클라이언트와 서버가 서로 통신할 수 있는 언어를 정의하는 프로토콜이다.
  • 클라이언트와 서버간의 통신데이터 종류
    • 웹 페이지 구성 파일 : html, css, js 등등
    • 이미지, 음악, 비디오, 문서등의 소스파일

웹 동작 방식

브라우저에서 웹 주소를 입력했을 때 일어나는 일을 간단히 나타내면 아래와 같다.

  1. 브라우저는 DNS서버로 이동하여 웹사이트가 있는 서버의 실제 주소를 찾는다.
  2. 브라우저는 서버에게 HTTP메시지를 보내 웹사이트의 사본을 요청한다. 이 메시지 뿐 아니라 브라우저가 요청한 데이터는 TCP/IP를 사용하여 전송된다.
  3. 서버가 클라이언트의 요청을 승인하면, 서버는 승인 메시지를 클라이언트에 보낸 후 복사본을 작게 나눠 TCP/IP를 통해 전송한다.
  4. 클라이언트는 받은 복사본을 다시 하나의 복사본으로 모아 사용자에게 표시해준다.

웹 페이지 구성 파일 분석 순서

  • 브라우저는 html 파일을 분석하여 <link>를 통해 css를 <scrip> 태그를 통해 js파일을 인식한다.
  • 해당 파일을 서버로부터 요청하고 받은 이후 해당 파일을 분석한다.
  • html내에 DOM트리를 생성-빌드하고 CSSOM 구조를 생성-적용, 분석된 js를 컴파일 및 실행하면 사용자는 웹 페이지를 볼 수 있다.

Profile picture