오징옆의 IT

JS 배열 및 객체에서 일반적인 깊은 복사 얕은 복사 개념에 대해서는 넘어가고, 

nested된 객체 및 배열에 대해 얘기한다.

nested는 "중첩된"이라는 뜻인데,

일반적으로 많이 사용하는 깊은 복사 방법인 스프레드 연산 (...) 를 통해 객체를 복사하면 깊은 복사가 되긴한다.

단, 객체 안 객체, 배열 안 배열은 깊은 복사 되지 않는다.

// 깊은 복사
let obj = {a:'a'}
let deepCopy = {...obj}

// nested object
let obj = {a:'a', nested:{b:'b'}}
let deepCopy = {...obj}
let deepCopy2 = {...obj}


deepCopy.nested.b = 'B';
deepCopy2.nested.b = 'C';

console.log(deepCopy.nested.b) // 'C' 
console.log(deepCopy2.nested.b) // 'C'

외부 라이브러리 없이 해결 방법으로는 

let deepCopy = JSON.parse(JSON.stringify(obj));

이 있다.

lodash 같은 라이브러리를 활용하면

import cloneDeep from 'lodash/cloneDeep';

let deepCopy = cloneDeep(obj)

도 가능하다.

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로 오면

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

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

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

<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로 해결한 듯 하다.

json에서 키값으로 접근하여 remove하고 싶을때가 생긴다.

왜 난 delete 문법을 모르고 지금까지

for문을 돌며 key값 뽑아내고 key값으로 다시 접근해서 remove하고 있던걸까...

단, 배열에서는 delete를 해도 해당 인덱스의 값이 empty로 되지만 배열의 길이는 그대로 3이다.

let json = {
    "key1" : "value1",
    "key2" : "value2",
    "key3" : "value3"
}


delete json["key1"];

console.log(json);
// {key2: "value2", key3: "value3"}
console.log(Object.keys(json).length);
// 2

//단, 배열에서는
let arr = [0,1,2]
delete arr[0]; 
console.log(arr) 
// [1,2]
console.log(arr.length) 
// 3

javascript의 경우 ===와 ==라는 연산자가 존재한다. 

==는 Equal Operator이고,  ===는 Strict Equal Operator이다. 

기본

1004 == '1004'   // true를 리턴
1004 === '1004'  // false를 리턴

객체

var a = [1,2,3];   
var b = [1,2,3];   
a == b // false를 리턴
a === b // false를 리턴

배열(객체)의 경우 메모리 주소가 다르기 때문에 두경우 모두 false를 리턴한다.

(두 배열이 같은지 비교하기 위해서는 루프를 돌려 배열의 값이 같은지 확인하면 되려나?)

javascript에서는 type을 변수 생성시 type을 설정하지 않지만 (typescipt를 사용하는게 아니라면) 

=== 와 ==는 type까지 확인하는 엄격함의 차이라고 생각하면 될 듯 하다.