오징옆의 IT

ES6에서 $ 기호를 통해 변수를 쉽게 삽입할 수 있게 되었다.

예제를 통해 보자

let email = "abc@naver.com";

console.log("이메일은 " + email + "입니다"); //기존 따옴표 방법

console.log(`이메일은 ${email} 입니다`)  //new


console.log(`${5+10} 입니다`) //이런 것도 가능하다.

아주 편리하다.

오늘은 하이차트를 통해 실시간으로 그래프를 그려보고자 한다.

<div id="container"></div>

let chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      defaultSeriesType: 'spline',
    },
    title: {
      text: 'temper'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 200,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'temper',
        margin: 80
      }
    },
    series: [{
      name: 'test_11170',
      data: []
    }]
  });

일단 기본적으로 차트 컨테이너를 그린다.

mqtt 는 pahomqtt를 사용했다. mqtt에 대한 설정 및 사용은 본 글의 주제를 벗어나므로

다른글을 참고하거나, 기회가 된다면 추후 작성하겠다.

설정법을 몰라도 아래 코드를 보면 간단하게 이해가 될 것이라고 생각한다.

this.host = hostip.substring(7); 
this.wsport = 9001;
this.clientId = "mqttclient!!!"+generate();
------------------------------------------
let mqtt = new Paho.MQTT.Client(this.host, this.wsport, this.clientId)
let connectOptions = {
	onSuccess : function()
	{
         console.log("success");
	},
	useSSL: false,
	timeout: 3,
	mqttVersion: 4,
	onFailure: function(msg) 
	{
		console.log("fail");
	},
};
mqtt.connect(connectOptions);
mqtt.subscribe("topic/topic");
mqtt.onMessageArrived = function( message )
{			
	if(message.retained==true){
		return;
	}
	mqttMessage(message.payloadString);
}.bind(this);

function mqttMessage(value) {
    let point = {x:new Date(date).getTime(), y: value, marker: {enabled : false}};
    chart.series[0].addPoint(point, true, false);
}

topic/topic 이라는 토픽을 구독하고

mqtt로 메세지를 받을때마다 mqttMessage라는 함수를 호출하고 

mqtt로 받은 값을 하이차트의 addpoint기능을 통해 그래프를 그린다.

필자가 개발한 실 서비스의 경우 서버단의 기계설비의 측정 데이터 등이 mqtt로 오면

해당 데이터 값을 파싱하고 실시간으로 데이터를 그리고 있다.

기존 코드를 간략하게 나타낸거라 중간중간 오타나 뎁스, 문법등이 맞지 않는 부분이 있을지도 모르겠다.

컨셉과 방법에 대한 설명이니 너그럽게 넘어가자!

필자가 접한 react 튜토리얼을 보면

리액트의 프톤트에서 백엔드로 요청을 할때

중간에  proxy서버를 두고 요청한다.

"proxy": "http://localhost:7080",   //package.json

처음에는 단순히 리액트는 3000에 실행되어있고

서버의 경우 7080포트(필자의 백엔드 서버)에 실행되어있으니

CORS( cross-origin requests)를 방지하기 위함인줄 알고 개발을 진행했다. 

 cors는 웹개발시 무조건 만나는 기초 내용이니 검색해보자!

* 간단하게 추가 설명을 보태면 3000에서 실행된 리액트가 보낸 요청을 프록시 서버인 7080이 가로챈 뒤 백엔드서버인 7080으로 요청을 보내기 때문에 CORS가 발생하지 않는다.

허나 한가지 이유가 더있다.

axios.get('http://localhost:3001/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('http://localhost:3001/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
})

proxy 설정을 하지 않고 ajax를 요청하면 위와 같이 코딩이  될 것이다.

프론트에서 요청하는 부분이 한부분도 아니고 만약 주소가 바뀌거나 

서비스를 실제 디플로이한다면 고객사마다 주소가 다르고 포트가 다르고 등등의 상황이 생길 것이다.

그러면 react 프로젝트 내 모든 ajax 부분의 주소를 다 바꾸어야한다.

유지보수가 똥망이 된다.

axios.get('/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
 })

"proxy": "http://localhost:7080",   //package.json

이를 위와 같이 수정하고 package.json에 프록시를 추가한다.

처음 코드와 똑같이 작동할 것이다.

위와 같이 하면 proxy부분만 수정하면 된다.

where /R C:\ javac.exe

java 1.8을 사용할 경우, node js의 java (node-java)등

을 설치할때 아래와 같은 오류가 뜬다.

이는 파이썬에서 open 메소드를 실행할때 utf-8을 읽지 못하여 발생하는 에러라고 한다.

'cp949' codec can't decode byte 0xec in position 2443:

'ascii' codec can't decode byte 0xec in position 2443:

build_file_contents = open(build_file_path).read() #기존
build_file_contents = open(build_file_path, encoding='UTF-8').read() #수정후

해당 파일인 input.py 파일에 들어가서 open부분을 찾고 이와 같이 수정한다

해당 에러를 만나기전 설정을 참고한 사이트이다. 

visual studio build tools 설정도 필요하다.

https://www.programmersought.com/article/11036576386/

<div>
  <canvas id="canvas" style="border: 1px solid black;  "></canvas>
</div>​

// 기존 canvas 코드
let canvas = new new fabric.Canvas('canvas');
let ctx = canvas.getContext("2d");
ctx.translate(ctx.canvas.width, ctx.canvas.height);
ctx.rotate(180 * Math.PI / 180);

// fabric js 코드
let canvas = new new fabric.Canvas('canvas');
let canvasCenter = new fabric.Point(canvas.getWidth() / 2, canvas.getHeight() / 2) // center of canvas
let radians = fabric.util.degreesToRadians(180)
canvas.getObjects().forEach((obj) => {
    let objectOrigin = new fabric.Point(obj.left, obj.top)
    let new_loc = fabric.util.rotatePoint(objectOrigin, canvasCenter, radians)
    obj.top = new_loc.y
    obj.left = new_loc.x
    obj.angle += 180
    obj.setCoords()
});
canvas.renderAll()

Canvas로 작성된 기존 코드를 Fabric.js 라이브러리를 추가하여 업그레이드 한적이 있다.

기존에는 캔버스를 rotate한뒤 translate로 위치를 잡아주면 되는 코드다.

fabric js도 canvas 이기때문에 똑같이 먹힐거라 생각했지만, 이유는 모르겠고 잘 안되더라.

방법을 찾아보니 translate 과정을 top, left로 해결한 듯 하다.