(17) semantic url (의미론적 url) vs 쿼리스트링 방식

일반적으로는 쿼리스트링 방식의 url이 중요하지만 

semantic url에 대해서도 알아보자.

Non-semantic URL	Semantic URL
http://example.com/index.php?page=name	http://example.com/name
http://example.com/index.php?page=consulting/marketing	http://example.com/consulting/marketing
http://example.com/products?category=2&pid=25	http://example.com/products/2/25
http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss	http://example.com/news.rss
http://example.com/services/index.jsp?category=legal&id=patents	http://example.com/services/legal/patents
http://example.com/kb/index.php?cat=8&id=41	http://example.com/kb/8/41
http://example.com/index.php?mod=profiles&id=193	http://example.com/profiles/193

예를 들어 

127.0.0.1:3000/topic/1 로 접근했다고 가정하자. 

만약  app.js에

app.get('/topic',function(req, res){

res.send('Hello Semantic url');

});

이와 같은 로직을 작성했다고 한다면,

화면상에는 아래와 같이 나타날 것이다. 

그이유는 app.js에는  '/topic' 으로만 path를 잡아줬기때문이다. 

만약 app.js에 app.get('topic/1'...)로 path를 잡아줬다면???

아래와 같이 정상적으로 실행될것이다. 

그렇다면 어떤방식으로 path를 잡아줘야 url의 path에 관계없이 동일한 화면을 출력할 수 있을까?

해결방법은 

app.js에 '/board/:number  이렇게 (콜론): 과 함께  특정 name을 주면 된다. 

물론 '/board/:number/:mode/:name   여러개가 와도 정상적으로 접근가능하다. 

그러면 이 두개를 전부 실습 해보자. 

주의해서 볼것! 

1. req.send.number가 아닌 req.params를 사용한다. req.params.number 

2. 링크를 걸어둔 href="board/0"  (실수했었음.)

==========================================================================

app.js에 추가해보자. 

app.get('/board/:number',function(req, res){

var boards =[

'javascript is the client language'

,'nodejs is the server side javascript'

,'express is a module of extra modules'

];

var output = `

<a href = "/board/0">Java Script</a><br/>

<a href = "/board/1">Node js</a><br/>

<a href = "/board/2">Express</a><br/>

${boards[req.params.number]}

`;

res.send(output);

});

==========================================================================

127.0.0.1:3000/board/10000 으로 접근할 경우에도 정상적으로 화면이 나타난다. 

==========================================================================

++ app.js 에 추가해보자. 

app.get('/content/:number/:mode/:name',function(req, res){

var output=`

<h1>number : ${req.params.number}</h1>

<h2>mode : ${req.params.mode}</h2>

<h3>name : ${req.params.name}</h3>

`;

res.send(output);

});

==========================================================================

// path 의 형식을 맞춰줘야만한다. 만약 http://127.0.0.1:3000/content/0/1 로 접근할경우에는 

// name에 해당하는 패쓰값이 없으므로 아래와 같이 정상적으로 화면이 뿌려지지 않는다. 

출처: https://sourceflower.tistory.com/17?category=561762 [소스플로우]