node.js 웹서버 프로젝트 실시간 데이터 dashboard 만들기 3(ejs & Ajax)

ejs?

 ejs란 Embedded JavaScript의 약자로 쉽게 말하자면 자바스크립트가 내장 되어 있는 html 파일을 의미한다 html 에서 코딩을 해본 사람들은 알겠지만 html 문서 자체에서도 javascript 문장은 <script></script>를 통해  삽입이 가능합니다. 그렇지만 내장되어 있다는 것과 분리가 되어 있다는 것은 다른 의미이다 

 ejs에서는 자바스크립트를 내장시킬 수 있는 두가지의 테그가 있습니다.  <%%> 테그가 가장기본이 되며 저 테크 사이에 원하는 자바스크립트 내용을 넣으면 된는데, 해당코드를 통해 정적은 문서에서 동적으로 처리를 해야하는 부분에 대한 편의성이 높아지고 서버에서 보낸 변수를 그대로 가져와서 사용할 수 있다는 것에서 유연한 코드 작성이 가능합니다.  JSP 에서 자바 테그를 삽입 할 수 있은 것과 같은 부분입니다. 확장자 명은 (.ejs)

 

이 코드는 회원가입 페이지에대한 소스코드중 일부다. 어래에 보이는 회원가입에 필요한 이름, 이메일, 비밀번호 등등을 입력받는 내용은 항상 같기 때문에 html 을 통해 정적으로 만드는데 아무런 제약사항이 없습니다. 그렇지만 회원가입 페이지라고 하면 회원가입이 정확이 되었을 때와 중복된 아이디가 이미 있을경우 등등 여러 사항을 고려해야하고 이로인해 페이지 자체에서 동적으로 처리 해야할 부분이 생기기 떄문에 이러한 작업에서는 ejs 파일로 변환후 내장 자바스크립트를 사용한다면 여러 정적페이지로 처리해야하는 부분을 동적으로 처리할 수 있게 변환이 필요합니다. 

 

var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var pool = require('../model/db_connect');

router.post('/register_ok',async function(req, res){
    con = await pool.getConnection();
    query = "insert into user values(?,?,?,?,false)";
    param = [req.body.userName,req.body.userEmail,req.body.userPass,req.body.userPhone];
    try{
        result = await con.query(query,param);
    }catch(e){
        res.send({"join_result":0});
        console.log('가입실패');
        console.log(e.message);
    }finally{
        con.release();
    };
    
    console.log('가입완료');
    res.send({"join_result":1});
})

module.exports = router;

 

위코드는 회원가입을 위해 database user table에 입력된 회원 정보를 삽입하고 만약 pk 값이 중복이 된다거다 형에 맞지않는 데이터를 입력했을 떄 받는 오류를 try catch  문을 통해 가입 실패로 예외처리를 해준다음 가입이 성공했을때는 join_result에 1을 보내고 실패를 하였을 경우 join_result에 0을 보내게 됩니다. 회원갑입이 성공했을 경우와 실패하였을 경우에는 ejs 파일에서 나타내야하는 내용이 다르기 때문에 위와 같이 join_result 결과 값에 따라 간단하게 이를 처리 할 수 있게 됩니다 

Ajax

 Ajax란 자바스크립트 라이브러리중에 하나이며 Asynchronous javascript and xml(비동기식 자바스크립트 xml) 의 약자입니다. Ajax를 한마디로 정의한다면  브라우저가 가지고 있는 XMLHttpRequest의 객체를 이용하여 전체 페이지를 새로 고치치 않고도 페이지의 일분만을 위한 데이터를 로드하는 기법입니다.  흔히 요즘 web개발의 대세로 자리잡은 SPA의 핵심 기술이며 ajax를 통한 유연한 개발은 웹개발자라면 정말 중요합니다.

 

Ajax의 장점

 ajax의 장점으로는 크게 4가지 정도를 들 수 있습니다.

 1. 웹페이지의 속도 향상 

 2. 서버의 처리가 완료 될 때까지 기다리지 않고 처리가 가능한 효용성

 3. 서버에서 data만 전송하면 되기 때문에 불필요한 코딩을 없에는 효과 

 4. 기존에 웹에서는 불가능 했던 다양한 UI를 지원

 

Ajax를 활용하여 실시간 데이터 불러오기 

 해당 프로젝트에서는 데이터를 실시간으로 센서 데이터를 받아 데이터 그 데이터의 내용을 웹 화면상에 ajax를 통해 실시간으로 새로고침 없이 데이터를 뿌려줄 수 있습니다.

 

     var ajax_f = function () {
        url = "/RealTime_data";
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url);
        xhr.setRequestHeader('Content-type', "application/json");
        xhr.send();
        xhr.addEventListener('load', function () {
            data = xhr.responseText;
            data = JSON.parse(data);
            // console.log(result.Values[0].Value)
            document.getElementById("temp").innerHTML = data.Values[1].Value;
            document.getElementById("humidity").innerHTML = data.Values[2].Value;
            document.getElementById("dust").innerHTML = data.Values[3].Value;
            document.getElementById("dust2").innerHTML = data.Values[4].Value;
            document.getElementById("co").innerHTML = data.Values[5].Value;
            document.getElementById("co2").innerHTML = data.Values[6].Value;
        });
    }

해당 코드는 express 모듈로 라우팅한 realtime_data 부분에서 실시간으로 데이터를  json 파일의 형태를 이를 받게되는데, 받은 내용은 웹페이지 내에서 document.getElementById 를 통해 id를 매핑하고 매핑된 id 테그 내  해당  데이터를 주입하게 됩니다. 

작업을 끝낸다면 실기간으로 센서데이터를 화면에 뿌려주는 위와 같은 화면을 구상할 수 있다습니다.