[Node.js 기본] URL 기본

[Node.js 기본] URL 기본

1. URL

 MDN 사전은 URL을 아래와 같이 정의한다.

URL이란 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열입니다.

 정의된 내용을 보면 URL이 문자열이란 것 하나는 확실하다. 그렇다면 URL은 어떤 문자열로 어떻게 구성되어 있을까? 아래의 예시 를 살펴보자

http://www.example.com/main?id=HTML&page=12#fragment

 예시의 URL에선 URL을 구성할 수 있는 모든 요소들을 나타내었다. 이를 각 부분별로 나누어 예시와 함께 정리하면 아래의 표와 같다.

 

example	part	feature
https://	protocol	specifiy the protocol used to access the resource in internet
www.example.com	domain name	specify the domain of the website or server that hosts the resource
/main	path	specify the location of the resource on the server
?id=HTML&page=12	query string	a set of parameters that are appended to thr URL, and that are used to provide additional information to the server. ex. query string => 'key = value'
#fragment	fragment	a string that is appended to the URL and that is used to specify a section or a location within the resource

 다시한번 정리하면 프로토콜은 인터넷에서 리소스에 접근하는데 사용되는 규칙 체계를 나타내고, 도메인은 리소스를 호스팅하는 서버를, path는 /로 시작하며 서버상에서의 리소스의 위치를, query string은 ?로 시작하며 서버에서 추가적인 정보를 나타내기 위해 쓰이는 부분이다. 마지막으로 fragment는 #으로 시작하며 리소스 내의 섹션, 위치를 지정하는데 사용되는 부분이다. 나에게 있어서 앞서 정리한 내용 중 직관적으로 어떻게 사용되는 것인지 애매한 부분은 query string과 fragment이다. 이를 보다 깊게 이해하기 위해 예시와 함께 알아보자.

 

 

1-1) query string ( ? )

 query string은 ? 기호를 통해 구분되며 클라이언트가 서버에 추가적인 정보를 제공하기 위해 사용된다. query string은 name-value 쌍으로 이루어지며 &를 통해  구분된다. 아래의 예시의 경우 key1=value1과 key2=value2 두 쌍의 query string이 존재한다.

 

http://www.example.com/path?key1=value1&key2=value2

 query string의 사용은 기본적으로 클라이언트가 서버에 정보를 제공한다는 것을 바탕으로 시작한다. 인터넷 쇼핑몰에서 빨간색 티셔츠를 필터링한다고 가정해보자. 사용자가 ui 상에서 해당 조건을 체크한 뒤 설정버튼을 누른다면 query string이 ?type=t-shirt&color=red와 같은 방식으로 포함된 URL에 접속되며 해당 request가 브라우저에 전달될 것이다. 브라우저 에서는 이 데이터를 파싱하여 각 조건에 맞는 페이지를 제어하고, 출력해 주게 된다. 즉, 각 URL을 통해 클라이언트가 추가적인 데이터를 브라우저에 전달하고 브라우저는 이를 바탕으로 response를 제어 및 출력한다.( HTML form 요소에 입력된 정보 또한 query string을 통해 전달 가능하다.)

 

1-2) fragment ( # )

 fragment는 브라우저에서 리소스 내에서 특정 위치를 식별하기 위해 사용된다. 리소스가 아래와 같이 id값으로 fragment를 갖는 anchor tag가 포함된 HTML 문서이라고 가정해 보자

 

<a id="fragment">Fragment</a>

 HTML 문서 중간에 위와 같은 태그가 포함되어 있다면 #fragment는 브라우저가 해당 achor 태그의 위치를 특정할 수 있게 해주는 것이다. 즉, http://www.example.com/path?key=value#fragment와 같은 URL을 통해 페이지가 로드될 때 바로 해당되는 위치로 스크롤 하는 기능을 구현 가능하다.

 

 여기까지가 URL을 다루기 위해 필요한 기본이며, node.js에서 url을 직접 다루려면 내장 모듈인 url module을 사용해야 한다. 

 

2. URL Module

 url 모듈은 url에 담긴 정보를 사용하기 위한 node.js의 내장모듈이다. url module은 parse(), format(), resolve()이 세가지를 포함하고 있으며 주로 사용되는 것은 url의 protocol, host, query string 등에 대한 데이터 반환하는 parse()이다. 실제 함수를 서버에 적용해보면 아래와 같이 출력됨을 확인할 수 있다.

 

let http = require('http');
let fs = require('fs');
let URL = require('url')

let app = http.createServer((req, res) => {
    let reqUrl = req.url;
    let url = URL.parse(reqUrl)

    console.log(url)

    res.writeHead(200);
    res.end('hello')

})

app.listen(1000);

 

localhost:1000 접속 결과

 

 

 위 이미지는 브라우저에서 node.js 서버가 실행되고 있는 주소로 접속했을 때 발생하는 request에 담긴 url정보를 파싱한 결과이다. 일단 query, pathname, path에 집중해보자. 현재 도메인값만 가진 url로 접속했으며 이에 따른 파싱 결과는 { query : null, pathname : '/', path : '/' }이다. 그렇다면 도메인에 path, query string, fragment를 추가해서 접속하면 어떤 결과를 낳을까? 브라우저에서 아래의 주소로 접속해 결과를 확인해보자.

 

http://localhost:1000/main?id=site&name=home

 

 

http://localhost:1000/main?id=site&name=home 접속 결과

 

 

 출력 결과 {query : query string, path : path + query string, pathname : path}의 값이 변한 것을 확인할 수 있다. 이를 통해 도메인 뒤에 path와 query string을 추가함으로써 request를 보다 구체화 시킬 수 있다는 것을 알 수 있다.