NodeJS Part5

8. 쿼리스트링

1. 쿼리스트링

1. URL과 관련하여 이해를 조금 더 높여 보도록 하겠습니다.
2. http://a.com/topic?id=1이라고 했을 때 각각의 의미를 따져 봅시다.
3. http(Hypertext Transfer Protocol) - 웹브라우저가 웹 서버와 대화하기 위한 일종의 규약같은 것입니다. 웹브라우저는 웹서버에게 웹 페이지에 대한 내용을 요청하고 웹 서버는 이에 대해 응답으로 요청된 페이지를 클라이언트에게 돌려보내게 됩니다.
4. a.com(Domain Name) - DNS(Domain Name System)을 이용해 웹서버에 저장되어 있는 IP로 변환됩니다.
5. topic(Path) - 라우터를 저장할 때 할당한 이름입니다.
6. id=1(Query string) - 특정 라우터에 할당된 query string입니다.
7. 이것을 통해 우리는 하나의 라우터에 몇개의 query string을 할당하고 이것에 대한 결과값이 다른 것들을 확인 할 수 있게 된 것입니다.

2. Query 객체 사용하기 - part 1

1. 먼저 인지해야 할 점은 Query를 단순 영어단어로 인식한다면, 질문이라는 의미가 있습니다.

2. 질문이라는 것은 클라이언트로부터 들어오는 사용자의 요청이며 이 요청에 우리는 프로퍼티를 이용해 조작할 수 있게 됩니다.

    app.get('/topic', function(req, res) {
        res.send(req.query.id);
    }
   

3. 여기서 query로 들어오는 프로퍼티의 이름은 우리의 마음데로바꿀 수 있습니다. 여기서는 id이지만, name으로도 무엇이든지로 바꿀 수있지요. conventionally id 를 사용합니다.

4. 물론 한번에 여러개의 프로퍼티를 전달할 수도 있습니다.

    app.get('/topic', function(req, res) {
        res.send(req.query.id+req.query.name);
    }
   

5. url에서는 &기호를 이용해 query 객체에 할당되는 프로퍼티 값들을 연결 시킬 수 있습니다.

3. Query 객체 사용하기 - part2

1. query객체를 활용해서 동적으로 움직이는 페이지를 만들어 봅시다.
2. /topic이라는 패스에서 id값들에 따라 각기 다른 페이지를 보여주고 싶은 것이 우리의 의도입니다.
3. 그렇다면 보여주고 싶은 개별 텍스트의 정보들을 topics라는 하나의 배열에 정보들을 넣고, 해당정보들을 output이라는 변수에 html로 구성한 뒤 ${}표현식을 활용해 해당 정보들을 동적으로 보여주겠다는 선언을 합니다.

4. 최종적으로 사용자의 요청에 대해 서버는 res.send(output)을 통해 결과를 화면에 보여주게 됩니다.

   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>
     ${topics[req.query.id]}      
     `
      res.send(output)
   });
   

4. URL의 이용한 정보의 전달

1. 지금까지의 방식대로 사용했을 경우에는 시스템적으로는 큰 문제는 없습니다. 하지만 url 창에 'localhost:3000/topic?id=1'로 보이는 것과 'localhost:3000/topic/1'로 보이는 것중 무엇이 덜 거부감이 드나요?(후자라고 말해... ㅠㅜ)
2. 네, 그렇습니다. 전자를 non-semantic-url이라고 하고 후자를 semantic url이라고 합니다.

3. 이와 같이 사용하기 위해서는 아래와 같이 코드를 조금 변경 시킬 필요가 있습니다.

    app.get('/topic/:id', 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>
     ${topics[req.params.id]}      
     `
      res.send(output)
   });
   

4. 클라이언트가 의도적으로 url창의 id값을 변경해야만 우리가 원하는 결과가 나오긴 하지만, 조금 더 정돈된 형태의 url을 우리는 얻을 수 있었습니다.