[node js]쿼리스트링과 쿼리스트링을 이용한 페이지 값 출력

쿼리스트링이란 무엇일까?

http://estelar.tistory.com/topic?id=3 

먼저 이런 url을 분석해보자

http는 hyperTextTransferProtocol 의 약자이며, 웹 페이지 맨 앞에 사용된다.

:// 은 단순 문법이고

estelar.tistory.com은 해당 웹페이지를 제공하는 컴퓨터 주소로 이동하는 것이다.

마지막으로 /topic이라는 것은 path로 estelar.tistory.com/topic    estelar.tistory.com/yes 이런식으로 해당 컴퓨터의 서로 다른 페이지로

이동할 수 있는 경로 역할을 한다.

그럼 그 뒤에 붙은 ?id=3은 뭘까? 

이게 바로 쿼리스트링이다.

쿼리스트링이 만약 ?id=1 이고 ?id=3 이면, 서로 다른 페이지는 아니지만 다른 값을 웹 페이지에 표출할 수 있게 된다.

그렇다면 쿼리스트링을 통해 어떻게 웹 페이지에 다른 값을 표출하는가?

저번 시간에 했던 app.js 파일에 쿼리스트링 관련 내용을 추가해보자. 

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

res.send(req.query.id)

});

사용자는 url을 입력해서 들어오고, 그것은 사용자의 요청(request)이라고 볼 수 있다.

따라서 url에서 쿼리스트링을 통해 id값을 입력하면 그 값은

req.query.id 를 통해 사용할 수 있게 된다.

localhost:3000/topic?id=1 

을 입력하면 화면에 1이 표출되고,

localhost:3000/topic?id=2

를 입력하면 화면에 2가 표출된다.

만약 id값과 name 값 모두를 얻고 싶다면

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

res.send(req,query.id+','+req.query.name)

});

을 입력한 후 

localhost:8080/topic/id=1&name=yeseul

을 통해 웹페이지에 접속하면

1,yeseul 이라는 값이 화면에 표출된다. 

그렇다면 생각해보자.

대체 어떤 사용자가 id값을 주고, name값을 줘서 페이지를 웹페이지에 접속한단 말인가??

단순히 클릭을 통해 접속하는 방법을 알아보자.

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

var page = [

'first_page',

'second_page',

'third_page'

];

라는 배열을 만들어보자.

그리고 화면에 버튼을 만들어보자

var output = `

<a href="/topic?id=0">첫번째 버튼</a>

<a href="/topic?id=1">두번째 버튼</a>

<a href="/topic?id=2">세번째 버튼</a>

<h1>${page[req.query.id]}</h1>

`

웹 페이지에 3개의 버튼을 만들고 . h1 태그 안에

page[0],page[1],page[2] 라는 배열의 값이 각가의 id에 따라 표출되도록 변수를 넣어놓는다

마지막으로 출력한다.

res.send(output);

});

위와 같은 호출을 통해 

웹 페이지에 접속했을 때

첫번째 버튼을 누르면 first_page 라는 값이 

두번째 버튼을 누르면 second_page 라는 값이

세번째 버튼을 누르면 third_page라는 값이 출력된다.