지난 글에서는...
ejs의 활용법에 대해 알아보았다. 어떻게 html 파일 내에 자바스크립트를 내장시키는 지 알아보았고 <% %> <%= %>등의 태그, 규칙에 대해서도 알아보았다. 이번 글에서는 동적 페이지를 생성하는 법에 대해 알아보겠다.
[4][0] 동적페이지란?
동적페이지라 함은, 정적으로 저장되어있는 정보만이 아닌, 사용자와 서버의 상호작용 통해 그때그때 가공된 페이지를 말한다. 예를 들면, yahohococo.tistory.com은 항상 고정되어 있는 코딩노예블로그의 홈 화면을 보여주지만, 그 뒤에 숫자를 붙이거나 다른 키워드를 붙여 페이지 내의 원하는 글이나 관리자 모드의 페이지를 넘겨받을 수 있다. http://yahohococo.tistory.com/43처럼 말이다. 사용자가 원하는 내용을 직접 뒤에 붙여, 원하는 페이지를 불러내는 것이다. 그렇다면 node.js와 express, ejs를 활용해 동적페이지를 어떻게 만들 수 있을까?
[4][1] 한 번 만들어봅시다
동적페이지의 핵심은 도메인 뒤에 붙는 숫자나 키워드로 페이지를 그 때 그 때 다르게 부르는 것이다. 때로는 같은 형태의 페이지에서 다른 내용을 불러올 수도 있고, 아예 다른 형태의 페이지를 불러올 수도 있다. 우리는 이전에 만들었던 /hello 디렉토리 뒤에 반복 횟수를 붙여 동적으로 hello를 해보는 페이지를 만들어볼 것이다. '/hello/:num'이라는 형식으로 주소창에 입력한 파라미터 값을 페이지로 넘겨줘 동적으로 페이지 생성하는 데 도움을 줄 수 있다.
app.js
const express = require("express");
const ejs = require("ejs");
const bodyParser = require('body-parser'); // body-parser 요청
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: false})); // urlencoded
app.use(bodyParser.json()); // json 타입으로 파싱하게 설정
app.use(express.static(__dirname + '/'));
app.get("/", function(req, res){
res.render("test1", {});
});
app.get("/hello/:num", function(req, res){ // 동적 페이지 부분
res.render("test2", {num : req.params.num }); // 페이지로 파라미터 값 넘겨줌
});
app.post("/postTest", function(req, res){ // postTest라는 주소로 POST요청이 들어오면 실행
console.log(req.body); // body에 있는 정보를 콘솔창에 출력.
res.json({ok:true, name:req.body.name}); // 클라이언트에 성공했다고 신호를 보냄.
});
app.listen(3000, function(){
console.log("실행중...");
});test2.ejs
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<% for (var i = 0; i < num; i++) { %>
<h1>HELLO~!</h1>
<% } %>
</body>
</html>
파라미터 값들의 집합은 req.params에 존재한다. 거기에 파라미터 변수명으로 그대로 저장되어 있으니 그대로 가져다 쓰면 된다. 번거로워도 페이지 렌더 함수에 넘겨줘야 ejs 안에서 사용이 가능하다.
아주 간단해 보이지만 매우 활용할 곳이 많은 기능이다. 왜 굳이 저렇게 파라미터 값을 app.js 안에서 설정해 주느냐? 주소창 안에서 '?num=5' 이렇게 설정해도 되지않느냐? 할 수도 있다. 하지만 그냥 주소창에다 바로 값을 적는게 깔끔한 URL을 보여줄 수 있다. 사용자에게나 개발자에게나 더 좋은 쪽으로 흘러가는 구조이기 때문이다.
이번 글에서는 간단히 URL을 이용한 동적 페이지 생성에 대해 알아보았다. 다음 글에서는 이번 글의 심화 버전으로 동적페이지를 다루는 법에 대해 알아보겠다.
'node.js' 카테고리의 다른 글
| [node.js][3] ejs 사용설명서 (8) | 2019.02.21 |
|---|---|
| [node.js][2] GET과 POST 써보기 (3) | 2019.01.17 |
| [node.js][1] express로 페이지 올려보기 (0) | 2019.01.11 |
