<Web> 웹의 동작방식

이번 글에서는 웹의 동작방식 대해 공부한 내용을 작성해 보겠습니다.

조금 구구절절할 수 있지만 최대한 정리해 작성해 보겠습니다.

 

도망친곳에 낙원은 없다 = 도망쳐서 도착한곳에 낙원은 없다 스스로의 삶과 직면하지 않으면 아무것도 해결되지 않는다 죽음을 경험한다는 것은 굉장히 슬픈일이지만 죽음을 곁에 두고 살면 삶이 행복해진다 죽음이 곁에 있다는 것을 알면 지금의 삶의 가치를 좀 더 잘 느낄 수 있고 인생에서 있는 선택의 문제를 단순화시켜 쉽게 할 수 있으며 지금 현재, 여기를 열심히 보다 충실히 살 수 있다.

 

항상 힘날 순 없으니... 힘을 쥐어 짜내서...

파이팅!

 

---

웹 페이지

프런트 개발자든 백엔드 개발자든 웹에 대한 전반적인 이해를 가지고 있어야 한다고 생각합니다.

 

웹 페이지는 기본적으로 HTML, CSS, JavaScript 등의 기술을 사용하여 구현됩니다.

HTML은 웹 페이지의 구조를 정의하는 데 사용되며, CSS는 웹 페이지의 스타일을 지정하는 데 사용됩니다. JavaScript는 웹 페이지에 동적인 요소를 추가하는 역할을 합니다.

웹 페이지는 웹 브라우저를 통해 사용자에게 보여지며, 사용자는 웹 서버에 요청을 보내고 웹 서버는 그 요청에 맞는 HTML, CSS, JavaScript 파일을 응답으로 보냅니다. 이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 됩니다.

 

웹의 동작 방식

 

1. 요청(Request): 사용자가 웹 브라우저를 통해 특정 URL을 입력하면, 브라우저는 해당 주소의 웹 서버에 페이지를 요청합니다.
2. 처리(Processing): 웹 서버는 요청받은 URL에 해당하는 페이지를 찾아, 필요한 처리(예: 데이터베이스 조회)를 거친 후 응답을 준비합니다.
3. 응답(Response): 준비된 HTML, CSS, JavaScript 파일 등을 사용자의 웹 브라우저로 보냅니다.
4. 렌더링(Rendering): 웹 브라우저는 받은 파일들을 해석하여 사용자에게 시각적으로 보여주는 과정을 거칩니다. 이때, CSS가 적용되어 스타일이 지정되고, JavaScript가 실행되어 동적인 요소가 활성화됩니다.

 

클라이언트는 일반적인 웹 사용자의 인터넷에 연결된 기기들(예를 들어, Wi-Fi에 연결된 컴퓨터나 모바일 네트워크에 연결된 휴대폰 등)과 그 기기들에서 사용 가능한 웹 접속 소프트웨어(보통은 Firefox나 Chrome 같은 웹 브라우저)를 말합니다.

서버는 웹페이지, 사이트 또는 앱을 저장하고 있는 컴퓨터들입니다.

클라이언트 기기가 웹페이지에 접근하고자 할 때, 해당 웹페이지의 복사본이 서버로부터 클라이언트 기기로 다운로드되어 사용자의 웹 브라우저에서 표시됩니다.

---

용어 정리

• 인터넷 연결 : 웹에서 데이터를 보내고 받을 수 있습니다.
• TCP/IP : 전송 제어 프로토콜(Transmission Control Protocol)과 인터넷 프로토콜(Internet Protocol)은 데이터가 인터넷을 통해 이동하는 방법을 정의하는 통신 프로토콜입니다.
• DNS : Domain Name System은 웹사이트의 주소록과 같습니다. 브라우저에 웹 주소를 입력하면 브라우저는 웹 사이트를 검색하기 전에 DNS를 확인하여 웹 사이트의 IP 주소를 찾습니다. 브라우저는 HTTP 메시지를 올바른 위치로 보낼 수 있도록 웹사이트가 어느 서버에 있는지 알아내야 합니다.
  
  • DNS에 대해서는 밑에서 자세히 다루겠습니다.
• HTTP : Hypertext Transfer Protocol은 클라이언트와 서버가 서로 대화할 수 있는 언어를 정의하는 응용 프로토콜입니다. 
• 구성요소 파일 :  구성요소 파일은 두 가지 주요 유형이 있습니다.
  • 코드 파일 : 웹사이트는 주로 HTML, CSS 및 JavaScript로 구축되지만 다른 기술은 나중에 접하게 됩니다.
  • 자산 : 이미지, 음악, 비디오, Word 문서, PDF 등 웹 사이트를 구성하는 다른 모든 항목의 총칭입니다.

•  

---

무슨 일이 일어나는가?

