본문 바로가기
코딩과 알고리즘

node.js express | 템플릿 쪽지함#1. 구경

반응형

지난 시간에는 템플릿의 사용에 대해서 알아보았습니다.

https://itadventure.tistory.com/437

 

node.js express | 템플릿(ejs)

지난 스토리에서는 Node.js 에서 동적웹페이지를 만드는 기초 부분에 대해 알아보았는데요. 사실 이 방법은 Node.js의 편의성을 충분히 발휘한 방법은 아닙니다. Node.js 에는 템플릿이라는 멋진 기능

itadventure.tistory.com

 

이번 시간부터는 템플릿을 이용한 쪽지함이란걸 만들어 볼텐데요.
내용이 좀 되기 때문에 다회차에 걸쳐 진행될 예정입니다.
구구절절 설명보다는 바로 이미지를 보시는 편이 나을듯 하네요.

바로 이런 겁니다.
보드판에 쪽지들이 중구난방으로 나열되어 있고,
+ 버튼을 눌러 쪽지를 추가하면 랜덤한 위치에 쪽지가 추가되는 것이지요.
최대한 잔 기술 없이 단순히 기능만 구현해보았습니다.

화면에 보이는 쪽지는 각각 아래와 같은 속성을 가집니다.

- 보드 위에 놓일 쪽지의 X좌표
- 보드 위에 놓일 쪽지의 Y좌표
- 쪽지 회전 : 좌우로 얼마만큼 비뚤어서 놓을 것인지
- 쪽지내용


사실 이런 기능을 위해서는 데이터베이스라는게 동원되어야 하나,
처음에는 서버 메모리에서만 작동하는 방식으로 진행해 보겠습니다.

이번에 진행할 내용은 /home/nodejs5 폴더에 시작해볼까요?
폴더 생성. 권한 변경 후 해당 폴더로 이동해 줍니다.

sudo mkdir /home/nodejs5
sudo chown ec2-user:ec2-user /home/nodejs5
cd /home/nodejs5


그리고 npm 초기화 및 모듈을 설치해줍니다. ejs 모듈은 템플릿을 사용하기 위해 필요한 것이라 말씀드린바 있지요.

npm init -y
npm install express
npm install ejs

이어서 main.js 소스를 작성합니다.

const express=require('express');
const ejs=require("ejs");
const app=express();

// 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'));

// 라우팅 처리
app.get('/memo', function(req,res) {
	res.render('memo', {
		memo: memo
	});
});

// 페이지를 찾을 수 없음 오류 처리
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() {});


view 폴더를 생성한 다음에

sudo mkdir views
sudo chown ec2-user:ec2-user views

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">
  <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>
	<% } %>
  </body>
</html>


이제 노드 서버를 작동하고,

node main.js


웹브라우저에서 퍼블릭IP:8080/memo 웹페이에 접속해 보세요.
그러면 아래와 같은 웹페이지가 등장할 것입니다.

기본으로 넣어놓은 쪽지 4개가 등장한 것인데요.
딱 틀에 박혀 있는 게시판은 식상하실듯 해서
좀 자유로운 컨텐츠를 구상해보았습니다.


지난 스토리에서 추가된 부분을 살펴보겠습니다.

서버는 쪽지 내용을 보관하고 있는데요.
main.js 소스에서 쪽지가 들어 있는 변수는 memo 입니다.

처음에는 아무것도 들어있지 안은 빈 배열로 초기화하는데요. 

let memo=Array();

let 은 var 과 동일한 변수 선언문입니다만, 오류를 방지하는 기능이 추가되었습니다.
그래서 let 을 사용하면 오류 방지 효과가 있는 것이지요.

기본으로 메모장에 4개의 쪽지를 넣어 놓습니다.

// 메모장 데이터 기본 입력
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, "올해엔 정말 멋지게 해보자구!!"));

여기서 아래 내용 또한 4개의 요소가 들어 있는 배열인데요.

new Array(20, 20, 10, "걱정하는게 걱정이야")

이 경우 배열 안에 또 배열을 추가하기 때문에 결국은 2차원 배열이 되는 셈입니다.

그래서 4줄의 코드가 실행되면 memo 변수에는 아래와 같은 표 형태의 자료가 입력됩니다.
앞에서부터 X좌표, Y좌표, 회전값, 쪽지내용인 셈이지요.

20 20 10 걱정하는게 걱정이야
230 80 -8 항상 방법은 있어
420 50 15 오늘보다 더 크고 멋지게!
420 210 12 올해엔 정말 멋지게 해보자구!!


그리고 서버의 콘솔 화면에 가볍게 memo 내용을 찍어줍니다.

console.log(memo);


웹브라우저에서 퍼블릭IP:8080/memo 라는 URL을 호출하면 아래 코드가 실행이 되는데요.
memo 라는 변수를 memo 템플릿 문서에 전달해 줍니다.

// 라우팅 처리
app.get('/memo', function(req,res) {
	res.render('memo', {
		memo: memo
	});
});


memo 템플릿 문서에서는 memo 변수를 받아서 화면에 표시해줄텐데요.
memo 변수는 2차원 배열이기 때문에 지난번에 보셨던 내용과는 다른 방법이 적용되어야 합니다.
과연 어떻게 적용되는 것일까요?

소스를 보시고 한번 유추해 보세요 :)
다음 스토리에 이어서 진행하도록 하겠습니다.

구독과 좋아요는 ?
입니다 :)

오늘도 여기까지 읽어주셔서 감사합니다.


다음 스토리 : 템플릿 쪽지함 #2. 배열의 템플릿 전달

https://itadventure.tistory.com/439

 

node.js express | 템플릿 쪽지함#2. 배열의 템플릿 전달

이번 스토리에서는 지난 스토리에 이어서 배열 변수를 템플릿에 전달하여 출력하는 부분에 대해 설명드리도록 하겠습니다. https://itadventure.tistory.com/438 node.js express | 템플릿 쪽지함#1. 구경 지난.

itadventure.tistory.com

 

반응형