.png)
어플리케이션.
즉, 우리가 앱이라고 했을 때, 사용자는 앱이 항상 똑같은 내용만을 출력하는 것을 원하지 않을 것이다. 사용자의 입력(조작)에 따라 다른 내용을 출력해주는 기능을 담고 있어야 진정한 의미의 앱이라고 할 수 있다.
우리는 그중에서도 웹을 다루는 어플리케이션을 학습해왔다. 이는 사용자가 어떤 주소(URL)로 접근하냐에 따라서 다른 결과를 보여주는 어플리케이션을 말한다.
예를 들어, 사용자가 http://a.com/login 이라는 도메인으로 접근했을 때, 라우터가 path에 연결되어 있는 컨트롤러를 호출해서 그에 맞는 내용을 출력해주는 식이다. URL에 뒷부분에 붙어있는 /login 과 같은 것을 path라고 하는데 이것에 따라 각기 다른 경로로 이동할 수 있게된다. 따라서 만약 http://a.com/home, http://a.com/topic 등 사용자의 입력을 다르게 한다면 각자 다른 내용이 호출될 것이다.
http://a.com/topic 이라는 도메인은 항상 같은 결과를 보여줄 것인데, 이 하나의 path로 접근했을지라도 경우에 따라 다른 내용을 서비스한다면 추가적인 정보를 얻을 수 있을 것이다.
쿼리스트링
http://a.com/topic?id=1
http://a.com/topic?id=2
http://a.com/topic?id=3
위의 세 주소는 topic 이라는 같은 path 혹은 라우터를 가지고 있다. 그러나 물음표 뒤의 id값을 다르게 주면서 다른 웹 페이지 결과를 만들어낼 수 있다. 이를 가능하게 하는 것이 바로 쿼리 스트링(Query String) 이다.
흔히 우리가 어떤 웹 사이트에 접속했을 때, 엔드포인트 이후 ? 기호를 사용하고 그 뒤에 여러가지 문자열들이 나열되는 것을 볼 수 있는데 이 내용에 따라서 우리는 각기 다른 페이지 정보를 읽어올 수 있는 것이다.
자, 그렇다면 실제로 쿼리스트링을 어떻게 사용하여 웹을 구성하는지 알아보자.
app.js 를 열어 지금까지 했던 코드를 살펴보면..
app.js
var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'pug');
app.use(express.static('public'));
app.get('/topic', function(req, res) {
res.send('Hello');
})
app.get('/template', function(req, res) {
res.render('temp', {time:Date()});
})
app.get('/', function(req, res){
res.send('Hello home page');
});
app.get('/dynamic', function(req, res) {
var lis = '';
for(var i=0; i<5; i++) {
lis = lis + '<li>coding</li>';
}
var time = Date();
var output = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
Hello Dynamic!
<ul>
${lis}
</ul>
${time}
</body>
</html>`;
res.send(output);
});
app.get('/route', function(req, res) {
res.send('Hello nodejs, <img src="/route.png">')
})
app.get('/login', function(req, res){
res.send('Login please');
});
app.listen(3000, function() {
console.log('Connected 3000 port!');
});
우리는 /topic path를 통해 쿼리스트링을 구현해볼 것이므로 다음의 코드에 집중해본다.
app.get('/topic', function(req, res) {
res.send('Hello');
})get 메소드의 익명함수의 인자로 req(request)를 받을 수 있었다. 그 인자를 query(string)의 id를 참조하게끔 만들어주기 위해 다음과 같이 작성하자.
app.get('/topic', function(req, res) {
res.send(req.query.id);
})이제 서버를 실행하고 테스트해보면
위와 같이 쿼리스트링에 전달된 값이 그대로 출력된 것을 볼 수 있다. 이는 쿼리스트링 값이 함수 즉, 컨트롤러에 첫번째 인자값에 query라는 객체로 감싸고 id라는 프로퍼티값으로 들어온 것이다.
그렇다면 프로퍼티만 변경해주면 우리가 원하는 값을 받아서 그대로 출력할 수 있게 된다. 만약 id와 name을 모두 출력하고 싶다면
app.get('/topic', function(req, res) {
res.send(req.query.id + ',' + req.query.name);
})위와 같이 작성하고 주소창에 id에는 1, name에는 kjh를 값으로 넣어주고 주소를 입력하면
위와 같이 출력된다. 또한 두 개 이상의 값을 출력할 때는 &(ampersand) 기호를 사용한다.
