공부하는 블로그

Node.js | URL parsing - 요청에 응답하기 본문

Node.js

Node.js | URL parsing - 요청에 응답하기

치킨닮은닭 2019. 12. 17. 16:39

URL

 URL은 Uniform Resource Locator의 약자로 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다. 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다.

 

URL의 구조


 URL의 시작은 컴퓨터 사이의 통신 규약인 프로토콜(protocol)을 입력하고 그 다음은 컴퓨터를 식별하는 호스트명이라 할 수 있는 도메인을 입력한다. 포트번호는 호스트의 컴퓨터 내에 존재하는 여러 서버 중 사용자가 원하는 서버로 들어갈 수 있도록 해준다. 그 뒤는 path(경로)와 query string을 통해 서버 내에서 원하는 자료를 찾아갈 수 있다.

 

URL Module

 Node.js에서는 URL 모듈을 통하여 URL 문자열을 객체로 바꾸거나 URL객체를 문자열로 변환하여 URL과 관련된 정보를 가져올 수 있다. 즉, URL 모듈은 URL을 통해서 입력된 값을 사용할 수 있도록 해준다. 내장모듈이라 Node.js에 포함되어 있으므로 별도의 설치가 필요 없다. 

 URL 모듈은 parse(), format(), resolve() 총 3가지 메소드를 가지고 있다. 이 중 사용자로부터 문자열 형식으로 받은 URL 요청을 처리하기 위해 'parse()'가 가장 많이 활용된다. 

 

parse() : URL 문자열을 입력하면 URL 객체를 만든다. 'format()'의 반대  
format() : URL 객체를 입력하면 URL 문자열을 반환한다. 'parse()'의 반대  
resolve() :  상대 URL을 절대 URL로 변경한다. 

 

 Sample URL 'http://www.sample.com:3000/main/post?category=nodejs&num=1'을 파싱해보자.

 

// 모듈 import
var url = require('url');

// url parsing
var urlStr = 'http://www.sample.com:3000/main/post?category=nodejs&num=1';
var urlObj = url.parse(urlStr, true);
console.log(urlObj);

 

문자열 URL을 URL 객체로 파싱한 결과. 데이터 타입이 JSON 형식이다.

 

 파싱한 URL 객체의 각각의 정보에 접근해보자. 접근 방법은 'URL객체.변수명(port, host, pathname ···)'으로 접근하면 된다.

 

// 파싱된 url 객체에서 각각의 정보 접근하기.
// 데이터 형식이 json이라 접근 방법이 간단하다.
var path = urlObj.path;
console.log(path);

var query = urlObj.query;
console.log(query);
console.log(query.category);
console.log(query.num);

 

URL 객체의 각각의 정보에 접근하여 그 값을 얻을 수 있다.

 

 파싱한 URL 객체를 다시 문자열로 변환하기 위해서는 'format()' 함수를 사용하여 변환이 가능하다.

 

 다음은 URL 모듈을 이용하여 클라이언트에 요청에 맞는 페이지를 응답해보자.

 

// 모듈 import
var http = require('http');
var fs = require('fs');
var url = require('url');

// 서버 생성
var app = http.createServer(function (req, res) {
    var reqUrl = req.url;   // 클라이언트로부터 요청이 온 urlStr
    var parsedUrl = url.parse(reqUrl, true);  // 요청받은 urlStr -> urlObj로 변환
    
    var pathname = parsedUrl.pathname;

    if(pathname == '/') {
        fs.readFile(__dirname + '/main.html', function (err, result) {
            if(err) {
                console.log('file read fail.. : ' + err.message);
                res.writeHead(404, {'Content-Type' : 'text/html'});
                res.end('404 : NOT FOUND');
            }else {
                res.writeHead(200, {'Content-Type' : 'text/html'});
                res.end(result);
            }
        });
    }else {
        fs.readFile(__dirname + pathname, function (err, result) {
            if(err) {
                console.log('file read fail.. : ' + err.message);
                res.writeHead(404, {'Content-Type' : 'text/html'});
                res.end('404 : NOT FOUND');
            }else {
                res.writeHead(200, {'Content-Type' : 'text/html'});
                res.end(result);
            }
        })
    }
});

// 포트번호 3000에서 서버 실행
app.listen(3000, function () {
    console.log('Server listens on port 3000...');
});

 

<!-- main.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>메인</title>
    </head>
    <body>
        <h1>메인화면입니다요!</h1>
        <a href='/member/login.html'>로그인</a> / <a href='/member/account.html'>회원가입</a>
    </body>
</html>

 

 위의 코드대로라면 'http://localhost:3000'에 아무런 경로가 없다면 메인화면으로 이동하게 된다. 메인화면에서 로그인과 회원가입을 클릭하면 각각의 요청에 맞는 페이지로 이동하게 되도록 간단하게 구현해보았다.

 

메인화면
메인화면에서 로그인 클릭 시 응답된 페이지
메인 화면에서 회원가입 클릭 시 응답된 페이지

 

 

 

Comments