[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 22일차 XML, 웹사이트 접속

XML (eXtensible Markup Language)

XML은 데이터를 구조화하고 저장하기 위한 마크업 언어입니다. 사람이 읽을 수 있고, 기계도 쉽게 해석할 수 있도록 설계되었습니다.

특징

1. 확장 가능
   • 사용자가 직접 태그를 정의할 수 있어 다양한 데이터를 표현 가능.
2. 텍스트 기반
   • 모든 데이터가 텍스트 형식으로 저장되어 플랫폼 독립적이고 쉽게 전송 가능.
3. 계층 구조
   • 데이터를 트리 구조로 표현하여 부모-자식 관계를 명확히 구분.
4. 표준화된 형식
   • W3C 표준에 따라 데이터를 저장하고 공유.
5. 범용성
   • 다양한 응용 프로그램 및 시스템에서 데이터 교환에 사용 가능.

XML 기본 문법

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book>
        <title>Learning XML</title>
        <author>John Doe</author>
        <price>29.99</price>
    </book>
    <book>
        <title>Advanced XML</title>
        <author>Jane Smith</author>
        <price>39.99</price>
    </book>
</bookstore>

구성 요소

1. 프로로그: <?xml version="1.0" encoding="UTF-8"?>
   • XML 문서의 버전과 인코딩을 정의.
2. 루트 요소: <bookstore>
   • XML 문서는 반드시 하나의 루트 요소로 시작해야 함.
3. 요소 (Element): <book>, <title> 등
   • 데이터를 포함하거나 다른 요소를 포함.
4. 속성 (Attribute):
   • 요소에 추가적인 정보를 제공.
      
     <book category="fiction">
         <title>XML Guide</title>
     </book>
5. 내용 (Content):
   • 요소 내부의 데이터. 예: Learning XML
6. 종료 태그: </book>

XML의 사용 사례

1. 데이터 저장 및 전송
   • 다양한 시스템 간 데이터 교환 포맷으로 사용.
2. 설정 파일
   • 소프트웨어의 설정 데이터를 저장 (예: web.config).
3. 웹 서비스
   • SOAP 기반 웹 서비스에서 데이터 교환에 사용.
4. 문서 형식
   • SVG, RSS, XHTML 등 여러 문서 표준의 기반.
5. 계층적 데이터 표현
   • 트리 구조의 데이터를 표현하는 데 적합.

XML과 다른 기술의 비교

1. XML vs. HTML
   • XML: 데이터 저장 및 전송 목적.
   • HTML: 웹 페이지의 구조와 콘텐츠 표현 목적.
2. XML vs. JSON
   • JSON: 더 간결하고, 주로 웹 애플리케이션에서 사용.
   • XML: 복잡한 데이터 구조와 메타데이터를 다룰 때 유용.

장점

• 사람이 읽기 쉽고, 기계가 파싱하기 쉬움.
• 플랫폼과 언어 독립적.
• 데이터 표현이 유연함.

단점

• JSON에 비해 표현이 복잡하고 데이터 크기가 큼.
• 구문 오류에 민감함 (잘못된 문법은 문서 전체를 무효화).

---

인터넷에서 네이버에 접속하는 과정

네이버와 같은 웹사이트에 접속할 때 발생하는 단계는 다음과 같습니다.

1. 브라우저에 URL 입력

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

2. DNS 조회 (도메인 네임 시스템)

• URL(www.naver.com)은 사람이 읽기 쉬운 주소로, 이를 컴퓨터가 이해할 수 있는 IP 주소로 변환해야 합니다.
• 브라우저는 DNS 서버에 요청을 보내 www.naver.com에 해당하는 IP 주소(예: 223.130.200.104)를 얻습니다.
  • 캐싱: 최근 접속한 주소는 로컬(컴퓨터, 브라우저)이나 ISP의 캐시에 저장되어 조회를 빠르게 처리할 수도 있습니다.

3. TCP 연결 (3-Way Handshake)

• 브라우저는 네이버 서버와 TCP 연결을 설정합니다. 이는 데이터를 안정적으로 전송하기 위한 과정입니다.
  1. 브라우저 → 서버: SYN 패킷 전송 (연결 요청)
  2. 서버 → 브라우저: SYN-ACK 패킷 전송 (연결 요청 수락)
  3. 브라우저 → 서버: ACK 패킷 전송 (수락 확인)

4. HTTP/HTTPS 요청

• 연결이 성공하면 브라우저는 서버에 데이터를 요청합니다.
  • HTTP 요청 메시지:
     

    GET / HTTP/1.1

    Host: www.naver.com
  • HTTPS: 요청은 암호화되어 전송됨.

5. 서버 처리

• 네이버의 웹 서버는 요청을 받고, 해당 요청에 맞는 데이터를 준비합니다.
  • 필요한 경우, 서버는 데이터베이스(DB)에서 정보를 가져오거나, 다른 내부 서버와 통신하여 결과를 생성합니다.

6. HTTP/HTTPS 응답

• 서버는 브라우저에 HTML, CSS, JavaScript 등 필요한 리소스를 응답으로 보냅니다.
  • HTTP 응답 메시지:
    HTTP/1.1 200 OK

    Content-Type: text/html

7. 브라우저 렌더링

• 브라우저는 받은 HTML 파일을 해석하고, CSS와 JavaScript를 처리해 화면을 그립니다.
  1. HTML 파싱 → DOM(Document Object Model) 생성
  2. CSS 파싱 → 렌더 트리(Render Tree) 생성
  3. JavaScript 실행 → 동적 페이지 구성

8. 화면 출력

• 브라우저는 모든 리소스를 처리한 후 완성된 네이버 메인 화면을 사용자에게 보여줍니다.

요약

1. URL 입력
2. DNS 조회 → IP 주소 획득
3. TCP 연결 → 서버와 연결
4. HTTP/HTTPS 요청 → 서버로 데이터 요청
5. 서버 처리 → 응답 생성
6. HTTP/HTTPS 응답 → 브라우저로 데이터 전송
7. 브라우저 렌더링 → 화면 생성 및 출력

이 과정은 수 밀리초~몇 초 이내에 이루어지며, 인터넷 연결 상태와 서버 성능에 따라 소요 시간이 달라질 수 있습니다.