[Node.js] URL에서 쿼리스트링 추출하기

이대현·2020년 6월 13일

JavaScript node.js querystring 쿼리스트링

Web Front-End

목록 보기

6/9

1. 쿼리스트링이란?

쿼리스트링은 사용자가 웹으로 데이터를 전달하는 가장 단순하고 널리 사용되는 방법이다. URL 주소 뒤에 입력 데이터를 함께 제공하는 한다.

아래 URL에서 URL과 쿼리스트링을 구분해보자. ? 뒤 볼드 처리된 부분이 쿼리스트링이다.

http:// opentutorial.org:3000/main?id=HTML&page=12

? : 쿼리스트링의 시작을 나타내는 기호이다.
변수=값 한 쌍으로 구성된다.
& : 여러 쌍의 변수와 값을 전달할 경우 &로 구분한다.

2. URL에서 쿼리스트링 추출하기

실제로 웹 서버를 만들때는 쿼리스트링을 먼저 지정하고 그 쿼리스트링으로 URL을 연결한다.

하지만 이 우리의 목적은 쿼리스트링을 읽고 다루는 방법을 학습하는것이기 때문에, 반대로 URL에서 쿼리스트링 데이터을 parse(추출)하는 방법을 알아볼 것이다.

예를 들면,

나는 ?id=HTML 에서 HTML대신 CSS를 입력했을때 CSS에 관한 페이지가 응답하기를 기대한다.

그 기능을 구현하기 위해서는 쿼리스트링의 HTML, CSS 값이 어떤 자바스크립트 변수에 담겨 있는지를 알아야 한다. 그걸 URL 파싱을 통해 확인 해본다는 것이다.

파싱을 하려면 url 모듈(자세한 정보)을 사용해야한다.

2.1. URL 모듈 사용하기

url 파싱을 하기 위해 node.js의 url 모듈을 불러온다.
```
var url = require('url');
```
url 모듈의 parse() 함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴한다. queryData를 출력해서 확인해보자.
```
var queryData = url.parse(request.url, true).query;

console.log(queryData);
```
```
> [Object: null prototype] { id: 'CSS' }
```
쿼리스트링 객체에서 id 값을 추출한다.
```
console.log(queryData.id);
```
```
> CSS
```
url에 ?id=CSS도 넣어보고 ?id=HTML도 넣어보면서 쿼리스트링에 따라 다른 정보가 출력됨을 확인한다.
```
response.end(queryData.id);
```

이렇게 CSS 혹은 HTML을 담고있는 데이터가 queryData.id 임을 확인했다. 이제 이 쿼리스트링에 따라 각기 다른 정보를 제공하도록 서버를 만들 수 있는 것이다.

3. 동적인 웹페이지 만들기

이제 내 웹페이지에 링크된 페이지들이 아무리 많아도, 일일이 쿼리스트링 값에 따라 타이틀을 입력하지 않아도 된다. 쿼리스트링이 담긴 변수가 queryData.id 임을 알기 때문이다!

아래 예제를 보자.

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
    var queryData = url.parse(request.url, true).query;
    var title = queryData.id;
    var template = `
    <ul>
      <li><a href="/?id=HTML">HTML</a></li>
      <li><a href="/?id=CSS">CSS</a></li>
      <li><a href="/?id=JavaScript">JavaScript</a></li>
    </ul>
    <h2>${title}</h2>
    `
	response.end(template);
});
app.listen(80);