웹페이지들의 url들을 보게 되면
과 같이 ?로 이루어진 url을 본적이 있을 것이다.
이를 이용해 하나의 라우터를 갖고 여러개의 url을 생성할 수 있다.
그럼 방법을 알아보자.
app.get('/topic', function (req, res) {
res.send('Hello');
});우선 기본적인 라우터의 형식이다.
이는 topic?id=1을 작성하든 topic?id=2를 작성하든 모두 똑같이 Hello 라는 문구가 출력된다.
그렇다면 어떻게 id값에 따라 웹페이지를 다르게 할당할까?
사용자가 위와 같이 입력해서 들어왔다면 이는 request일 것이다.
function의 첫번째 매개변수인 req의 값으로 request 정보가 들어오게 된다.
app.get('/topic', function (req, res) {
res.send(req.query.id);
});다음과 같이 코드를 작성하면 topic?id=1를 사용자가 입력했을 때 웹페이지 화면에 1이 출력되게 된다.
topic?id=99를 작성하면 99가 출력된다.
이를 통해 확실하게 req의 값이 request 정보를 나타냄을 알 수 있다.
app.get('/topic', function (req, res) {
res.send(req.query.name);
});만약 위와 같이 코드를 작성했다면 topic?id=1를 입력하면 작동하지 않을 것이다.
반드시 똑같이 topic?name=1 이라고 작성을 해줘야한다.
req.query라는 property가 있다. req의 객체가 갖고 있는 일종의 변수 같은 느낌이다.
이에 대해 더 설명하자면
// GET /search?q=tobi+ferret
req.query.q
// => "tobi ferret"query라는 객체의 q라고 하는 property인 req.query.q를 통해
/search?q=tobi+ferret에서의 q값을 얻을 수 있다.
app.get('/topic', function (req, res) {
res.send(req.query.id + ',' + req.query.name);
});위와 같이 코드를 작성하고
/topic?id=1&name=alwayswithsound를 url에 작성하면 화면에는 1과 alwayswithsound가 출력된다.
여기서 사용된 &는 and연산자와 비슷한 개념이라고 보면 된다. 값은 한 개가 아니라 여러 개일 수 있고, 이를 구분하기 위해서 &를 사용한다.
웹 애플리케이션에서 query문은 매우 중요하다.
또 다른 예제를 살펴보자.
app.get('/topic', function (req, res) {
var topics = [
'Javascript is ...',
'Nodejs is ...',
'Express is ...'
];
res.send(topics[req.query.id]);
});위 코드에서 변수 topics는 배열을 통해서 3개의 값을 갖고 있고, topics[req.query.id]를 작성함으로써 url을 통해 topics의 인덱스 값에 접근할 수 있다.
하지만 위의 코드를 사용하면 사용자가 일일이 url의 id값을 바꾸어서 접근해야한다.
그래서 우리는 링크를 만들어 줄 것이다.
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);
});동적인 애플리케이션의 기본골격을 갖고 있는 코드이다.
조금 투박하지만 기본 원리를 이해하는데에는 도움이 될 것 같다.
<전체코드>
var express = require('express');
var app = express();
app.locals.pretty = true;
app.set('view engine', 'pug');
app.set('views', './views');
app.use(express.static('public'));
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('/template', function (req, res) {
res.render('temp', {time: Date(), title: 'Pug'});
});
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('/test', function (req, res) {
res.send('Test, <img src="/test.png">')
});
app.get('/login', function (req, res) {
res.send('<h1>Login please</h1>');
});
app.listen(3000, function () {
console.log('Conneted 3000 port!');
});'javascript > node.js' 카테고리의 다른 글
| [Node.js] Express, POST 방식을 이용한 정보 전달 - FORM (0) | 2024.07.08 |
|---|---|
| [Node.js] Express, URL을 이용하여 시멘틱 URL 사용 (0) | 2024.07.08 |
| [Node.js] Express 템플릿 엔진 (Pug) (0) | 2024.07.08 |
| [Node.js] Express 동적 파일 제공 (0) | 2024.07.07 |
| [Node.js] Express 정적 파일 제공 (0) | 2024.07.07 |
