[Node.js] 2. Query String의 개념과 사용방법

WEB/🌳 Node.js

[Node.js] 2. Query String의 개념과 사용방법

무딘붓 2022. 7. 27. 00:44

Query String의 개념과 구조

1. Query String 이란?

개념을 간단하게 설명하면,

쿼리스트링은 사용자가 입력 데이터를 전달하는 방법 중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

http://~~~/path?querystring

위와 같이 쿼리 스트링은 URL에서 ? 다음에 오는 내용이다.

이름을 해석하면 간단한데 Query(질문) String(문자열) 즉, ? 뒤에 나오는 문자열이라는 뜻.

2. Query String의 구조

(예시)

http://~~~/path?키1=값1&키2=값2&키3=값3

위와 같이 쿼리스트링은 key=value 형식으로 구성되어있고, 여러 개를 사용하려면 '&'을 사용하면 된다.

위의 예시는 3개의 쿼리스트링을 보내고 있다.

URL에서 Query String 추출하기

1. 소스코드

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

var app = http.createServer(function (request, response) {
    var queryData = url.parse(request.url, true).query;
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end(queryData.name);
});

app.listen(4000);

위 소스코드를 이해하기 위한 Node.js의 문법을 몇 가지 살펴보면,

require()는 Node.js에서 모듈을 불러오는 함수이다.

해당 내용에 대해서는 다음 포스트를 확인하자.

https://sirius7.tistory.com/43

[Node.js] 3.모듈

모듈이란? Node.js으로 앱을 개발하기 위해서는 모듈 시스템을 사용한다. 이때, 모듈이란 ‘미리 만들어둔 함수들의 집합’이라고 할 수 있다. Node.js에서의 모듈은 2가지(코어 모듈, 파일 모듈)

sirius7.tistory.com

2. 실행 예시

터미널 등을 이용해서 위 소스코드가 입력된 js파일을 실행시킨 뒤,

http://localhost:4000/?name=kim 링크를 브라우저에 입력시켜 열어보면 위와 같은 결과를 확인할 수 있다.

3. 소스코드 분석

위 소스코드 중에서 다른 부분을 제외하고, 쿼리스트링과 관련된 부분만 먼저 살펴보자.

var url = require('url');

→ url이라는 변수에 url 모듈을 불러온다.

require()는 Node.js에서 모듈을 불러오는 함수이다.

url 모듈은 url 정보를 객체로 가져와서 분석(parse)하거나, url 객체를 문자열로 바꿔주는 기능(format, resolve)을 수행한다.

var queryData = url.parse(request.url, true).query;

→ url에서 쿼리스트링 부분을 찾아 queryData에 대입한다.

여기서 url.parse()는 url 문자열을 url 객체로 변환하여 리턴하는 역할을 한다.

아래의 사용 예시를 확인해보자.

url.parse()로 반환된 url 객체에는 port, path 등 url의 정보가 잘 정리되어 저장되어있다.

여기서 우리가 필요한 것은 query의 내용이기 때문에, url.parse().query를 따로 저장해 주는 것이다.

url.parse()의 구체적인 사용방법을 살펴보자

url.parse(urlStr, [parseQueryString], [slashesDenoteHost])

urlStr : url 문자열을 입력

[parseQueryString] (기본값 : false)
- true : url 객체의 query 속성을 객체 형식으로 가져온다.
- false : url 객체의 query 속성을 문자열 형식으로 가져온다.

[slashesDenoteHost] (기본값 : false)
- ture : urlStr이 '//foo/bar' 인 경우 foo는 host, /bar는 path로 구분한다.
- false : urlStr이 '//foo/bar' 인 경우 //foo/bar 전체를 path로 구분하고 host에는 null 대입.

slashesDenoteHost는 이번 사용 예시와 무관하므로 기본값 false로 둬도 무관하지만,

parseQueryString은 true로 설정해야 한다. 이유를 아래 예시를 통해 살펴보자.

parseQueryString을 false로 한 urlObject1은 쿼리스트링 값이 그대로 문자열로 저장되었다.

이렇게 저장된 경우 문자열에서 다시 원하는 정보를 구분해야 하기 때문에 몹시 불편해진다.

이와 반대로 parseQueryString을 true로 한 urlObject2은 쿼리스트링 값이 객체 형식으로 저장되었다.

따라서, 쿼리스트링에서 원하는 값을 찾아내기가 매우 편리해진다. 예를 들어, no에 해당하는 값인 '54'를 불러오기 위해서는 url.parse().query.no를 대입하면 되는 것이다.

response.end(queryData.name);

→ 입력받은 쿼리스트링에서 "name"에 해당하는 값을 출력하고 전송을 마친다.

Query String으로 입력된 값 사용하기 (동적인 웹페이지 만들기)

1. 소스코드

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

var app = http.createServer(function(request,response){
    var queryData = url.parse(request.url, true).query;
    var template = `
    <head></head>
    <body>
    <h2> ${queryData.id} </h2>
    <ul>
      <li><a href="/?id=LEE">LEE</a></li>
      <li><a href="/?id=PARK">PARK</a></li>
      <li><a href="/?id=JEONG">JEONG</a></li>
    </ul>
    <body>   
    `
	response.end(template);
});

app.listen(4000);

2. 실행 예시

위와 같이 각 타이틀마다 지정된 쿼리스트링을 이용해 url을 연결하는 방법으로 동적인 페이지를 만들 수 있다.

저작자표시

'WEB > 🌳 Node.js' 카테고리의 다른 글

[Node.js] 6. fs 모듈 (파일 읽기, 쓰기, 편집, 제거) (0)	2022.07.29
[Node.js] 5. 서버 실행하기 (0)	2022.07.28
[Node.js] 4. 동기 / 비동기 (0)	2022.07.28
[Node.js] 3. 모듈 만들기, 불러오기 (export, require) (0)	2022.07.27
[Node.js] 1. 소개 및 설치방법 (0)	2022.07.26

현재글[Node.js] 2. Query String의 개념과 사용방법

무딘붓의 코딩기록