6. express 쿼리스트링 사용

여기서는 URL을 통해서 에플리케이션에 정보를 전달하는 방법에 대해서 알아봅니다. 

그 중에서 express 에서 제공하는 query 객체를 사용할 것이다.

일단 기본적으로 라우터를 통해 접근하는 구문은 

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

이와 같이 쓸 것이다. 그러면 3000포트로 접근하고 있다는 가정하에 localhost:3000/topic 의 url로 접근했을 때 웹페이지에 hello 라는 문자열이 나올 것이다. 

기존에 알고있던 방법으로는 다른 페이지에 접근하려면 다른 라우터를 통해서 접근을 해야했다. 예를들면 '/form'

라우터로 접근한다던가 하면 localhost:3000/form 으로 접근할 것이다.

일단 쿼리 스트링이라고해서 해당 라우터에서 요청하는 값을 알아내는? 정확히 이론적인 의미를 따지자면

'데이터를 전달하기 위한 URL의 일부분' 이라고 한다. 우리가 흔히 URL을 보면 ~~~? 이렇게 물음표가 나오는 경우가 있는데 이게 쿼리스트링이라 보면 될 것같다.

예를들면 위에서는 localhost:3000/topic 로 접근했지만 localhost:3000/topic?id=1 이런 식으로 같은 라우터에서 다른 화면을 보여줄 수도 있다는 얘기다. 이게 가능하도록 하는 코드는

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

쿼리 스트링은 사용자가 요청하는 정보이기 때문에 req를 쓰고 request 객체에 있는 query객체를 사용한다. 

http://expressjs.com/en/4x/api.html#req.query 여기에 query 객체에 관한 자세한 정보가 있다.

이렇게 작성했을 때 쿼리스트링 형식으로 url을 사용할 수 있다. 예를들면 localhost:3000/topic?id=9999 으로 접속 시에

이와 같은 결과창을 볼 수 있다. id라는 값에 9999 라는 값을 요청하였고 그것을 화면에 나타낸 것이다. 만약에 여러개의 쿼리스트링을 사용하려고 한다면

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

이와 같이 쓴다면 id와 name의 값을 둘 다 받을 수 있다. 코드상에서의 이름과 url에 입력하는 이름이 동일하면 되는 것이다. 단 이럴 때는 url에 &연산자를 통해 표현을 해야한다. 

지금까지 한 것은 굉장히 불편하고 기본적인 개념들을 설명하는 단계였고, 우리가 직접 쿼리스트링을 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>
        ${topics[req.query.id]}
        `
    res.send(output);
});

위와 같은 형태는 링크 클릭 시 쿼리 스트링의 요청이 들어오고 응답할 값들을 미리 배열에 넣어놓고, 그 값을 output이라는 변수에 넣어주는 형태를 가지고 있다. 

직접 url에 쿼리스트링을 입력해주는 형태가 아니라 링크로 이동 시에 같은 라우터에서 쿼리스트링 값으로 다른 결과물을 출력해주게 된다.

-----------------------------------추가-----------------------------------

semantic URL 방식

기본적인 원리는 쿼리 스트링에서 벗어나지 않지만 현대 웹 어플리케이션에서 많이 쓰이는 URL 방식이라고 한다. 티스토리 블로그만 봐도 url을 이 방식으로 사용할 수 있도록 제공해주고 있다.  ex)  http://bubobubo003.tistory.com/20  이와같이 뒤에 20이라는 path를 추가해서 쿼리스트링의 기능을 할 수 있게끔 하는 것이다. (물음표가 등장하지 않고 숫자형식으로)

기존에 코드에서 약간만 변경을 하면 된다.

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

달라진건 라우터 부분에 /:id 라고 추가된 부분과 query대신 params 로 바뀐 것을 볼 수 있다. 또한 a 태그 부분도 /0 /1 /2 와 같은 

방식으로 바꿔줘야 한다. (물론 보여주기 위한 하드코딩을 한 것이다.)

기존에 localhost:3000/topic?id=0 으로 접근하는 url이 어떻게 바뀌는지 한번 확인해보자.

URL을 보면 쿼리스트링이 아니라 라우터의 형태로 /0 /1 와 같이 들어가면서 쿼리 스트링과 같은 역할을 하는 것을 볼 수 있다.

또한 여기서 작성된 쿼리스트링을 다른페이지에서 사용하고 싶을 때 이와같은 구문을 사용할 수도 있다.

app.get('/topic/:id/:mode',function(req,res){
    res.send(req.params.id+','+req.params.mode)
})
 

이렇게 작성 후 localhost:3000/topic/0/pppp 의 url로 접속하게되면 

0이라는 쿼리스트링 값을 사용할 수 있게된다. 

이상 쿼리스트링 및 시멘틱 url 의 간단한 사용법을 알아보았다.