[TIL | 2024-08-30] 웹의 동작 원리와 웹 구성 요소

서론

본격적인 웹 개발을 시작하기에 앞서, 웹의 동작 방식에 대한 기본적인 개념을 이해하는 것이 중요하다고 생각하였다. 이러한 기본 지식은 웹 개발 과정에서 발생할 수 있는 다양한 상황에 문제를 해결할 수 있는 필수적인 지식이라고 생각한다! 또한 웹 구성요소에 대해 공부하였고 HTML 과 CSS를 이용하여 간단한 웹 사이트를 만들어보았다.

본론

 

웹 브라우저와 서버 간 정보 전송 과정

나는 정보를 찾기 위해 웹 브라우저인 '크롬'을 사용하여 'google.com'에 접속하고, 구글 검색 기능을 통해 필요한 정보를 검색한다. 이 과정에서 내가 웹 브라우저를 통해  구글 서버와 어떻게 정보를 주고 받는지 궁금하였고 이 과정이 어떻게 이루어지는지 정리를 해보았다.

 

웹 브라우저에서 'google.com' 입력시 동작 과정

우선 사용자가 웹 브라우저를 통해 'google.com'을 입력하면, 이 웹사이트를 찾기 위해 DNS 서버에 요청을 하게 된다. DNS 서버는 가장 먼저 컴퓨터에 저장되어 있는 호스트 파일을 확인한다. 이 파일에 'google.com'과 해당 IP 주소가 적혀 있다면, 그 IP 주소를 사용하여 연결을 시도하고 만약 호스트 파일에 원하는 정보가 없다면, DNS 서버는 로컬 DNS 캐시를 확인한다 여기에도 정보가 없으면, 외부 DNS 서버에 요청을 보내 'google.com'의 IP 주소를 찾는다

 

DNS 서버를 통해 IP 주소를 찾으면, 웹 브라우저는 이 IP 주소를 사용해 TCP 연결을 설정한다. TCP 연결이 완료되면, 웹 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 구글 서버에 전송하고 구글 서버는 HTTP 요청을 처리하고, 응답 메시지를 HTTP 프로토콜을 사용하여 다시 사용자에게 전송한다. 사용자는 응답 메시지를 받아 웹 페이지를 표시하게 되며, 웹사이트의 내용을 볼 수 있게된다.

 

 

정리

 

1. 사용자가 웹 브라우저를 통해 'google.com'을 입력한다.
2. 웹 브라우저가 DNS 서버에 요청하여 해당 구글 도메인의 IP 주소를 반환받는다.
3. 웹 브라우저는 반환받은 IP 주소를 사용해 TCP 연결을 설정한다.
4. TCP 연결이 완료되면, 웹 브라우저는 HTTP 프로토콜을 사용해 요청 메시지를 생성하고 구글 서버에 전송한다.
5. 구글 서버는 HTTP 요청 메시지를 처리하고, 응답 메시지를 생성하여 웹 브라우저로 전송한다.
6. 웹 브라우저는 응답 메시지를 받아 웹사이트를 표시한다.

 

DNS 서버 정리

DNS는 Domain Name Server의 약자로 도메인 이름을 IP 주소로 변환해주는 시스템이다. 특정한 웹사이트에 접근하기 위해 'google.com'과 같은 도메인 주소를 웹 브라우저에 입력한다. 여기서 도메인 주소는 웹사이트를 찾기 위한 이름 역할을 한다. 이를 전화번호부에 비유하자면, 도메인 주소는 전화번호부에서 찾고 싶은 사람의 이름과 같고, IP 주소는 그 사람의 전화번호와 같다. 

 

