Node.js (3) - URL의 이해

 

나의 Node.js 의 최종 목표는 JavaScript를 이용해서 Node.js가 가지고 있는 기능을 호출하며 우리가 Web application을 Node.js로 만들 수 있게 되는 것이다.

 

이제 Web application을 구현하는 아주 중요한 테크닉을 살펴볼 것이다.

 

 

 

 

---

 

 

 

먼저, cmd 창에서 node main.js 를 실행시키고 웹 브라우저에서 localhost:3000 을 입력하면 이런 창이 뜬다.

 

그리고 여기서 목차에 있는 HTML, CSS, JavaScript 는 각각 1.html 2.html 3.html 과 같은 정적인 파일을 가지고 있다.

 

예를 들어, 우리가 수백 개의 페이지를 가져온다면 그에 해당하는 수백 개의 정적인 파일들을 가지고 있어야 한다.

 

이때 URL의 값을 달리 하는 것을 통해서 php application이 클라이언트(web browser)에게 서로 다른 페이지를 만들어서 보내게 할 수 있다.

 

 

 

---

 

 

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

1) protocol (사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인가) - 웹 브라우저와 웹 서버가 데이터를 주고받기 위해 만든 통신 규칙

 

2) host(domain) - host란 인터넷에 접속되어 있는 각각의 컴퓨터를 말함. opentutorials.org 는 어떤 특정한 인터넷에 연결되어 있는 컴퓨터를 가리키는 주소

 

3) port - 한 대의 컴퓨터 안에 여러 개의 서버가 있을 때, 클라이언트가 특정 서버에 연결할 수 있게 해준다

 

4) path - 어느 컴퓨터 안에 있는 어떤 디렉토리에 어떤 파일인지를 가리킴

 

5) query string - 이 부분의 값을 변경하면 해당 웹 서버에게 데이터를 전달할 수 있다. 내가 읽고 싶은 정보는 html 이고 12page 이다. 시작은 ?로, 값과 값은 &, 값의 이름과 값은 =로 구분하기로 약속했다.

 

 

 

---

 

 

query string의 값에 따라서 Node.js 를 통해 만든 웹 서버가 사용자에게 동적으로 생성한 정보를 전송하는 방법을 알아보자.

 

 

 

 

먼저, 아까 열었던 main.js 파일을 아래와 같이 수정한다. (5, 8번줄에서 request.url 을 url로)

 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url = request.url;
    if(url == '/'){
      url = '/index.html';
    }
    if(url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

 

 

우리가 html 페이지를 열었을 때 주소에 localhost:3000/?id=HTML 이라고 query string 이 뜨게 되는데,

 

여기서 HTML의 값은 위의 소스코드 중 var url = request.url; 여기 변수에 저장된다.

 

 

 

 

 

그리고 이젠 url을 분석해서 데이터를 추출해야 한다.

 

다시 main.js 파일을 열어 제일 상단에 url이라는 새로운 변수 선언을 해준다. 

 

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

var app = http.createServer(function(request,response){
    var url = request.url;
    if(url == '/'){
      url = '/index.html';
    }
    if(url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

 

여기 소스 코드 중 위의 3줄은, 우리가 만든 웹 어플리케이션은 http, fs, url 이라고 하는 것을 요구한다는 뜻이다.

 

 

http, fs, url 은 Module이라는 것인데, Node.js 가 가지고 있는 수많은 기능들을 비슷한 것끼리 그룹핑 한 것이다.

 

즉, 우리는 url 이라고 하는 모듈을 사용할 것이라고 새로 알려준 것이다. (url 이라는 변수를 통해서 사용)

 

 

 

 

하지만 지금 상태에서 문제가 있다.

 

우리가 웹 페이지의 url의 값을 가져오는데 이미 url 변수를 썼다.

 

그래서 6번 줄에서 선언한 url 이름명을 변경해야 한다. (_url 로 변경)

 

 

 

그리고 이름을 바꾼 _url 변수 아래에 새로운 변수를 선언해주자.

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

 

이렇게 하면 queryData 가 나오게 되는데, 만약 console.log(queryData.id) 라는 코드를 추가해 준다면 해당 query의 id 값이 들어간다.

 

 

 

 

 

 

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

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + _url));

});
app.listen(3000);

 지금까지의 코드.

 

 

 

 

 

즉, localhost:3000/?id=something 에서 something의 값에 따라서 qeuryData의 값이 바뀐다는 것을 알 수 있다.

 

 

 

 

 

 

 

(모든 내용은 https://opentutorials.org/course/3332 을 참고했습니다)