네트워크

인터넷 통신 과정: 어떻게 웹이 작동할까? 🌐

xeunnie 2024. 6. 19. 01:54
728x90
반응형

인터넷 통신 과정: 어떻게 웹이 작동할까? 🌐

인터넷 통신은 클라이언트(사용자의 브라우저)서버(웹 페이지 제공자)가 주고받는 대화라고 할 수 있어요.

이 대화를 통해 여러분이 주소창에 www.example.com을 입력하면, 멋진 웹 페이지가 눈앞에 펼쳐지죠!

그럼, 이 마법 같은 일이 어떻게 일어나는지 하나씩 따라가 보겠습니다. 🚀


클라이언트 측 🖥️

1. URL 입력

사용자가 브라우저 주소창에 www.example.com을 입력합니다.

브라우저는 입력된 URL을 분석해요.

  • 프로토콜: http:// 또는 https://
  • 도메인 이름: example.com
  • 경로: /about, /contact

 

 

2. DNS 조회: 도메인을 IP로 변환

브라우저는 도메인 이름을 IP 주소로 변환하기 위해 DNS(Domain Name System)에 요청을 보냅니다.

  • DNS 요청 흐름:
    1. 로컬 캐시: 먼저, 브라우저나 운영 체제의 DNS 캐시에 저장된 정보 확인.
    2. ISP의 DNS 서버: 로컬에 없으면 인터넷 서비스 제공자의 DNS 서버에 요청.
    3. 최종 DNS 서버: ISP가 해결하지 못하면 최상위 DNS 서버까지 쭉 올라가서 찾음.
  • 응답: example.com에 해당하는 IP 주소(예: 93.184.216.34)를 반환.

 

3. TCP 연결 설정 (3-way Handshake)

IP 주소를 받은 브라우저는 이제 서버와 대화할 준비를 합니다.

TCP 연결은 안정적인 데이터 전송을 위한 약속이에요.

 

  1. 클라이언트 → 서버: SYN 패킷 보내기(“대화 시작할래요?”)
  2. 서버 → 클라이언트: SYN-ACK 패킷 응답(“좋아요, 준비됐어요!”)
  3. 클라이언트 → 서버: ACK 패킷 보내기(“좋아요, 시작하죠!”)

 

4. HTTP 요청

TCP 연결이 완료되면, 브라우저는 본격적으로 요청(Request)을 보냅니다.

 

  • 요청 구조:
    • HTTP 메서드: GET(페이지 요청), POST(데이터 제출) 등
    • 경로: /about, /products 등
    • 헤더(Header): 요청에 대한 추가 정보(예: User-Agent, Accept)
    • 바디(Body): 데이터가 포함된 경우(POST 요청 등).

 

5. HTTP 응답 수신

서버로부터 응답(Response)이 도착합니다.

 

  • 응답 구조:
    • 상태 코드: 200(성공), 404(페이지 없음), 500(서버 에러) 등
    • 헤더(Header): 콘텐츠 타입, 길이 등의 추가 정보
    • 바디(Body): HTML, CSS, JSON 등 웹 페이지의 실제 데이터
  1.  

 

6. 페이지 렌더링

브라우저는 받은 데이터를 바탕으로 화면을 만듭니다.

 

  1. HTML 파싱: HTML을 읽어 DOM(Document Object Model) 생성.
  2. CSS 적용: 스타일 시트를 로드해 DOM에 적용.
  3. JavaScript 실행: 인터랙션이나 동적 요소 추가.
  4. 추가 리소스 로드: 이미지, 글꼴 등 다운로드.

 

7. 추가 통신 (AJAX, WebSocket)

웹 페이지가 완성된 후에도 추가적인 데이터 통신이 필요할 수 있어요.

 

  • AJAX: 서버와 비동기적으로 데이터를 주고받아 페이지 새로고침 없이 업데이트.
  • WebSocket: 실시간 양방향 통신을 통해 채팅, 알림 등 동적인 기능 제공.

서버 측 🛠️

서버는 사용자가 요청한 데이터를 제공하는 역할을 합니다.

클라이언트가 요청을 보내면 서버는 아래와 같은 과정을 거칩니다.

 

1. DNS 요청 응답

서버가 클라이언트의 DNS 요청을 받아, 도메인에 해당하는 IP 주소를 응답으로 보냅니다.

이는 클라이언트가 올바른 서버로 연결되도록 도와줘요.

 

2. TCP 연결 수락

서버는 클라이언트의 TCP 연결 요청을 받아들여 연결을 설정합니다.

3-way Handshake: SYN → SYN-ACK → ACK 과정으로 안정적인 연결을 보장해줍니다.

 

3. HTTP 요청 수신

TCP 연결을 통해 클라이언트의 HTTP 요청을 받습니다.

요청은 아래와 같이 구성됩니다:

  • 메서드: GET, POST 등
  • 경로: 요청된 페이지의 경로
  • 헤더: 요청에 포함된 추가 정보
  • 바디: 클라이언트가 보낸 데이터

 

4. 요청 처리 및 응답 생성

서버는 요청 내용을 바탕으로 데이터를 처리해 응답을 생성합니다.

 

  • 파일 요청: 요청된 HTML, CSS, JS 파일 찾기.
  • 데이터베이스 조회: 필요한 데이터를 검색하거나 생성.
  • 서버 로직 실행: 동적 콘텐츠를 생성하기 위한 로직 처리.
  • 응답 생성:
    • 상태 코드(200, 404 등).
    • 응답 헤더(Content-Type 등).
    • 응답 바디(HTML, JSON, 이미지 등).

 

5. HTTP 응답 전송

생성된 응답을 클라이언트로 보냅니다.

클라이언트는 받은 데이터를 파싱하고, 화면에 나타냅니다!


인터넷 통신의 전체 그림 🌐

  1. 클라이언트가 요청을 보내면,
  2. DNS 서버가 IP 주소를 찾아주고,
  3. TCP 연결을 통해 안정적인 통신을 설정.
  4. HTTP 요청이 서버에 도착하면,
  5. 서버는 요청을 처리해 필요한 데이터를 응답으로 보냅니다.
  6. 클라이언트는 응답을 받아 웹 페이지를 완성!

인터넷 통신, 이렇게 이해해요! 🧠✨

이 모든 과정은 단 몇 초 만에 이루어져요.

그 덕분에 우리는 인터넷으로 다양한 정보를 빠르게 받아볼 수 있답니다.

이제 인터넷 통신의 과정을 제대로 이해했으니, 더 깊이 있는 개발도 가능해질 거예요!

 

🌷전설의 개발자가 되어봅시당! 🌷

 

728x90
반응형