전화번호부에서 이름만으로는 전화를 걸 수 없듯이, 도메인 주소만으로는 웹사이트에 접근할 수 없다. 웹 브라우저는 도메인 주소를 사용하여 DNS 서버에 요청을 보내고, DNS 서버는 해당 도메인 주소에 대응하는 IP 주소를 찾아 반환한다. 이 IP 주소를 통해 웹사이트와 연결을 설정하고, 사용자는 웹 페이지를 확인할 수 있게된다. 즉 복잡한 IP주소를 기억하지 않아도 도메인 이름으로 웹사이트를 접속할 수 있게 해준다.

 

DNS 서버는 다음과 같은 과정을 통해 IP주소를 반환한다.

 

1. 호스트 파일 확인:
   • DNS 서버는 먼저 컴퓨터의 호스트 파일을 확인한다. 이 파일에 도메인 주소와 해당 IP 주소가 적혀 있다면, DNS 서버는 이 IP 주소를 사용하여 웹사이트에 연결을 시도한다.
2. 로컬 DNS 캐시 확인:
   • 호스트 파일에 정보가 없다면, DNS 서버는 로컬 DNS 캐시를 확인한다. 캐시에는 최근에 요청된 도메인 주소와 IP 주소의 정보를 저장하고 있다.
3. 외부 DNS 서버 요청:
   • 로컬 DNS 캐시에도 정보가 없다면, DNS 서버는 외부 DNS 서버에 요청을 보내 'google.com'의 IP 주소를 찾는다.외부 DNS 서버는 도메인 이름에 대한 정확한 IP 주소를 반환한다.
4. IP 주소 반환:
   • IP 주소를 찾으면, DNS 서버는 이를 웹 브라우저에 반환한다.

 

호스트 파일

호스트 파일은 C:\Windows\System32\drivers\etc\hosts 에 위치하고 있으며 이 파일은 도메인 이름과 IP 주소를 매핑하는 역할을 한다. 해커 들이 임의로 변경하여 다른 서버로 이동하게 만들 수 있음

 

로컬 DNS 캐시

이전에 방문한 웹 사이트의 도메인주소와 IP 주소를 저장하는 메모리이다. 이 캐시는 최근에 방문한 웹사이트에 대한 정보를 저장하여, 이후의 요청을 빠르게 처리할 수 있도록 하는 역할을한다. 윈도우에서 ` ipconfig /displaydns` 명령어를 통해 dns 캐시 테이블을 확인할 수 있다.

 

외부 DNS 서버

도메인 이름과 IP 주소를 매핑하는 공용 또는 사설 DNS 서버로, 인터넷 상의 다양한 도메인에 대한 DNS 요청을 처리한다. 호스트 파일과 로컬 DNS 캐시에 없다면 도메인을 찾기위해 외부 DNS서버에 질의한다. 윈도우는 `nslookup` 명령어를 통해 본인의 외부 DNS서버의 주소를 확인할 수 있다.

 

TCP 프로토콜 정리

TCP (Transmission Control Protocol)는 IP 프로토콜 위에서 동작하는 전송 계층 프로토콜로, 인터넷 및 기타 네트워크에서 데이터를 안정적으로 전송하기 위해 사용된다. TCP는 연결 기반의 프로토콜이며 데이터를 전송하기전 3-way-handshake 과정을 통해 서로 연결한다.

 

3-way-handshake

 

1. SYN: 연결 요청
2. SYN - ACK : 요청 확인 및 응답
3. ACK : 응답 확인
   
   

1. 송신자 컴퓨터는 수신자 컴퓨터에게 SYN 패킷을 보낸다. SYN(synchronize)의 약자로 송신자가 수신자와 통신을 시작하겠다는 것을 알리는 패킷이다.

2. 수신자 컴퓨터는 SYN 패킷을 받으면 SYN + ACK 패킷을 송신자 컴퓨터로 보낸다. 이패킷은 SYN에 대한 응답으로 수신자가 송신자와의 통신을 받아들이고, 송신자도 통신을 시작하겠다는 것을 알리는 패킷이다.

