[TIL][240812] 웹 기본 이해 복습

그림 한 장(?)으로 웹 구조를 이해해 보자!

(A) 클라이언트 → 브라우저

• 사용자가 웹 브라우저를 통해 특정 URL(www.google.com)을 입력하면, 브라우저는 해당 URL에 대한 웹 리소스를 요청하기 위한 작업을 시작한다.
• 클라이언트는 이 과정에서 사용자의 역할을 하며, 브라우저를 통해 인터넷과 상호작용한다.
• 이때 브라우저는 URL을 해석하고 프로토콜(HTTP/HTTPS), 도메인 이름, 경로, 쿼리, 매개변수 등을 분리해 각 요소를 사용하여 다음 단계를 준비한다.
• 요청 메서드(GET 데이터 요청): 사용자가 웹 브라우저에 https://www.example.com을 입력하면 브라우저는 해당 웹 페이지를 서버로부터 가져오기 위해 GET 요청을 보낸다.

(B) 브라우저 - DNS(Domain Name System) 서버

• 브라우저가 URL을 해석하면, 도메인 이름(www.google.com)을 가지고 이 도메인을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보낸다.
• DNS는 사람들에게 친숙한 도메인 이름을 실제 서버가 인식할 수 있는 IP 주소로 변환하는 시스템이다.
• 브라우저는 도메인 이름 시스템을 사용하여 도메인 이름을 해서하고, DNS 서버에 해당 도메인의 IP 주소를 요청한다.
• 이 요청은 인터넷에 연결된 DNS 서버로 전달되며, 서버는 이 도메인에 해당하는 IP 주소를 찾기 시작한다.
• DNS 서버가 정상적으로 도메인 이름에 해당하는 IP 주소를 반환하면, 브라우저는 상태 코드 200을 받는다.
  *200: 요청이 성공적으로 처리되었음을 의미

(C) DNS 서버 → DB

• DNS 서버는 도메인 이름을 기반으로 데이터베이스에서 해당 도메인의 IP 주소를 검색한다.
• 이 과정에서 DNS 서버는 자체적으로 캐시된 데이터나 상위 DNS 서버로부터 얻은 데이터를 활용할 수 있다.
• 만약 데이터베이스에 해당 도메인 IP주소가 없다면 상태 코드 404가 반환된다.
  *404: 리소스를 찾을수 없다는 의미

(D) DB → DNS 서버

• DNS 서버는 데이터베이스 또는 상위 DNS 서버로부터 받은 IP 주소를 클라이언트의 브라우저로 다시 전달한다.
• 이 IP 주소는 클라이언트가 접속하고자 하는 웹 서버의 고유 주소이며, 브라우저는 이 정보를 통해 실제 웹 서버에 요청을 보낼 수 있게 된다.
• IP 주소가 결정되면, DNS 서버는 이를 브라우저로 전달한다.
• 브라우저는 이 IP 주소를 기반으로 해당 서버에 직접 요청을 보낼 준비를 하게 된다.
• 요청 메서드(GET 데이터 요청): DNS 서버 내부 DB에서 GET 요청을 통해 도메인에 대한 IP 주소를 조회하여 반환한다.

(E) DNS → 브라우저

• DNS 서버로부터 받은 IP 주소를 브라우저는 받아 저장하고, 이를 이용해 웹 서버에 연결한다.
• 브라우저는 이제 이 IP 주소를 사용해 해당 웹 서버와 통신을 시작할 수 있게 된다.
• 브라우저는 받은 IP 주소를 메모리에 저장하고 HTTP/HTTPS 프로토콜을 사용해 해당 IP 주소로 웹페이지 요청을 보낸다.
• 이 단계에서는 DNS 해석을 완료되고, 실질적으로 서버와 통신하기 위한 준비가 완료된다.
• IP 주소가 정상적으로 브라우저에 전달되면 상태코드 200으로 정상 작동한다.

(F) 브라우저 → 웹(Web) 서버

