개발 도중에 JSON으로 된 Object 또는 일반 object에 특정 값이 변경 되었을 경우 비교하여 조건문을 걸고 싶은 경우
생각하지 못했던 결과를 얻게 되어서 정리를 해보겠습니다.

const k1 = {fruit: '🥝'};
const k2 = {fruit: '🥝'};

// Using JavaScript
JSON.stringify(k1) === JSON.stringify(k2); // true

// Using Lodash
_.isEqual(k1, k2); // true

- Deep Nested 비교
  조금더 복잡하고 중첩되어진 Object를 비교하여도 제대로된 결과를 얻을수 있습니다.

const one = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

const two = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

// Using JavaScript
JSON.stringify(one) === JSON.stringify(two); // true

// Using Lodash
_.isEqual(one, two); // true

 

-결론
 1. 간단하고 Object 깊이가 깊지 않은 경우는 JSON.stringify()함수를 쓰고
 2. 깊고 복잡한 비교를 했을경우는 Lodash 방식인 isEqual함수를 쓰는것이 좋은것 같다.

- 결론 보충내용
 JSON.stringify : string 비교를 하므로 Object 전체를 비교.
 Lodash : Object 전체 비교하지 않고 비교 중 다른 부분이 있으면 함수 종료

 부록 내용: ES6 방법으로 entries를 이용하여서 비교 할 수도 있음

const k1 = {fruit: '🥝'};
const k2 = {fruit: '🥝'};

Object.entries(k1).toString() === Object.entries(k2).toString();

 

참조 사이트: https://www.samanthaming.com/tidbits/33-how-to-compare-2-objects/

 

How to Compare 2 Objects in JavaScript 🎉 | SamanthaMing.com

Objects are reference types so you can't use === or == to compare them. To check if 2 objects have the same key value, use JSON.stringify OR Lodash isEqual function...

www.samanthaming.com

 

web worker란?
- 스크립트 작업이 오래 걸린다고 해서 페이지를 멈추고 기다릴 필요가 없어졌다. 웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공하기 때문에 웹 페이지를 가로막지 않고 스크립트를 돌릴 수 있게 되었다.

Web worker를 언제 사용해야 될까? 
- 매우 복잡한 수학적 계산 작업
- 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토리지를 액세스 하는 경우)
- 백그라운드에서 조용히 오랜시간 작업애햐 하는 경우
- UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등
- 현재 프로젝트에 트래픽 높은 네트워크 통신에 의해서 UI화면이 멈추는 증상이 있어서 알아보게 되었다.

Web worker VS React Virtual Dom

 web worker의 프레임이 더 좋은걸 확인할수 있다.

React에서 Test로 해볼수 있는 Web worker 예제 <출처:https://github.com/facebook/create-react-app/pull/3934>

// hello.worker.js

let helloInterval;

const sayHello = () => {
  self.postMessage({ message: 'Hello' });
};

self.addEventListener('message', event => {
  if (event.data.run === true) {
    self.postMessage({ status: 'Worker started' });
    helloInterval = setInterval(sayHello, 1000);
  }

  if (event.data.run === false) {
    self.postMessage({ status: 'Worker stopped' });
    clearInterval(helloInterval);
  }
});
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import HelloWorker from './hello.worker.js';

ReactDOM.render(<App />, document.getElementById('root'));

const helloWorker = new HelloWorker();
let messageCount = 0;

helloWorker.postMessage({ run: true });

helloWorker.onmessage = event => {
  if (event.data.status) {
    console.log('STATUS', event.data.status);
  }

  if (event.data.message) {
    messageCount += 1;
    console.log('MESSAGE', event.data.message);

    if (messageCount >= 5) {
      helloWorker.postMessage({ run: false });
    }
  }
}

 

참조한 사이트:

http://blog.nparashuram.com/search/label/react

 

Parashuram's blog

 

blog.nparashuram.com

https://kentcdodds.com/blog/speed-up-your-app-with-web-workers

 

Speed up your App with Web Workers

How to get started using web workers for practical use cases

kentcdodds.com

 

밑에 참조한 블로그 들이 정말 정리가 잘되어서 있어서 간단하게 정리하려고 한다.

Throttle : 쓰로틀링은 보통 성능 문제 때문에 많이 사용. 특성 자체가 실행 횟수에 제한
            실사용 예제) 인피니티 스크롤, 관련 검색어 추천 및 자동완성 등

Debounce: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
            실사용 예제) 리사이징(웹페이지) 등

참조 블로그:
https://webclub.tistory.com/607

 

디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점

Throttle, Debounce & Difference 스로틀(Throttle) 과 디바운스(Debounce) 란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(ev..

webclub.tistory.com

https://www.zcfy.cc/original/debouncing-and-throttling-explained-through-examples-css-tricks

 

Debouncing and Throttling Explained Through Examples | CSS-Tricks - 众成翻译

The following is a guest post by David Corbacho, a front end engineer in London. We've broached this topic before, but this time, David is going to drive the concepts home through interactive demos that make things very clear. Debounce and throttle are two

www.zcfy.cc

 

+ Recent posts