[Node.js] pretty url(clean url, semantic url, restful url...)을 사용하여 라우트 기능을 구현하자

코드 간결화의 중요성이 대두됨에 따라 path 값도 clean url, semantic url으로 변경하는 추세이다.

따라서, 기존에 query string을 사용한 주소 값을 간결하게 바꿔 라우팅 하려고 한다. (Express 환경입니다.)

 

[💡before]

querystring을 사용한 path

• MAIN.js

app.get('/page', function(req, res) {
  fs.readdir('./data', function(error, filelist){
            // 변경될 부분
            var filteredId = path.parse(queryData.id).base;
            fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
              // 변경될 부분
              var title = queryData.id;
              var sanitizedTitle = sanitizeHtml(title);
              var sanitizedDescription = sanitizeHtml(description, {
                allowedTags:['h1']
              });
              var list = template.list(filelist);
              var html = template.HTML(sanitizedTitle, list,
                `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
                ` <a href="/create">create</a>
                  <a href="/update?id=${sanitizedTitle}">update</a>
                  <form action="delete_process" method="post">
                    <input type="hidden" name="id" value="${sanitizedTitle}">
                    <input type="submit" value="delete">
                  </form>`
              );
              response.writeHead(200);
              response.end(html);
            });
          });
});

 

• Template.js

list:function(filelist){
    var list = '<ul>';
    var i = 0;
    while(i < filelist.length){
      // 변경될 부분
      list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }

 

[💡after]

pretty url을 이용한 path

• MAIN.js

app.get('/page/:pageId', function(request, response) {
  fs.readdir('./data', function(error, filelist){
    // 변경된 부분
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      // 변경된 부분
      var title = request.params.pageId;
      var sanitizedTitle = sanitizeHtml(title);
      var sanitizedDescription = sanitizeHtml(description, {
        allowedTags:['h1']
      });
      var list = template.list(filelist);
      var html = template.HTML(sanitizedTitle, list,
        `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
        ` <a href="/create">create</a>
          <a href="/update?id=${sanitizedTitle}">update</a>
          <form action="delete_process" method="post">
            <input type="hidden" name="id" value="${sanitizedTitle}">
            <input type="submit" value="delete">
          </form>`
      );
      response.send(html);
    });
  });
});

 

• Template.js

list:function(filelist){
    var list = '<ul>';
    var i = 0;
    while(i < filelist.length){
      // 변경된 부분
      list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }

 

after의 path값이 훨씬 간결해진 것을 확인할 수 있다.

 

 

 

[참고자료]

http://expressjs.com/en/guide/routing.html

Express routing