• 브라우저는 받은 IP 주소를 통해 해당 웹 서버(goole 서버)에 연결하여, 사용자가 요청한 리소스(www.google.com 페이지)를 요청한다.
• 웹 서버는 이 요청을 받아 사용자가 요구한 리소스를 제공할 준비를 한다.
• 브라우저는 HTTP/HTTPS 요청을 통해 웹 서버에 특정 리소스를 요청한다.
• 웹 서버는 이 요청을 받아 처리하며, 필요한 경우 데이터베이스나 다른 내부 리소스 서버에 추가 요청을 보낼 수 있다.
• 요청 메서드
  • POST(데이터 전송): 사용자가 로그인 폼을 제출하면, 브라우저는 서버로 POST 요청을 보내 로그인 데이터를 전달한다.
  • PUT(데이터 갱신): 사용자가 회원 정보를 수정하면, 브라우저는 서버로 PUT 요청을 보내 갱신된 데이터를 전달한다.
  • DELETE(데이터 삭제): 사용자가 계정을 삭제할 때, 브라우저는 서버로 DELETE 요청을 보내 계정 삭제를 요청한다.

(G) 웹 서버 → DB

• 웹 서버는 클라이언트 요청을 처리하기 위해 필요한 데이터를 내부 데이터베이스나 다른 리소스 서버에서 가져온다.
• 예를 들어, Google 서버는 사용자가 요청한 검색 결과를 제공하기 위해 내부 데이터베이스에서 관련 데이터를 가져올 수 있다.
• 데이터베이스는 요청된 데이터를 처리하고, 웹 서버에 결과를 반환한다.
• 만약 데이터베이스 조회 중 오류가 발생하면, 서버는 상태 코드 500을 반환한다.
  *500: 내부 서버 오류 발생을 의미

(H) DB → 웹 서버

• 데이터베이스는 요청된 데이터를 웹 서버로 다시 전달한다.
• 이 데이터는 사용자가 요청한 리소스(검색 결과, 콘텐츠 등) 일 수 있다.
• 데이터베이스는 쿼리 결과를 웹 서버에 전달하며, 이 데이터는 웹 서버가 클라이언트에 응답할 데이터를 구성하는 데 사용된다.
• 데이터는 보통 JSON, XML, HTML 등의 형식으로 전달되며, 서버는 이를 사용해 최종 응답을 준비한다.
• 요청 메서드(GET 데이터 요청): 웹 서버는 데이터베이스에 GET 요청을 통해 필요한 데이터를 조회한다.

(I) 웹 서버 → 브라우저

• 웹 서버는 데이터베이스 또는 리소스 서버로부터 받은 데이터를 클라이언트의 브라우저로 반환한다.
• 이 데이터는 HTML, CSS, JavaScript 등의 리소스로 구성되며, 브라우저는 이를 기반으로 웹 페이지를 생성한다.
• 브라우저는 HTML을 해석하고, CSS로 스타일을 적용하며, JavaScript로 동적 요소를 처리한다.
• SSL/TLS의 역할: 웹 서버와 브라우저 간의 데이터를 암호화를 통해 보안을 강화하며, 서버의 신뢰성을 인증한다.

(J) 브라우저 → 클라이언트

• 브라우저는 받은 데이터를 바탕으로 웹 페이지를 렌더링하여 클라이언트에게 최종적으로 시각적인 웹 페이지를 보여준다.
• 사용자는 브라우저 화면에서 최종적으로 완성된 웹 페이지를 확인하고 상호작용할 수 있게 된다.
• 브라우저는 HTML을 해석하여 DOM(Document Object Model) 트리를 구성하고, CSSOM(CSS Object Model) 트리와 결합하여 랜더 트리를 만든다.
• 랜더 트리를 기반으로 페이지의 레이아웃을 계산하고, 실제 화면에 그린다.
• JavaScript는 페이지 로드 이후에도 실행되어 페이지의 동적 변화를 처리할 수 있다.
• 브라우저는 최종적으로 페이지를 사용자가 볼 수 있는 형태로 렌더링 하여 사용자와 상호작용을 가능하게 한다.
• 브라우저가 서버로부터 정상적으로 리소스를 받아 웹 페이지를 렌더링을 한다면 상태 코드 200을 받는다.