인터넷에서 재밌는 글을 보고 친구들에게 공유해주는 의미를 알 수 없는 긴 영어 링크가 무엇을 나타내는 것인지 궁금하신 적 없으신가요?
첫 게시글로 URL은 어떤 것인지,
저 긴 영어 블라블라에 어떤 정보들이 포함되어있는지 오늘 한 번 알아보겠습니다.
Uniform Resource Locator
흔히 우리가 물건을 온라인으로 물건을 주문하면,
이 물건을 어디에 가져다둬야하는지 "주소"를 입력해야 합니다.
물건의 위치를 정확하게 표기하기 위해서는
'서울시 종로구 사직로161 경복궁' 와 같이 시/구/도로명/건물명 이 들어가고, 아파트나 빌라의 경우 동/호수와 또 물건을 어디에 위치시킬지(문 앞/ 소화전 안) 지정까지 하겠죠.
URL도 웹페이지의 주소의 역할을 합니다.
어떤 URL을 입력하느냐에 따라서 메인 페이지로 들어갈지, 가입하는 페이지로 들어갈지, 로그인 페이지로 들어갈지 달라지게 됩니다.
그래서 우리는 URL을 "웹 페이지를 찾기 위한 주소"라고 부릅니다.
URL 구성요소
URL에서 위치별로 어떤 의미를 가지고 있는지 알아보도록 하겠습니다.
1. 프로토콜(Protocol)
리소스에 접근하는 방법을 정의하는 부분으로 주로 http, https 등을 사용합니다. 웹에서 데이터를 주고 받는 프로토콜이고, https는 http에서 보안이 강화된 형태입니다.
이 외에도 smtp/pop3,dns, tcp/ip와 같은 형태도 있습니다.
2. 도메인(IP 주소)
IP주소는 169.143.5.432와 같이 표현되는데, 가시성이 떨어져서 이를 www.naver.com과 같은 문자로 표기합니다. 이 문자로 표기되는 것을 도메인이라고 합니다.
서버에서는 도메인(en.dict.naver.com)이 검색되면 이에 해당하는 IP(210.89.168.68)로 DNS 서버가 변환하여 주소를 전달합니다.
3. 경로(Path)
서버 내에서의 자원의 위치를 지정하는 역할을 하고 잇습니다. 위와 같이 도메인의 바로 다음에 위치하고 있습니다. 여기서는 #/search 가 이에 해당된다.
4. 프래그먼트(Fragment)
URL 안에서 특정 위치를 지정하는 용도로 사용합니다.
"#"으로 시작하며 특정 이름을 참조합니다.
5. 퀴리 문자열(Query String)
URL에서 추가 정보를 전달하기 위해 사용되는 부분입니다. "?" 뒤에 있는 값을 의미하고 여기서는 "query=apple"은 검색 쿼리를 의미합니다. 여기서 사용자가 검색한 값이 "apple"이라는 값을 가진다는 의미입니다.
여러개의 파라미터는 & 기호로 구분이 됩니다. key=value 형태를 띄는 특징이 있습니다.
Ex. ?q=hello&hi=ko 검색어와 언어설정
?page=2&sort=asc 페이지 번호와 정렬 방식 설정
웹 브라우저가 작동하는 방식
1. DNS 조회
웹 브라우저가 DNS 서버를 통해 도메인(호스트명)을 IP 주소로 변환
www.naver.com -> 210.89.168.68
2. HTTP 요청 메시지 생성
변환된 IP 주소를 바탕으로 요청 메시지를 생성하는데, 이때 요청 헤더와 메소드(GET, POST등)를 포함
- 메소드 : GET, POST, PUT 등 어떤 작업을 요청할지 명시
- 헤더 : 요청에 대한 추가적인 정보
Ex. User-Agent(브라우저 정보), Accept-Language(언어 정보)- URL 경로 : 요청할 리소스
3. 소켓을 통한 연결
웹 브라우저는 소켓 라이브러리를 이용해 TCP/IP 연결을 요청
이 과정에서 3-Way Handshake(3단계 핸드쉐이크)를 통해 서버와 연결
- TCP(Teansmission Control Protocol): 전송 제어 프로토콜, 데이터를 전송하는 방식에 대한 규칙을 정함
- 3-Way Handshake: TCP 연결을 할 때 필요한 과정, 두 컴퓨터가 소통할 준비가 되었는지 확인하는 과정
1) SYN(클라이언트 → 서버): 클라이언트는 연결을 시작하는 패킷 전송
2) SYN-ACK(서버 → 클라이언트): 서버는 연결 요청을 수락했다는 응답 전송
3) ACK(클라이언트 → 서버): 클라이언트가 연결 준비 완료를 서버에 알림
4. 서버로 패킷 전송
연결에 성공하면 http 메시지를 포함한 TCP/IP 패킷을 생성하여 전송
이때, HTTP 메시지(Ex. GET /index.html HTTP/1.1)가 포함되어 서버가 어떤 리소스를 요청하는지 알림
- 패킷: 데이터를 작은 조각으로 나눔. 네트워크에서 데이터를 전송할 때 효율적이고 안정적인 전송과 네트워크 속도 향상을 위해서 사용
5. 서버의 응답 처리
서버는 패킷을 받고 나서 http 메시지를 해석
이 후 HTML 데이터를 포함한 응답 메시지를 만들어 클라이언트 반환
- 상태코드: 200 Ok 는 성공적으로 요청을 처리했음을 의미하고, 400 Not Found는 요청한 리소스를 찾을 수 없다는 뜻
- 헤더: 응답에 대한 추가적인 정보(Content-Type, Date 등)
- 본문(Body): 실제 요청한 콘텐츠(HTML 파일, 이미지 등)
6. 응답 메시지 렌더링
클라이언트는 응답 메시지를 받아 화면에 콘텐츠를 렌더링해서 사용자가 볼 수 있도록 표시
