너무나도 잘 알고있다고 생각하는 부분이었는데 누가 갑자기 물어봤을 때 머리속에만 떠다니고 정리되어 입밖으로 바로 나오지 않고 버퍼링이 상당히 걸린다는걸 깨달아서 다시 정리하는 차원에서 포스팅하는 글.
1. 브라우저가 입력을 해석하는 과정
브라우저는 입력된 주소가 유효한 URL인지, 검색어인지 먼저 확인한다.
- www.naver.com이 올바른 도메인 형식인지 검사 (.com, .net 같은 도메인 확인)
- 만약 주소가 유효한 URL이 아니라면, 브라우저는 검색 엔진으로 검색할지 판단
- www.naver.com이 올바른 도메인으로 보이면 인터넷을 통해 접속 시도
이전 방문 기록이 있다면 브라우저 내부의 자동 완성 기능이 동작할 수도 있다.
2. 브라우저 캐시, DNS 캐시 확인 (속도 최적화)
네이버에 처음 접속하는 것이 아니라면, 브라우저는 이전에 저장된 정보를 먼저 확인한다.
- 브라우저 캐시
- 브라우저는 www.naver.com의 IP 주소와 네트워크 정보를 캐싱을 할 수 있다.
- 만약 유효한 캐시가 있다면, 바로 요청을 보내고 DNS 조회를 생략함
- 운영체제 DNS 캐시
- 브라우저 캐시에 IP 주소가 없으면, OS의 DNS 캐시를 확인한다.
- OS는 이전에 조회했던 DNS 정보를 일정 기간 저장해 둔다.
- 라우터, ISP(인터넷 제공업체) DNS 캐시
- 브라우저와 OS에서 캐시를 찾지 못하면, 라우터 또는 ISP(인터넷 제공업체, 예: KT, SKT, LG U+)의 DNS 캐시를 조회한다.
여기에서 캐시에 IP 주소가 있다면, 바로 네트워크 요청을 보냄
만약 캐시에 없다면, 다음 단계에서 DNS 조회를 진행함
3. DNS 조회 (도메인 → IP 주소 변환)
www.naver.com을 실제 서버의 IP 주소로 변환하는 과정이다.
(네이버의 실제 서버는 223.130.195.95 같은 IP 주소로 동작한다.)
DNS 조회 과정
- 브라우저가 로컬 DNS 캐시를 먼저 확인 (이전에 조회한 기록이 있으면 바로 사용)
- 없으면, ISP(인터넷 제공업체)의 DNS 서버에 www.naver.com의 IP 주소를 요청
- ISP도 정보가 없다면, Root DNS 서버에 com 도메인을 관리하는 TLD(Top-Level Domain) 네임서버로 요청
- TLD 서버가 네이버의 DNS 서버(NS, 네임서버)를 반환
- 네이버의 네임서버가 실제 IP 주소(223.130.195.95)를 반환
이제 브라우저는 www.naver.com이 223.130.195.95라는 IP를 가진 서버와 연결된다는 것을 알게 됨
✅ 참고) 네임서버란?
도메인(Domain Name)과 IP 주소를 연결해주는 서버
즉, 우리가 www.naver.com을 입력하면, 네임서버가 해당 도메인의 실제 IP 주소를 반환하는 역할을 한다.
네트워크에서 컴퓨터들은 숫자로 된 IP 주소(예: 223.130.195.95)로 통신하지만, 사람은 naver.com 같은 도메인을 사용하기 위해
네임서버가 도메인을 IP 주소로 변환하는 과정(DNS 조회)을 수행
네임서버의 계층구조
DNS 조회는 4단계 네임서버를 거치면서 www.naver.com의 IP 주소를 찾음
1️⃣ Root 네임서버 (DNS Root Server)
- . (닷) 루트 도메인을 관리하는 최상위 네임서버
- 예: www.naver.com 요청 → .com을 담당하는 TLD 네임서버를 알려줌
- 13개 글로벌 루트 네임서버가 존재
2️⃣ TLD 네임서버 (Top-Level Domain)
- .com, .net, .org, .kr 같은 도메인 최상위(TLD)를 담당하는 네임서버
3️⃣ 도메인 네임서버 (Authoritative Name Server, 권한 있는 네임서버)
- 해당 도메인에 대한 최종 정보를 보관한 네임서버
- naver.com의 네임서버(NS 레코드)가 여기 있음 (ns1.naver.com, ns2.naver.com)
4️⃣ 캐싱 네임서버 (Caching Name Server, ISP 제공)
- ISP(인터넷 제공업체)나 클라우드 DNS(Google DNS, Cloudflare DNS)에서 자주 사용하는 도메인의 IP를 캐싱
- 속도 향상을 위해 사용됨
4. TCP 3-Way Handshake (서버와 연결 수립)
이제 브라우저는 223.130.195.95 서버로 요청을 보내기 위해 TCP 연결을 설정해야 한다.
TCP 3-Way Handshake 과정:
- SYN(Synchronize) (브라우저 → 서버)
- 브라우저가 네이버 서버야, 나랑 연결할래?라고 요청 (SYN 패킷 전송)
- SYN-ACK (서버 → 브라우저)
- 서버가 그래, 연결하자!라고 응답 (SYN-ACK 패킷 전송)
- ACK(Acknowledgment) (브라우저 → 서버)
- 브라우저가 좋아, 이제 데이터 전송 시작하자! (ACK 패킷 전송)
이제 브라우저와 네이버 서버가 연결됨
5. TLS Handshake (HTTPS 보안 연결)
HTTPS를 사용하면, 보안 연결(SSL/TLS)이 필요하다.
TLS 인증 과정:
- 브라우저가 네이버야, 보안 연결을 하고 싶어!라고 요청
- 네이버가 SSL/TLS 인증서를 제공 (naver.com이 진짜 네이버인지 확인)
- 브라우저가 인증서를 검증하고, 서버와 안전한 통신을 위한 세션 키를 협상
- 암호화된 데이터 전송 가능
이제 모든 데이터는 암호화되어 안전하게 전송됨.
6. HTTP 요청 보내기 (네이버 서버에 웹페이지 요청)
이제 브라우저는 GET / 요청을 보내 웹페이지를 요청한다.
HTTP 요청 예시
GET / HTTP/1.1
Host: www.naver.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) # 브라우저와 OS 정보 포함
Accept: text/html
- 브라우저는 HTTP 요청 헤더에 OS, 브라우저 정보, 쿠키 등을 포함하여 전송.
- 네이버 서버는 이 요청을 받아 적절한 웹페이지(HTML 파일)를 반환.
이제 네이버 서버가 웹페이지 데이터를 브라우저로 전송함
7. 웹페이지 데이터 수신 및 렌더링
브라우저는 서버에서 받은 HTML, CSS, JavaScript를 해석하고 웹페이지를 그린다.
- HTML 파싱 → 문서 구조 생성 (DOM 트리)
- CSS 파싱 → 스타일 적용 (CSSOM 생성)
- JavaScript 실행 → 동적 요소 적용 (JS 엔진 실행)
- 이미지, 폰트 등 리소스 로드 → 네트워크 요청 발생
- 최종 화면에 표시
이제 www.naver.com이 브라우저에 완전히 표시됨
📌 요약 정리
1. 브라우저 입력 해석 → URL인지 검색어인지 판단
2. DNS 캐시 확인 → 빠른 접속을 위해 캐시 사용
3. DNS 조회 → www.naver.com → 223.130.195.95 IP 변환
4. TCP 3-Way Handshake → 서버와 연결 수립
5. TLS Handshake → HTTPS 보안 연결
6. HTTP 요청 전송 → GET / 요청으로 웹페이지 요청
7. 웹페이지 렌더링 → HTML, CSS, JS 해석 후 브라우저에 표시
마무리
어떤 개념을 혼자서 안다고 생각하는것과, 정확하게 설명할 수 있는 것은 다르다.
한번 더 머릿속에서만 떠다니던 개념들을 정리하는 게 얼마나 중요한지 다시 한번 느꼈다.
기록이 제일 좋은 방법이라는 걸 새삼 또(..!!!!) 깨닫는다. 블로그를 꾸준히 써야겠다 ㅎㅎ
'🌀Full-Stack&Beyond' 카테고리의 다른 글
🐳 Docker 네트워크 충돌 문제 및 해결 방법 (네트워크 개념을 곁들인) (0) | 2025.02.26 |
---|---|
네트워크 기초 완벽 정리: 패킷, 라우팅, 게이트웨이, 네트워크 인터페이스 (0) | 2025.02.26 |
서브넷 마스크와 네트워크 대역 쉽게 이해하기 (0) | 2025.02.26 |
AWS 서비스를 On-Premise 환경으로 마이그레이션하기 (0) | 2025.02.22 |
무인 주류 판매 플랫폼 구축기 (그런데 이제 인공지능을 곁들인) (0) | 2023.07.03 |
너무나도 잘 알고있다고 생각하는 부분이었는데 누가 갑자기 물어봤을 때 머리속에만 떠다니고 정리되어 입밖으로 바로 나오지 않고 버퍼링이 상당히 걸린다는걸 깨달아서 다시 정리하는 차원에서 포스팅하는 글.
1. 브라우저가 입력을 해석하는 과정
브라우저는 입력된 주소가 유효한 URL인지, 검색어인지 먼저 확인한다.
- www.naver.com이 올바른 도메인 형식인지 검사 (.com, .net 같은 도메인 확인)
- 만약 주소가 유효한 URL이 아니라면, 브라우저는 검색 엔진으로 검색할지 판단
- www.naver.com이 올바른 도메인으로 보이면 인터넷을 통해 접속 시도
이전 방문 기록이 있다면 브라우저 내부의 자동 완성 기능이 동작할 수도 있다.
2. 브라우저 캐시, DNS 캐시 확인 (속도 최적화)
네이버에 처음 접속하는 것이 아니라면, 브라우저는 이전에 저장된 정보를 먼저 확인한다.
- 브라우저 캐시
- 브라우저는 www.naver.com의 IP 주소와 네트워크 정보를 캐싱을 할 수 있다.
- 만약 유효한 캐시가 있다면, 바로 요청을 보내고 DNS 조회를 생략함
- 운영체제 DNS 캐시
- 브라우저 캐시에 IP 주소가 없으면, OS의 DNS 캐시를 확인한다.
- OS는 이전에 조회했던 DNS 정보를 일정 기간 저장해 둔다.
- 라우터, ISP(인터넷 제공업체) DNS 캐시
- 브라우저와 OS에서 캐시를 찾지 못하면, 라우터 또는 ISP(인터넷 제공업체, 예: KT, SKT, LG U+)의 DNS 캐시를 조회한다.
여기에서 캐시에 IP 주소가 있다면, 바로 네트워크 요청을 보냄
만약 캐시에 없다면, 다음 단계에서 DNS 조회를 진행함
3. DNS 조회 (도메인 → IP 주소 변환)
www.naver.com을 실제 서버의 IP 주소로 변환하는 과정이다.
(네이버의 실제 서버는 223.130.195.95 같은 IP 주소로 동작한다.)
DNS 조회 과정
- 브라우저가 로컬 DNS 캐시를 먼저 확인 (이전에 조회한 기록이 있으면 바로 사용)
- 없으면, ISP(인터넷 제공업체)의 DNS 서버에 www.naver.com의 IP 주소를 요청
- ISP도 정보가 없다면, Root DNS 서버에 com 도메인을 관리하는 TLD(Top-Level Domain) 네임서버로 요청
- TLD 서버가 네이버의 DNS 서버(NS, 네임서버)를 반환
- 네이버의 네임서버가 실제 IP 주소(223.130.195.95)를 반환
이제 브라우저는 www.naver.com이 223.130.195.95라는 IP를 가진 서버와 연결된다는 것을 알게 됨
✅ 참고) 네임서버란?
도메인(Domain Name)과 IP 주소를 연결해주는 서버
즉, 우리가 www.naver.com을 입력하면, 네임서버가 해당 도메인의 실제 IP 주소를 반환하는 역할을 한다.
네트워크에서 컴퓨터들은 숫자로 된 IP 주소(예: 223.130.195.95)로 통신하지만, 사람은 naver.com 같은 도메인을 사용하기 위해
네임서버가 도메인을 IP 주소로 변환하는 과정(DNS 조회)을 수행
네임서버의 계층구조
DNS 조회는 4단계 네임서버를 거치면서 www.naver.com의 IP 주소를 찾음
1️⃣ Root 네임서버 (DNS Root Server)
- . (닷) 루트 도메인을 관리하는 최상위 네임서버
- 예: www.naver.com 요청 → .com을 담당하는 TLD 네임서버를 알려줌
- 13개 글로벌 루트 네임서버가 존재
2️⃣ TLD 네임서버 (Top-Level Domain)
- .com, .net, .org, .kr 같은 도메인 최상위(TLD)를 담당하는 네임서버
3️⃣ 도메인 네임서버 (Authoritative Name Server, 권한 있는 네임서버)
- 해당 도메인에 대한 최종 정보를 보관한 네임서버
- naver.com의 네임서버(NS 레코드)가 여기 있음 (ns1.naver.com, ns2.naver.com)
4️⃣ 캐싱 네임서버 (Caching Name Server, ISP 제공)
- ISP(인터넷 제공업체)나 클라우드 DNS(Google DNS, Cloudflare DNS)에서 자주 사용하는 도메인의 IP를 캐싱
- 속도 향상을 위해 사용됨
4. TCP 3-Way Handshake (서버와 연결 수립)
이제 브라우저는 223.130.195.95 서버로 요청을 보내기 위해 TCP 연결을 설정해야 한다.
TCP 3-Way Handshake 과정:
- SYN(Synchronize) (브라우저 → 서버)
- 브라우저가 네이버 서버야, 나랑 연결할래?라고 요청 (SYN 패킷 전송)
- SYN-ACK (서버 → 브라우저)
- 서버가 그래, 연결하자!라고 응답 (SYN-ACK 패킷 전송)
- ACK(Acknowledgment) (브라우저 → 서버)
- 브라우저가 좋아, 이제 데이터 전송 시작하자! (ACK 패킷 전송)
이제 브라우저와 네이버 서버가 연결됨
5. TLS Handshake (HTTPS 보안 연결)
HTTPS를 사용하면, 보안 연결(SSL/TLS)이 필요하다.
TLS 인증 과정:
- 브라우저가 네이버야, 보안 연결을 하고 싶어!라고 요청
- 네이버가 SSL/TLS 인증서를 제공 (naver.com이 진짜 네이버인지 확인)
- 브라우저가 인증서를 검증하고, 서버와 안전한 통신을 위한 세션 키를 협상
- 암호화된 데이터 전송 가능
이제 모든 데이터는 암호화되어 안전하게 전송됨.
6. HTTP 요청 보내기 (네이버 서버에 웹페이지 요청)
이제 브라우저는 GET / 요청을 보내 웹페이지를 요청한다.
HTTP 요청 예시
GET / HTTP/1.1
Host: www.naver.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) # 브라우저와 OS 정보 포함
Accept: text/html
- 브라우저는 HTTP 요청 헤더에 OS, 브라우저 정보, 쿠키 등을 포함하여 전송.
- 네이버 서버는 이 요청을 받아 적절한 웹페이지(HTML 파일)를 반환.
이제 네이버 서버가 웹페이지 데이터를 브라우저로 전송함
7. 웹페이지 데이터 수신 및 렌더링
브라우저는 서버에서 받은 HTML, CSS, JavaScript를 해석하고 웹페이지를 그린다.
- HTML 파싱 → 문서 구조 생성 (DOM 트리)
- CSS 파싱 → 스타일 적용 (CSSOM 생성)
- JavaScript 실행 → 동적 요소 적용 (JS 엔진 실행)
- 이미지, 폰트 등 리소스 로드 → 네트워크 요청 발생
- 최종 화면에 표시
이제 www.naver.com이 브라우저에 완전히 표시됨
📌 요약 정리
1. 브라우저 입력 해석 → URL인지 검색어인지 판단
2. DNS 캐시 확인 → 빠른 접속을 위해 캐시 사용
3. DNS 조회 → www.naver.com → 223.130.195.95 IP 변환
4. TCP 3-Way Handshake → 서버와 연결 수립
5. TLS Handshake → HTTPS 보안 연결
6. HTTP 요청 전송 → GET / 요청으로 웹페이지 요청
7. 웹페이지 렌더링 → HTML, CSS, JS 해석 후 브라우저에 표시
마무리
어떤 개념을 혼자서 안다고 생각하는것과, 정확하게 설명할 수 있는 것은 다르다.
한번 더 머릿속에서만 떠다니던 개념들을 정리하는 게 얼마나 중요한지 다시 한번 느꼈다.
기록이 제일 좋은 방법이라는 걸 새삼 또(..!!!!) 깨닫는다. 블로그를 꾸준히 써야겠다 ㅎㅎ
'🌀Full-Stack&Beyond' 카테고리의 다른 글
🐳 Docker 네트워크 충돌 문제 및 해결 방법 (네트워크 개념을 곁들인) (0) | 2025.02.26 |
---|---|
네트워크 기초 완벽 정리: 패킷, 라우팅, 게이트웨이, 네트워크 인터페이스 (0) | 2025.02.26 |
서브넷 마스크와 네트워크 대역 쉽게 이해하기 (0) | 2025.02.26 |
AWS 서비스를 On-Premise 환경으로 마이그레이션하기 (0) | 2025.02.22 |
무인 주류 판매 플랫폼 구축기 (그런데 이제 인공지능을 곁들인) (0) | 2023.07.03 |