Node.js 시멘틱 URL

생활코딩 Node.js 강의를 들으며 정리한 내용을 올립니다.

 

web2강의에서는 쿼리스트링으로 웹페이지를 만들었다.

그런데 강의내용대로 코드를 작성하니 vscode에서 쿼리스트링에 취소선이 그어져 있었다.

https://nodejs.org/api/documentation.html#stability-index

여기에 들어가서 쿼리스트링을 찾아보면 

이렇게 표기되어있다.

레거시이므로 권장되지 않고 다른 기능을 사용하라는 것 같다.

그렇다면 다른 기능이 무엇일까? 바로 시멘틱URL(Semantic URL)이다. 

 

 

먼저 쿼리스트링에 대해 알아보자.

http://a.com/topic?id=1
http://a.com/topic?id=2
http://a.com/topic?id=3

위의 세 주소는 topic 이라는 같은 path 혹은 라우터를 가지고 있다. 그러나 물음표 뒤의 id값을 다르게 주면서 다른 웹 페이지 결과를 만들어낼 수 있다. 이를 가능하게 하는 것이 바로 쿼리 스트링(Query String) 이다.

하지만 페이지를 넘어갈 때마다 id값 뒷부분이 점점 더 지저분해지고 어떤 페이지인지 알기 어려워진다.

이를 방지하고 깔끔한 URL을 사용하기 위해 만들어진 것이 시멘틱 URL이다.

이런 차이가 있다. 출처: 위키백과

 

 

 

 

app.get('/topic', function(req, res) {
  var topics = [
    'Javascript is....',
    'Nodejs is...',
    'Express is...'
  ];
  var output = `
    <a href="/topic?id=0">Javascript</a><br>
    <a href="/topic?id=1">Nodejs</a><br>
    <a href="/topic?id=2">Express</a><br><br>
    ${topics[req.query.id]}
    `
    res.send(output);
})

 

기존 쿼리스트링 코드에서 

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

이렇게 수정한다.

그리고 

 var output = `
    <a href=“/topic/0">Javascripte</a><br>
    <a href=“/topic/1">Nodejs</a><br>
    <a href=“/topic/2">Express</a><br><br>
    ${topics[req.params.id]}
  `;
  res.send(output);
});

output부분도 id를 제거한다.

쿼리스트링을 사용할 때는 req.query.id 

semantic URL을 사용할 때는 req.params.id 를 사용해야한다. 

 

 

참고: https://velog.io/@kjh950330/Nodejs-%EC%8B%9C%EB%A9%98%ED%8B%B1-URL-ctlvxy5n