URL 구조: 프로토콜, 도메인, 쿼리가 도대체 뭘까?

생활코딩님과 코드잇 강의를 보면서 정리한 글입니다.

 

---

 

 

URL은 크게 프로토콜, 도메인, 포트번호, 페스, 쿼리스트링으로 나뉜다.

오늘은 이 URL을 형성하는 것들에 대해 알아볼 예정이다.

 

 

1. 프로토콜

 

http는 프로토콜 중 하나로 여기서 프로토콜이란

통신을 하는 두 주체가 지켜야 하는 통신 규약을 의미한다.

 

이런 규약을 만들어 놓는 이유는 서로 사양도, 운영체제도 다른

컴퓨터들끼리 원활한 통신을 하기 위함이다.

 

말이 어려우니 예시를 한 번 세워보겠다.

 

한국에서 물건을 살 땐 한국 화폐인 원화로 거래를 한다.

만약 거래할 화폐를 통일하지 않았다면, 조금 극단적으로 생각해서

문방구에서 파는 종이 화폐로도 거래를 해달라는

아주 큰 혼선이 있었을 지도 모른다.

 

자, 그렇다면 한국을 벗어나서 전 세계 단위로

국가 간에 거래를 할 땐 어떤 화폐로 거래를 할까?

세계에 여러 화폐가 있는 데 세계 단위로 거래를 할 땐

미국 화폐인 '달러'를 사용해서 거래합시다~ 하고 약속을 했다. 

 

이렇게 달러로 물건을 거래하자고 약속했으니

프랑스와 이탈리아 사이에서 거래할 때도,

인도 + 인도네시아 + 헝가리 사이에서 국제적으로 거래할 때도

거래에 대한 대가를 지불할 때 어떤 화폐로 지불해야지?란 혼선없이 

국제 거래할 땐 달러로 거래하기로 했기에 원활한 거래가 가능하다.

(*예시가 그렇다는 것이고, 실제론 혼선이 있을 수 있다.)

 

 

프로토콜 중 하나인 http는 HyperText Transfer Protocol의 약자로

Hyper Text를 교환, 전송하기 위해 통신 규약이다.

 

출처: 09. 코드잇 HTTP란?

 

위의 말을 쉽게 풀어서 설명하자면  웹 브라우저와 서버 사이에서

데이터를 교환, 전송할 때는 HTTP라는 통신 규약을 씁시다,하고 약속해 놓은 것이다.

 

국제 단위로 거래할 때 달러를 쓰자고 한 것처럼

웹 브라우저랑 서버 사이에서 데이터를 주고 받을 땐 HTTP라는 통신규칙에 따라서

주고 받읍시다!하고 약속한 것이다.

 

웹브라우저는 http 프로토콜에 맞게 요청(request)를 보내고,

서버도 http 프로토콜에 맞게 응답(respond)를 보내야 한다.

 

http에 보안(secure)이 강화된 프로토콜인 https라는 프로토콜도 있다.

참고로 알아두면 좋을 거 같다.

 

정리하자면 프로토콜은

웹브라우저와 웹서버가 데이터를 주고받기 위해서 만든 통신규칙이다.

 

---

 

2. host(domain name)

 

 

- 호스트는 특정 서버를 나타내는 것이다.

- 호스트를 통해 전 세계의 수많은 서버들 중 

어떤 서버와 통신해야 하는지 찾는다.

 

예) 내가 주소창에 naver.com이라고 입력하면

'아하! naver.com, 즉 naver 서버에 연결하면 되겠구나!'

하고 알게 되는 것이고, daum.net라고 주소창에 입력하면

'아하! daum 서버에 연결하면 되겠구나!' 하고 알게 되는 것이다.

---

 

3. port

 

 

한 개의 컴퓨터 안에 여러 대의 서버가 있을 수 있다.

클라이언트가 접속 했을 때 그중에 어떤 서버와 통신할지 애매하다.

 

그래서 접속할 때 3000이라고 하면

3000번 포트와 연결되어 있는 서버와 연결되는 것이다.

 

예) 3000번 포트에 node.js란 웹서버를 실행시킨다고 한다면

localhost:3000 이렇게 localhost 뒤에 3000이라고 명시하면 된다.

 

---

 

4. path

 

 

- 서버에 있는 데이터(파일) 중 원하는 데이터(파일)이

어디있는지 알려주는 것이다.  

 

 

 

 

5. query string

 

 

- 원하는 데이터에 관해서 세부적인 요구사항이 있는 경우 URL 끝에 쿼리(쿼리스트링)란 걸 붙여준다.

예) 내가 opentutorials라는 사이트에 있는

id가 HTML 파일이고, page가 12번째 페이지(세부사항)인 걸 보고 싶어!

할 때 여기서 id가 무엇이고 page가 몇 번째인 걸 보고 싶다고 한 게 세부사항에 해당한다.

이런 세부사항이 쿼리다. 

 

- 쿼리 값을 변경하면 변경된 값에 따라서 다른 정보를 보여준다.

- 위의 이미지의 경우 id=HTML&page=12라고 작성했는 데 해석하자면

내가 읽고 싶은 정보는 html이고, 12페이지다.라고 할 수 있다.

- 쿼리의 시작은 물음표(?)로 하기로 정해져서

위의 예시 이미지를 보면 id=HTML 앞에 물음표가 있는 걸 확인할 수 있다.

 

 

쿼리의의 예시로 위의 주소창에서 내가 ?id=CSS라고 입력했을 때

웹 페이지에 CSS라고 나왔다.

 

?id=HTML이라고 입력했을 때

웹 페이지에 HTML이 출력되었다.

 

이렇게 query string(?id= ~ ) 부분을 바꿔줌에 따라

변경된 값이 웹 페이지 상에서 확인할 수 있다.

 

 

var http = require('http');
var fs = require('fs');
var url = require('url');
 
var app = http.createServer(function(request,response){

    // request.url은 URL의 쿼리 부분만 가져오는 것이다.
    // 예) localhost:3000/?id=HTML 이라고 주소창에 입력하면 여기서
    // 쿼리 부분은 /?id=HTML이다. 이 /?id=HTML이 _url 변수에 저장되는 것이다.
    var _url = request.url;

    // requset.url을 통해 쿼리를 가져올 순 있는 데 에러가 뜬다.
    // URL을 분석(parse)하면 에러가 안 뜬다. 아래는 url을 분석한 줄이다.
    var queryData = url.parse(_url, true).query;
    //위의 코드처럼 작성한 후 localhost:3000/?id=HTML 라고 주소창에 입력하면
    // queryData에는 { id = 'HTML'}가 저장된다.
    
    console.log(queryData.id);
    //queryData.id라고 입력하면 HTML이 나온다.

    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id); // HTML
 
});
app.listen(3000);