1. 브라우저는 DNS 서버로 이동하여 웹사이트가 있는 서버의 실제 주소를 찾습니다.
2. 브라우저는 서버에 HTTP 요청 메시지를 보내 웹사이트의 사본을 클라이언트에게 보내도록 요청합니다. 이 메시지와 클라이언트와 서버 간에 전송되는 기타 모든 데이터는 TCP/IP를 사용하여 인터넷 연결을 통해 전송됩니다.
3. 서버가 클라이언트의 요청을 승인하면 서버는 "승인" 의미인 "200 OK" 메시지를 클라이언트에게 보낸 다음 웹사이트의 파일을 브라우로 보내기 시작합니다. (파일을 데이터 패킷이라고 불리는 작은 덩어리로 나누어 전송합니다.)
4. 브라우저는 작은 덩어리를 완전한 웹 페이지로 모아서 사용자에게 표시합니다.

이미지 출처 :&nbsp;https://www.superwebpros.com/how-does-a-website-work/

---

구성요소 파일이 파싱 되는 순서

 

브라우저가 서버에 HTML 파일 요청을 보낼 때 해당 HTML 파일에는 외부 CSS 스타일시트를 참조하는 <link> 요소와 외부 자바스크립트 스크립트를 참조하는 <script> 요소를 포함하고 있습니다.

 

• 브라우저는 HTML 파일을 먼저 파싱 하며, 이 과정에서 <link> 요소를 통해 참조된 외부 CSS 스타일시트와 <script> 요소를 통해 참조된 스크립트들을 인식합니다.
• 브라우저는 HTML을 파싱 하는 동안,  <link> 요소에서 찾은 CSS 파일과 <script> 요소에서 찾은 JavaScript 파일에 대한 요청을 다시 서버로 보낸 다음 CSS와 JavaScript를 파싱 합니다.
• 브라우저는 파싱 된 HTML로부터 메모리 내 DOM 트리를 생성하고, 파싱 된 CSS에서 메모리 내 CSSOM 구조를 생성하며, 파싱된 JavaScript를 컴파일하고 실행합니다.
• 브라우저가 DOM 트리를 구축하고 CSSOM 트리의 스타일을 적용하고 JavaScript를 실행하면 페이지의 시각적 표현이 화면에 그려지고 사용자는 페이지 콘텐츠를 보고 상호 작용을 시작할 수 있습니다.

DOM

DOM (Document Object Model)은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.

즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜 주는 역할을 담당합니다.

 

또한, DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 합니다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 합니다.

 

노드에는 이벤트 핸들러가 연결될 수도 있습니다. 이벤트가 트리거 되면 이벤트 핸들러가 실행됩니다.

 

CSSOM (DOM + CSS)

CSSOM (CSS Object Model)은 문서의 스타일 관련(CSS) 정보를 읽고 수정하기 위한 API 집합입니다.

즉, DOM을 사용하여 JavaScript에서 문서의 구조와 콘텐츠를 읽고 수정할 수 있는 방식과 유사하게 CSSOM을 사용하면 JavaScript에서 문서의 스타일을 읽고 수정할 수 있습니다.

---

DNS란?

DNS(Domain Name System)는 인터넷 전화번호부입니다. 사람은 nytimes.com 또는 espn.com과 같은 도메인 이름을 통해 온라인으로 정보에 액세스 합니다. 웹 브라우저는 인터넷 프로토콜(IP) 주소를 통해 상호작용합니다. DNS는 브라우저가 인터넷 자원을 로드할 수 있도록 도메인 이름을 IP 주소로 변환합니다.

1. Browser DNS
2. Local DNS (/etc/hosts)
3. ISP (Internet Service Provider) = DNS Resolver (DNS 조회 및 캐시) 
4. DNS Resolver = DNS Recursor : DNS 조회를 순차적으로 재귀 수행

• Non-Authoritative : 캐싱되어있는 DNS 를 반환함을 의미
• Authoritative : 캐싱되어있지 않은 실제 NS 에 저장된 실시간 DNS 를 반환함을 의미

---

• ICANN : Root Server 관리
• Domain Registry : TLD Server 관리 (.com, .net 등) (ICANN 이 TLD 관리를 위임)
  • 예) VeriSign
• Domain Registrar : NS (Name Server) 관리 - 실제 우리가 구매, 등록하는 모든 DNS 서비스 제공
  • 예) GoDaddy, NameCheap, 가비아 등
  • Record : 다양한 타입의 Record가 있다.
    • A Record : DOMAIN NAME → IP SERVER (예, a.bootsrap.io → 1.0.0.1)
    • CNAME : DOMAIN NAME → DOMAIN NAME (예, b.bootsrap.io → a.bootsrap.io)
    • MX : MAIN DOMAIN NAME → MAIL SERVER (예, @c.bootsrap.io → mail.nv.server)
• Domain Reseller : Domain Registrar의 DNS 관리를 대신해 주면서 곳, 웹 호스팅 등을 제공
  • 예) 카페24

---