sementic url 적용해보기

node js 공부를 하면서 초반에 sementic url의 형태를 공부해보았습니다.(http://bubobubo003.tistory.com/21?category=779547) 코딩을 항상 라우터 방식(?) 으로만 하다보니 app.js파일에라우터는 기하급수적으로 늘어나고 연관이 있는 페이지를 하나하나 라우터를 다 만드는건 좀 아니라고 생각이 들어서 시멘틱 url을 이용하여 웹페이지에 적용을 해보았습니다. 이런 상황을 가정해보겠습니다. 

이런 게시판이 있는데(물론 이렇게 허접한 게시판은 없겠지만..)  해당 작성글로 들어갔을 때 url을 라우터로 하나하나 다 작성하려면게시글의 개수만큼 app.get()을 통해서 할 수는 없을 것입니다. 그래서 현재 commuity라는 첫번째 url 뒤로 '규칙성이 있는 문자나 숫자가 들어가면 좋겠다' 라고 생각이 들었는데요 이런식으로 말이죠

num1이라는 글에 실제로 작성되어있는 데이터입니다. url을 보면 commuity url 뒤로 /22 라는 숫자가 들어간 것을 볼 수 있는데요 url만 보고도 commuity 페이지에 있는 22번째 글? 정도로 해석이 가능합니다. 

저는 기존의 commuity 라우터를 이런식으로 작성하였습니다.

app.get('/commuity',function(req,res){
    board.boardLoadFunction(function(result){
        var jsonStr = JSON.stringify(result);
        if(result.length==0)
            res.render('commuity',{data:0})
        else
            res.render('commuity',{data:jsonStr})
    })
});
 

다른건 다 그렇다치고 commuity라는 페이지를 렌더링 하겠죠 기타 다른 변수들은 개인적인 작업으로 인해 들어간 것입니다. 그러면 결과적으로는 localhost:3000/commuity 라는 페이지로만 접속이 가능할 것입니다. 그러면 글 하나하나도 페이지가 만들어져야하는데 기본적으로 게시판 글은 똑같은 페이지에 제목과 내용만 다른 형태일 것입니다. 그래서 추가적으로 sementic url형식을 만들기위한 라우터를 하나 더 만들어줍니다.

app.get('/commuity/:id',function(req,res){
    var id = req.params.id;
    models.Board.findAll({
        where: {'id':id}
    }).then(function(result){
        var jsonObj = JSON.stringify(result)
        res.render('commuity_detail',{data:jsonObj})
    })
})

기존에 라우터의 주소 뒤에 /:id 라는 형태로 추가되었는데 여기서는 숫자 값에 따라서 다른 데이터를 보여주려고 합니다. 

[ commuity.pug ]

$(document).ready(function(){
        var data = !{data}
        var len = Object.keys(data).length
        var tbody = document.getElementById('tbody');
        var len = 1
        if(data==0)
            len = 1
        else{
            len = Object.keys(data).length
            tbody = document.getElementById('tbody');
            for(var i=0;i<len;i++){
                tbody.innerHTML += "<th>"+data[i].name+"</th>"+"<th><a id=link"+i+" href=''>"+data[i].subject+"</a></th>"
                document.getElementById("link"+i).setAttribute('href','commuity/'+data[i].id)
            }
        }
    });
 

코드의 전부가 아니라 좀 가독성이 떨어지는데 어쨋든 중요한 부분은 setAttribute 부분입니다. a태그의 href 값을 변경해주는데commuity 주소 뒤로 특정 숫자 값을 갖게됩니다. 예를들면 http://localhost:3000/commuity/20 과 같이 말이죠 게시판의 글이 여러개이다보니 반복문도 쓰고 이 데이터들은 제 DB에서 뽑아쓰는 터라 코드가 백엔드 파일이랑 약간 복잡하게 얽혀있습니다. 아무튼 setAttribute로 인해 각각의 게시글들은 sementic url 형태의 링크 값을 갖게 됩니다. 

그렇게되면 app.js 파일에서 app.get('/commuity/:id',function(req,res){ 이 부분으로 들어오게 되겠죠commuity라우터에서는 commuity 페이지를 호출했다면 sementic url 라우터에서는 commuity_detail 페이지를

렌더링하고 있습니다. 그런데 URL주소는 localhost:3000/commuity_detail 이 아니라

localhost:3000/commuity/22 와 같이 표현이 되죠 commuity 페이지에서 특정 값에 따라 다른 데이터를

셋팅하여 보여주게 되는 것입니다.

            

보시면 같은 URL 형식에 뒤에 똑같은 html 페이지 폼을 쓰는데 숫자 값에 따라서 다른 데이터 내용을 갖게 해주는 것을

볼 수 있습니다. 똑같은 폼에 내용만 바뀌는 형식을 가질 때 sementic url 방식을 택하면 좋을 듯 합니다.