뭐니뭐니해도 웹사이트의 사용자 방문율을 높이려면 웹사이트를 사용하는 사용자와
"소통"할 수 있는 수단이 있어야 할텐데요.
지난 스토리에 이어 사용자가 쪽지를 작성하는 부분에 대해 살펴보겠습니다.
https://itadventure.tistory.com/439
node.js express | 템플릿 쪽지함#2. 배열의 템플릿 전달
이번 스토리에서는 지난 스토리에 이어서 배열 변수를 템플릿에 전달하여 출력하는 부분에 대해 설명드리도록 하겠습니다. https://itadventure.tistory.com/438 node.js express | 템플릿 쪽지함#1. 구경 지난.
itadventure.tistory.com
main.js 에서 쪽지를 추가하는 코드는 아래와 같은데요.
memo.push(new Array(420, 210, 12, "올해엔 정말 멋지게 해보자구!!"));
이러한 코드를 main.js 를 시작할 때뿐만이 아니라
사용자가 새로운 쪽지를 입력하는 순간에 실행되도록 해주면 됩니다.
그러기 위해 사용자가 쪽지를 입력할 수 있는 수단을 마련하고 이를 서버에서 처리해주어야 하는데요.
템플릿 소스 views/memo.ejs 파일을 열어 아래와 같이 수정해 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>메모장</title>
</head>
<style>
.memolayer {
background-color:#eff;
float:left;
border-top:1px solid green;
border-left:1px solid green;
border-bottom:2px solid green;
border-right:2px solid green;
padding:3px;
margin:5px;
width:100px;
height:100px;
font-family: 'Nanum Pen Script', cursive;
font-size:16pt;
color:green;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function input_memo(){
var msg=prompt("명언을 입력해 보세요", "");
if(msg!='' && msg!=undefined){
$.ajax({
url: '/memoadd',
type: 'post',
dataType: 'json',
data: { msg: msg },
success: function(data){
console.log(data);
if(data.result=='ok')location.reload();
},
error: function(response){
console.log(response);
}
});
}
}
</script>
<body>
<h1>크레이의 쪽지쉼터</h1>
<hr/>
<% for (var i = 0; i <=memo.length-1; i++ ) { %>
<div class='memolayer' style="position:absolute;left:<%= memo[i][0] %>px;top:<%= memo[i][1] + 75 %>px;transform: rotate( <%= memo[i][2] %>deg )">
<%= memo[i][3] %><br/>
</div>
<% } %>
<div class='memolayer' style="position:absolute;top:0px; left:740px; width:60px; height:60px;">
<input type=button value="+" style="width:60px;height:60px;font-size:30pt;" onclick="input_memo()">
</div>
</body>
</html>
그리고 main.js 는 아래와 같이 수정해 줍니다.
const express=require('express');
const bodyParser = require('body-parser'); // npm install body-parser
const ejs=require("ejs");
const app=express();
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
// node.js 가 실행중인 동안 잠깐 가지고 있는 메모장
let memo=Array();
// 메모장 데이터 기본 입력
memo.push(new Array(20, 20, 10, "걱정하는게 걱정이야"));
memo.push(new Array(230, 80, -8, "항상 방법은 있어"));
memo.push(new Array(420, 50, 15, "오늘보다 더 크고 멋지게!"));
memo.push(new Array(420, 210, 12, "올해엔 정말 멋지게 해보자구!!"));
console.log(memo);
app.set('view engine', 'ejs');
app.set('views', './views');
// public 폴더하위의 파일들을 기본으로 서비스
app.use(express.static('public'));
// json post 를 사용하려면 추가
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));
// 라우팅 처리
app.get('/memo', function(req,res) {
res.render('memo', {
memo: memo
});
});
app.post('/memoadd', function(req,res) {
memo.push(new Array(
getRandom(0,700),
getRandom(0,500),
getRandom(-20,20),
req.body.msg));
res.json({result: 'ok'});
});
// 페이지를 찾을 수 없음 오류 처리
app.use(function(req, res, next) {
res.status(404);
res.send(
'<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">' +
'<html><head><title>404 페이지 오류</title></head>' +
'<body><h1>찾을 수 없습니다</h1>' +
'<p>요청하신 URL ' + req.url + ' 을 이 서버에서 찾을 수 없습니다..</p><hr>' +
'</body></html>'
);
});
app.listen(8080, function() {});
이어서 서버에서 body-parser 라는 모듈을 하나 설치해주어야 합니다
아래 명령으로 설치해 주세요.
npm install body-parser
그리고 node 로 main.js를 다시 실행한 다음,
node main.js
웹브라우저에서 퍼블릭IP:8080/memo 페이지에 접속합니다.
그러면 화면 우측에 더하기 버튼이 생겨났을 겁니다.
이 버튼을 클릭하면 쪽지 내용을 입력할 수 있는 프롬프트창이 표시될텐데요.
쪽지 내용을 입력하고 확인 버튼을 누르면, 바로 화면에 쪽지가 추가됩니다.
이런 방식으로 어마 무시한 쪽지를 추가할 수도 있지요.
마음 껏 테스트해보시되 많은 내용을 입력하는데 너무 고생하지는 마세요.
이 쪽지 버전은 영구보관되는게 아니라서 곧 사라질 겁니다. :)
추가된 소스 부분에 대해 잠깐 설명드리자면,
템플릿 memo.ejs 소스에서는 화면 우측 상단의 더하기 버튼에 해당하는 부분과,
<div class='memolayer' style="position:absolute;top:0px; left:740px; width:60px; height:60px;">
<input type=button value="+" style="width:60px;height:60px;font-size:30pt;" onclick="input_memo()">
</div>
이 버튼을 클릭할 때 실행되는 input_memo() 함수에서 쪽지 내용을 입력하여
Ajax 라는 기술을 이용, 서버로 쪽지 내용을 전송하는 부분이 추가되었습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function input_memo(){
var msg=prompt("명언을 입력해 보세요", "");
if(msg!='' && msg!=undefined){
$.ajax({
url: '/memoadd',
type: 'post',
dataType: 'json',
data: { msg: msg },
success: function(data){
console.log(data);
if(data.result=='ok')location.reload();
},
error: function(response){ console.log(response); }
});
}
}
</script>
버튼을 클릭하면 실행되는 input_memo() 함수에 대해 설명드리자면,
Ajax 라는 기술을 편리하게 사용하기 위해 아래 한줄을 기술하고 있는데요.
이 코드 한줄만 있으면 jQuery 3.6.0 버전을 바로 사용할 수 있습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
input_memo 함수 내에서는 먼저 프롬프트를 통해 문구를 입력받은 다음에,
<script>
function input_memo(){
var msg=prompt("명언을 입력해 보세요", "");
:
}
</script>
정상적으로 메시지가 입력된 경우만 처리를 수행하는데요.
공백을 입력하거나 X 버튼으로 팝업창을 닫을 경우를 고려한 것입니다.
if(msg!='' && msg!=undefined){
:
}
입력된 메시지를 jQuery 의 Ajax 통신기술을 이용하여 서버에 POST 로 전송합니다.
이 기술의 장점은 서버로 POST 데이터 전송을 위해 별도의 <form> 태그같은걸 만들 필요가 없다는 것이지요
$.ajax({
url: '/memoadd',
type: 'post',
dataType: 'json',
data: { msg: msg },
success: function(data){
console.log(data);
if(data.result=='ok')location.reload();
},
error: function(response){ console.log(response); }
});
Ajax 함수는 콜백(Callback) 으로 실행됩니다.
서버에서 응답이 언제 올지 모르기 때문에 그동안 한정없이 기다리다가는
웹브라우저가 먹통이 되어 버립니다. 그걸 방지하기 위한 것이 바로 콜백인데요.
통신이 성공한 경우 success 쪽에 정의된 함수가 실행되고,
success: function(data){
console.log(data);
if(data.result=='ok')location.reload();
},
통신이 실패한 경우 error 쪽에 정의된 함수가 실행됩니다.
error: function(response){ console.log(response); }
먼저 통신에 성공한 경우 콘솔창에 결과를 표시해주고,
console.log(data);
결과값이 "ok" 라면 화면을 단순히 새로 고침합니다.
서버에 쪽지가 추가되었다면 이제 새로운 쪽지 내용도 함께 화면에 표시되겠지요.
if(data.result=='ok')location.reload();
참고로 콘솔창이란 웹브라우저에서 F12 키를 누르면 "개발자도구"라는 창이 표시될텐데요.
여기서 Console 탭이라 표시된 부분을 말합니다. 개발할 때 이 창을 참조하면 매우 도움이 되지요.
위 소스에서 통신에 실패한 경우는 그냥 콘솔창에 결과만 찍어주도록 되어 있습니다.
템플릿에서는 이것으로 서버에 입력된 문구를 보내주는 역활을 담당하는데요.
이제 서버에서는 메시지를 받아 쪽지에 추가 처리하게 됩니다.
이부분은 node로 실행되는 man.js 에서 처리가 되지요
시간 관계상 관련 설명은 다음 스토리로 미루어 두도록 하겠습니다.
기능은 이미 만들어져 있으니 소스를 보시고 한번 기능을 유추해 보셔도 좋을 것 같습니다.
오늘도 여기까지 읽어주신 모든 분들께 감사드립니다 :)
다음 스토리 : 템플릿 쪽지함4. 쪽지작성편(2)
https://itadventure.tistory.com/441
node.js express | 템플릿 쪽지함#4. 쪽지 작성편(2)
지난 스토리에서는 쪽지를 직접 작성하면 보드판에 나열되는 부분에 대한 샘플과 함께 템플릿에서의 쪽지 작성에 대한 태그와 스크립트 부분을 설명드렸는데요. https://itadventure.tistory.com/440 node.
itadventure.tistory.com
'코딩과 알고리즘' 카테고리의 다른 글
| node.js express | 템플릿 쪽지함#5. AWS 에 MYSQL 설치 (0) | 2021.09.06 |
|---|---|
| node.js express | 템플릿 쪽지함#4. 쪽지 작성편(2) (0) | 2021.09.04 |
| node.js express | 템플릿 쪽지함#2. 배열의 템플릿 전달 (2) | 2021.08.29 |
| node.js express | 템플릿 쪽지함#1. 구경 (0) | 2021.08.25 |
| node.js express | 템플릿(ejs) (0) | 2021.08.22 |