3. 마지막으로 송신자 컴퓨터는 SYN + ACK 패킷을 받으면 ACK 패킷을 수신자 컴퓨터로 보낸다. 이패킷은 ACKnowledge의 약자로 송신자가 수진자와의 통신이 가능하다는것을 알리는 패킷이다.

이렇게 3-way handshake가 완료되면 송신자와 수신자는 서로 통신을 시작할 준비가 된 상태가 된다. 좀더 쉽게 설명하여 3-way-handshake은 단순히 송신자와 수신지가 서로 통신할 준비가 완료되었는지 확인하는 단계이다. SYN에서는 "안녕하세요, 연결을 시작할 준비가 되었습니다. 제 요청을 확인해 주세요!"라고 말하며, SYN 패킷을 서버에 보내는 단계라고 생각할 수 있고 SYN-ACK 단계 에서는 "안녕하세요! 제 쪽에서도 연결을 받을 준비가 되었습니다." 이제 제 요청도 확인해 주세요."라고 응답하는 과정이라고 말할 수 있다 마지막으로 ACK는 "감사합니다! 이제 연결이 준비되었습니다."라고 응답하며, ACK 패킷을 서버에 보내며 서로 통신할 준비가 완료되있는지 확인하는 것이다. 이과정을 통해 두 컴퓨터는 연결 상태를 확인하고 안정적으로 데이터를 송수신할 수 있게 된다.

 

HTTP 프로토콜 정리

웹에서 정보를 주고받기 위해 사용되는 통신 프로토콜이다. HTTP는 웹 브라우저와 웹 서버 간의 요청과 응답을 관리하며, 웹 페이지와 관련된 데이터 전송을 가능하게 한다.

 

---

웹 구성요소

HTML (Hypertext Markup Language)

• 웹 페이지의 기본 뼈대를 만드는 언어이다.
• 정보나 구역을 정의하고 웹 페이지의 구조를 설계한다.
• HTML 문서는 태그와 요소로 구성되며, 일반적으로 .html 파일 확장자를 가진다.

CSS (Cascading Style Sheets)

• 웹 페이지의 스타일과 디자인을 정의하는 언어이다.
• HTML로 만든 구조를 어떻게 보일지를 결정한다.
• 스타일을 적용하는 방법은 인라인, 내부, 외부 스타일 시트를 통해 가능하다.

JavaScript

• 웹 페이지에 기능과 동적 효과를 추가하는 프로그래밍 언어이다.
• 사용자 상호작용에 응답하거나 웹 페이지를 동적으로 조작하는 데 사용된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>나의 웹 페이지</h1>
    </header>
    <nav>
        <a href="#about">소개</a> | <a href="#services">서비스</a> | <a href="#contact">연락처</a>
    </nav>
    <main>
        <section id="about">
            <h2>회사 소개</h2>
            <p>저희 회사는 웹 개발을 전문으로 하는 회사입니다.</p>
        </section>
        <section id="services">
            <h2>제공 서비스</h2>
            <ol>
                <li>웹사이트 개발</li>
                <li>모바일 앱 개발</li>
                <li>디지털 마케팅</li>
            </ol>
        </section>
        <section id="contact">
            <h2>연락처</h2>
            <p>문의사항이 있으시면 연락주세요</p>
            <form action="/submit" method="post">
                <label for="name">이름:</label><br>
                <input type="text" id="name" name="name" placeholder="이름을 입력하세요"><br><br>
                <label for="email">이메일:</label><br>
                <input type="text" id="email" name="email" placeholder="이메일을 입력하세요"><br><br>
                <label for="message">메시지:</label><br>
                <input type="text" id="message" name="message" placeholder="메시지를 입력하세요"><br><br>
                <input type="submit" value="보내기">
            </form>
        </section>
    </main>
    <footer>
        <p>나의 웹 페이지 | 모든 권리 보유</p>
    </footer>
</body>
</html>

결론

네트워크나 CS지식을 외우는것도 좋지만 이해하는식으로 공부를 하면 좋을거 같다.