http://localhost:3000/topic?id=2 와 같은 url을 사용할 수도 있지만,
http://localhost:3000/topic/2 처럼 조금 더 깔끔한 url을 사용할 수도 있다.
이러한 방식의 url 체계를 'Semantic URL' 이라고 표현한다.
이를 한국어로 번역하면 'Semantic : 의미론적인, 즉, 조금 더 의미에 부합되는 url 체계'라고 한다.
우리는 이를 query 방식에서 path 방식으로 바꿔볼 것이다.
사실 query 방식이 더 중요하다.
최근에는 시멘틱 url도 많이 사용하기 때문에 알아둬서 나쁠 건 없다고 생각한다.
바로 http://localhost:3000/topic/1 에 접속하면
Cannot GET /topic/1 라는 오류가 뜰 것이다. 이는 /topic/1 이라는 router를 잡아내지 못하기 때문이다.
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><br>
${topics[req.query.id]}
`
res.send(output);
});우선 첫번째로 이와 같이 router를 직접 /topic:id으로 설정하면 id값이 어떠한 값이 와도 잡아줄 수 있게 된다.
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><br>
${topics[req.params.id]}
`
res.send(output);
});그리고 이와 같이 ${topics[req.params.id]}으로 작성하면 우리가 원하는 결과값을 얻을 수 있다.
우리가 query string으로의 접근을 하면 req.query라는 객체를 사용하면 되고 path 방식으로 들어오는, 시멘틱 url을 사용하는 경우에는 req.params라는 객체를 사용하면 된다.
${topics[req.params.id]}에 있는 id는
app.get('/topic/:id', function (req, res)의 id와 매칭된다.
${topics[req.params.name]}이라면
app.get('/topic:name', function (req, res)으로 바꿔줘야한다.
또 다른 예제를 살펴보자.
app.get('/topic/:id/:mode', function (req, res) {
res.send(req.params.id + ',' + req.params.mode)
});조금 더 응용된 코드이다.
mode는 마지막 / 뒤에 나오는 어떠한 정보를 의미한다.
예를 들면 http://localhost:3000/topic/1/edit 에서 edit을 의미한다는 것이다.
이를 실행하면 웹페이지에 1,edit이 출력되게 된다.
1은 req.params.id가 실행된 결과이고, edit은 req.params.mode가 실행된 결과이다.
<전체코드>
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/: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><br>
${topics[req.params.id]}
`
res.send(output);
});
app.get('/topic/:id/:mode', function (req, res) {
res.send(req.params.id + ',' + req.params.mode)
});
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 방식을 이용한 정보 전달 - POST (0) | 2024.07.08 |
|---|---|
| [Node.js] Express, POST 방식을 이용한 정보 전달 - FORM (0) | 2024.07.08 |
| [Node.js] Express, URL을 이용하여 query 객체 사용 (0) | 2024.07.08 |
| [Node.js] Express 템플릿 엔진 (Pug) (0) | 2024.07.08 |
| [Node.js] Express 동적 파일 제공 (0) | 2024.07.07 |
