Node.js (2) URL 쿼리 스트링 해석

Jyno

Published in

POCS

4 min readSep 5, 2020

https://opentutorials.org/module/3549/21046

1. URL이란?

위키백과
네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 즉, 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다. 쉽게 말해서, 웹 페이지를 찾기위한 주소를 말한다.
구조 — 참고자료

protocal : 자원에 접근할 방법을 정의해둔 프로토콜 이름을 적습니다. 스터디 중엔 http를 사용합니다
host(momain) : 자원이 위치한 Domain 주소를 적습니다
port : 자원 내 프로세서 구분을 위한 번호입니다
path : 웹서버 내에서 자원 경로를 구분하기 위해 사용합니다
query string : 웹서버에 제공하는 추가 파라미터입니다. 이 파라미터들은 & 기호로 구분된 키/값으로 짝을 이룬 리스트입니다.

이번시간에는 query string을 통해 브라우저에서 서버로 데이터를 전송하는 방법을 연습해 보겠습니다.

2. 실습

index.html

<h1>hello Node.js!</h1>

main.js

var http = require('http');
var fs = require('fs');
var url = require('url'); //(1)require == import
var app = http.createServer(function(request,response){
    var _url = request.url; //(2)
    console.log(_url) //(2.1)
    var queryData = url.parse(_url, true).query;// (3)
    var allData = url.parse(_url, true);// (3.1)
    console.log(allData);// (3.1)
    console.log(queryData.id); //(4)
    if(_url == '/'){ // (5)
      _url = '/index.html';
    }
    else{
        _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + _url)); //(6)
    // response.end(queryData.id);
 
});
app.listen(3000);

요청 URL : http://localhost:3000/?id=10
Node.js에서 패키지는 require(package)로 모듈을 로딩합니다 — 참고자료1 참고자료2
(1) url 정보를 분석하거나 문자열로 변환하기 위해 ‘url’ 모듈을 로딩했습니다
(2) request 객체에 담긴 url 값을 _url 변수에 저장합니다
기존에 로딩한 모듈인 url과 혼동을 피하기 위해 변수 이름을 _url로 저장합니다
(2.1) _url엔 URL 전체 경로가 저장되는 것이 아닌 host:port 뒤의 내용이 저장됩니다
(3) url 모듈의 parse함수를 사용해 url을 분석하고 .query 부분만 따로 저장합니다.
(3.1) 만약 따로 뽑아 내지 않는다면 url.parse의 결과는 어떻게 나올까?
URL을 요청했을때의 결과는? — 아래 object 가 반환됩니다

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?id=10',
  query: [Object: null prototype] { id: '10' },
  pathname: '/',
  path: '/?id=10',
  href: '/?id=10' }

(4) log에 query 중 id의 값인 10이 찍히게 됩니다
(5) _url의 값에 따라 다른 결과를 전송하기 위해 분기점을 지정합니다
이번 시간에는 따로 지정할 필요가 없습니다
(6) 서버의 index.html을 전송해 주기 위해 파일을 읽어 들인 후 response에 저장합니다

3. 마치며

실제 REST API 환경에서 위의 방식으로 url의 값을 비교해서 사용하지는 않습니다.

그러나 이번에 해본것은 위의 방식을 통해 URL을 통해 입력된 값을 서버에서 사용할 수 있게 됩니다.

서버에서 브라우저로 데이터를 전송하기만 하는 일방통행 서비스를 만드는것이 아닌 브라우저와 서버 사이의 통신을 통해 동적 페이지를 작성할 수 있게 되었습니다.

다음엔 동적 페이지를 작성하는 방법에 대해 알아보겠습니다.

Node.js (2) URL 쿼리 스트링 해석

1. URL이란?

2. 실습

3. 마치며

Written by Jyno