node.js express | 템플릿 쪽지함#4. 쪽지 작성편(2)

지난 스토리에서는 쪽지를 직접 작성하면 보드판에 나열되는 부분에 대한 샘플과 함께
템플릿에서의 쪽지 작성에 대한 태그와 스크립트 부분을 설명드렸는데요.

https://itadventure.tistory.com/440

node.js express | 템플릿 쪽지함#3. 쪽지 작성편(1)

 

이렇게 서버로 전달된 쪽지를,
서버에서 쪽지배열 변수인 memo 에 추가하는 부분을 살펴보겠습니다.

서버에서 실행되는 main.js 에서  핵심이 되는 코드는 아래와 같습니다.

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

위 정의는 퍼블릭IP주소:8080/memoadd 라는 URL 을 구성하는데,
GET 방식이 아닌 POST 방식의 요청만 입력을 받는 부분입니다.

웹 브라우저에서 통신은 대부분 GET 방식과 POST 방식을 많이 사용하는데요.
보통 웹브라우저의 URL 창에 아래와 같이 전달할 파라미터를 직접 타이핑하는 방식을 GET 방식이라 하고,

URL?파라미터변수명=값&파라미터변수명=값&...

FORM 태그 또는 JQUERY AJAX 를 이용하여,
POST 라는 규칙명을 붙여서 전송하는 방식을 POST 방식이라고 합니다.
이번 템플릿에 사용된 방식은 JQUERY AJAX 를 이용한 POST 방식이지요.

템플릿 소스에 들어있는 아래 코드에서 type: 'post' 라고 적혀 있는 부분이 그 규칙을 정해줍니다.

$.ajax({  
  url: '/memoadd',
  type: 'post',
  dataType: 'json',
  data: { msg: msg },
  success: function(data){
    if(data.result=='ok')location.reload();
  },
  error: function(response){ console.log(response); }
});

이와 같이 할 경우 전송할 내용이 URL 창에 노출되지 않아 보안적으로 좀 더 안전하고,
전송할 내용이 매우 많은 경우에도 대개 POST 방식을 사용합니다.

이제 서버는 전송된 문구를 쪽지에 추가하는 절차를 진행할텐데요.
아래와 같이 구현된 URL 주소에서
req는 웹브라우저에서 전달된 내용을 담는 오브젝트가 전달되고
res는 웹브라우저에 전달할 내용을 제어하는 오브젝트가 전달됩니다.

 

app.post('/memoadd', function(req,res) {
     :
});

다만 POST방식 전송은 express 에서 기본적으로는 내용이 전달되지 않기 때문에,
main.js 서버를 구동할 때 사전에 무언가를 해주어야 하는데요.

아래 소스 부분이 바로 그것입니다.
아래 기능은 body-parser ( 보디파서 ) 라는 모듈을 정의하고 사용하는데요.
json 방식도 사용하겠다는 선언과 함께, 중첩된 객체 표현의 허용여부도 결정합니다.
이 부분은 설명이 길어지니 넘어가도록 하겠습니다 :)

const bodyParser = require('body-parser'); // npm install body-parser

      :

// json post 를 사용하려면 추가
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : true}));

웹브라우저에서 전달된 쪽지의 이름은 아래와 같이 사용할 수 있습니다.
req.body. 뒷 부분에 이어 전달되는 파라미터 이름을 사용하면 되는데요.
msg 라는 파라미터를 전달받았으니 아래와 같이 사용하면 됩니다.

req.body.msg

위 메시지를 쪽지를 추가하는 코드는 아래와 같은데요.

memo.push(new Array(
  getRandom(0,700), 
  getRandom(0,500), 
  getRandom(-20,20), 
  req.body.msg));

getRandom() 함수는 최소값과 최대값을 지정하여 그 범위 안에서 난수를 생성해주는 함수입니다.

getRandom(최소값, 최대값)

난수란 마치 주사위를 굴릴때 어떤 숫자가 나올지 모르는 것과 같이
예측할 수 없는 숫자를 무작위로 1개 뽑아내는 것과 같은데요.
사실 자바스크립트에는 getRandom() 함수라는게 없습니다.

main.js 내에는 아래 함수 코드가 정의되어 있는데요.
바로 이 정의가 getRandom() 함수를 새로 만들어낸 것입니다.
거의 공식같은거니 난수가 필요하실 때 아래 함수 정의해 사용하시면 편리합니다.

function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

이러한 난수를 총 3개를 생성합니다.

쪽지가 위치할 랜덤한 가로위치 ( 0 ~ 700 ),
쪽지가 위치할 랜덤한 세로위치 ( 0 ~ 500),
쪽지가 왼쪽이나 오른쪽으로 비틀어지는 회전값 ( -20도 ~ 20도 )

그리고 나서 그 위치에 쪽지를 생성하게 되는데요.
아래와 같이 끊어서 코드를 작성해도 되지만 ( 의미적으로는 더 쉽습니다 )

let x = getRandom(0,700); // 가로위치
let y = getRandom(0,500); // 세로위치
let r = getRandom(-20,20); /// 회전각

memo.push(new Array(x, y, r, req.body.msg));

이를 한번에 처리하도록 변경한 것이 바로 아래 코드입니다.
이럴 경우 x, y, r 등의 변수이름을 고민할 필요가 없어서 크레이는 이 방식을 사용하고 있습니다

memo.push(new Array(
  getRandom(0,700), 
  getRandom(0,500), 
  getRandom(-20,20), 
  req.body.msg));

쪽지가 추가될때마다 서버의 memo 배열 변수에는 쪽지가 새로 한줄씩 추가됩니다.
가로, 세로 위치에 해당하는 좌표와 회전각도까지 말입니다.

20	20	10	걱정하는게 걱정이야
230	80	-8	항상 방법은 있어
420	50	15	오늘보다 더 크고 멋지게!
420	210	12	올해엔 정말 멋지게 해보자구!!
350	238	7	새로 추가된 쪽지내용!

그리고 웹브라우저에 제대로 추가가 끝났다는 반환신호를 보내주는데요.
아래 코드가 바로 그것입니다.

res.json({result: 'ok'});

그래서 이후부터 퍼블릭IP:8080/memo 주소를 호출할 때는
추가된 분량만큼 쪽지를 더해서 많은 쪽지가 웹브라우저에 전달되어 보여지는 것이지요.

이렇게 해서 쪽지를 추가하는 부분을 다루어 보았는데요.
문제가 하나 있습니다.

지금 main.js 에 수정할 부분이 생겨서 main.js 를 수정하고 node 서비스를 다시 시작하면 어떤 일이 일어날까요?

node main.js

그동안 추가했던 쪽지가 다 날아가 버립니다.
달랑 4개만 나오겠지요.

memo 라는 배열변수는 휘발성이라서 이미 노드서버를 중지했을 때 서버 메모리에서 휘발되어 사라졌기 때문에,
이러한 방법으로는 쪽지를 영구보관할 방도가 없는 것입니다.

그렇다면 어떻게 해야 서버를 재시작하든 말든 관계 없이
쪽지를 영구보관, 최신 화면을 볼 수 있을까요?

그것으로는 데이터베이스를 이용하는 방법이 있는데요.
다음 스토리에서는 MYSQL 이라는 무료 데이터베이스를 이용, 쪽지를 보관하고 이를 불러오는 부분을 다뤄보도록 하겠습니다.

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

---

다음 스토리 : 템플릿쪽지함 #5. AWS 에 MYSQL 설치

https://itadventure.tistory.com/442

node.js express | 템플릿 쪽지함#5. AWS 에 MYSQL 설치