JS 싱글톤, Atomics, 데드락, 크리티컬섹션, promise, async await

시작점 : 그래픽을 불러오는 지점에서 멀티스레드(thread : 프로세스 내 실행 단위)가 서로 충돌. 구조에 대해 고민 시작

 

 

JS에서 자주 쓰이는 패턴은 모듈 패턴 (모듈 : 비공개 변수를 가질 수 있는 즉시실행함수 IIFE 같은 것), 싱글톤 패턴, 생성자 패턴이 있습니다. 

 

 

JS 싱글톤

---

 

• 어플리케이션 시작 -> 모 클래스가 최초 한번만 메모리 할당 (static) -> 그 메모리에 인스턴스를 만들어 사용하는 패턴

• 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나. 이후 사용 시에도 같은 것을 호출 = > 단 하나의 인스턴스를 생성해 사용하는 디자인 패턴

• 사용 : 처음 네임스페이스를 만들 때 등

• 간혹 멀티쓰레드 환경에서 동기화처리를 안하면 인스턴스가 두 개 생성될 수 있습니다.

• 하나로 통제되어서 과정과 변수값의 원자성 모두 보장되지만 데드락 위험성

• 함수가 컨트롤

 

 

 

var obj = {
  a: 'hello',
  b: function() {
    alert(this.a);
  }
};

 

객체리터럴이 대표적인 싱글톤패턴의 예입니다.
다만 속성이 노출되어 있어 싱글톤 패턴은 아래와 같이 비공개로 많이 사용합니다.

 

var singleton = (function() {
  var instance;
  var a = 'hello';
  function initiate() {
    return {
      a: a,
      b: function() {
        alert(a);
      }
    };
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = initiate();
      }
      return instance;
    }
  }
})();
var first = singleton.getInstance();
var second = singleton.getInstance();
console.log(first === second); // true;

 

IIFE 즉시실행함수 안에 비공개변수 a를 만들고,
그 안에 instance 변수와 initiate 함수를 만듭니다.
initiate 함수 안의 내용이 실제 객체의 내용입니다.

getInstance 함수 호출 -> 내부 initiate 함수 호출-> instance에 객체 내용 저장, 반환
재호출되어 이미 instance가 있는 경우 그대로 반환

 

** 쉽게 설명을 잘 해 놓은 글 : blog.naver.com/mycho/221848960534

 

var Singleton = (function() {

  var Singleton = function() {

    this.type = "1";

  }

  var instance = null;

  var createInstance = function() {

    instance = new Singleton();

    return instance;

  }

  return {

    getInstance: function() {

      if (!instance) {

        instance = createInstance();

      }

      return instance;

    }

  };

})();


function Client() {}

Client.prototype.test = function() {

  var obj1 = Singleton.getInstance();

  var obj2 = Singleton.getInstance();

  if (obj1 === obj2) {

    console.log("obj1과 obj2는 같은 인스턴스다.");

  }
}
new Client().test();

// 출력결과
// obj1과 obj2는 같은 인스턴스다.

 

 

 

 

 

Atomics 객체

---

 

정적메소드로서 제공됩니다. 메모리가 공유되었을때, 멀티쓰레드는 메모리안에 같은 데이터들을 읽거나 쓸 수 있습니다. Atomic operations은 예측 가능한 값을 쓰고 읽으며 다음 작업이 시작되기 전에 작업이 완료되고, 작업이 중단되지 않도록 합니다.  지원 브라우저는 파이어폭스만 지원됩니다.

변수의 원자성은 보장하나 과정이 보장 되지 않으며 시스템이 변수를 컨트롤합니다.

 

 

 

데드락, Deadlock

---

서로 우위가 애매해서 기다리다 실행이 되지 않는 것. 서로 기다리는...

• 원인 : 운영체제 혹은 소프트웨어의 잘못된 자원 관리

• 의미 : 둘 이상의 프로세스가 함께 멈추어 버리는 현상. 데드락은 평소엔 별 문제가 없다가 가끔 쌩뚱맞게 일어나기 때문에 다중 쓰레드 프로그래밍의 주요 난점 중 하나

• 주요 패턴 : 다중 쓰레드 프로그래밍 환경에서의 ABA 문제, AB/BA 문제 등. 락(뮤텍스 같은 다중 프로세스 동기화 장치)을 저 순서대로 짜면 첫 락에 진입하자마자 쓰레드가 바뀌는 경우(Context-Switching) 다른 쓰레드가 자꾸 얻으려고 시도하는데 이미 락은 걸려 있고, 풀어주진 않고, 그래서 무한 대기하는 현상

• 해결 : 코드 순서를 조정하거나 처리 시간대를 다르게 바꾸어 동시에 일어나지 않게 하거나 락을 하나로 합칩니다. (이 경우

   CPU 활용도는 좀 떨어집니다.)

 

 

 

 

크리티컬섹션 (Critical Section)

---

• 운영체제가 지원하는 동기화 방법 중 하나로 공유 자원의 독점을 보장해주는 역할을 합니다.

• 임계 구역, 치명적 영역. 즉 보호되어야 할 영역을 뜻합니다.

• 한 프로세스 내의 스레드 사이에서만 동기화가 가능. 접근을 대기시킵니다.

자바스크립트에서 크리티컬섹션 락 구현의 유사한 예로는 글로벌 변수 flag 를 두고 갱신중에는 flag = false,
완료후엔 flag = true 사용을 해야할 때는 flag == true 의 조건을 두는 방식이 있습니다.

 

 

 

 

 

Promise

---

 Promise 객체는 비동기 작업의 완료/실패와 결과값을 나타냅니다. Promise를 사용하면 비동기메서드에서 동기 메서드처럼 값을 반환할 수 있습니다. JS에서 프로미스는 콜백 함수를 연결할 수 있는 이미 진행중인 프로세스를 나타앱니다. 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

시간차를 두고 실행하려면 인수 없는 화살표 함수  f = () => expression를 사용하고, f()를 사용해 평가합니다. 메서드의 종류는 아래와 같습니다.

 

• Promise.all()
• Promise.race()
• Promise.reject()
• Promise.resolve()

 

Promise의 프로토타입 메서드는 아래와 같습니다.

 

• Promise.prototype.catch()
• Promise.prototype.then()
• Promise.prototype.finally()

 

 

 

 

 

JS async와 await

---

자바스크립트의 비동기 처리 패턴. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. 일반적으로 await의 대상이 되는 비동기처리코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다. 

 

async function functionName(){
	await 비동기처리 메서드();
}

 

 

 

 

출처

---

싱글톤 :  jeong-pro.tistory.com/86

www.zerocho.com/category/JavaScript/post/57541bef7dfff917002c4e86

blog.naver.com/mycho/221848960534

아토믹 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Atomics

데드락 : namu.wiki/w/Deadlock

크리티컬 섹션 : genesis8.tistory.com/154

JS async와 await : joshua1988.github.io/web-development/javascript/js-async-await/