자바스크립트 동시성과 데이터 패턴 인식

10 Nov 2023

javascript

동시성 개요

동시성은 프로그램에서 여러 작업이 동시에 실행되는 것을 의미합니다. 자바스크립트는 단일 스레드로 동작하지만, 동시성을 구현하기 위해 비동기 패턴과 데이터 패턴을 사용할 수 있습니다.

비동기 패턴

콜백 함수

콜백 함수는 비동기 작업이 완료되었을 때 실행되는 함수입니다. 예를 들어, 파일을 읽을 때 콜백 함수를 사용하여 파일의 내용을 처리할 수 있습니다.

function readFile(callback) {
  // 파일을 읽는 비동기 작업
  // 작업이 완료되었을 때 콜백 함수 실행
  callback(fileContents);
}

function processFile(contents) {
  // 파일 내용을 처리하는 작업
}

readFile(processFile);

프로미스

프로미스는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 완료되면 프로미스가 이행되고, 실패하면 거부됩니다. 프로미스를 사용하면 콜백 지옥을 피할 수 있습니다.

function readFile() {
  return new Promise((resolve, reject) => {
    // 파일을 읽는 비동기 작업
    if (success) {
      resolve(fileContents); // 작업이 완료되면 프로미스 이행
    } else {
      reject(error); // 작업이 실패하면 프로미스 거부
    }
  });
}

readFile()
  .then((contents) => {
    // 파일 내용을 처리하는 작업
  })
  .catch((error) => {
    // 에러 처리
  });

비동기 함수

비동기 함수는 async 키워드로 정의되며, 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 비동기 함수는 프로미스를 반환하므로 비동기 패턴과 함께 사용될 수 있습니다.

async function readFile() {
  // 파일을 읽는 비동기 작업
  return fileContents;
}

async function processFile() {
  try {
    const contents = await readFile(); // 비동기 작업 완료 대기
    // 파일 내용을 처리하는 작업
  } catch (error) {
    // 에러 처리
  }
}

processFile();

데이터 패턴

싱글톤 패턴

싱글톤 패턴은 어플리케이션이 단 하나의 인스턴스만을 가지도록 하는 패턴입니다. 이를 통해 어플리케이션 전체에서 공유되는 데이터 상태를 관리할 수 있습니다.

class Singleton {
  static instance;

  static getInstance() {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  constructor() {
    this.data = [];
  }

  addData(item) {
    this.data.push(item);
  }

  getData() {
    return this.data;
  }
}

const singletonInstance1 = Singleton.getInstance();
singletonInstance1.addData("Data 1");

const singletonInstance2 = Singleton.getInstance();
singletonInstance2.addData("Data 2");

console.log(singletonInstance1.getData()); // ["Data 1", "Data 2"]
console.log(singletonInstance2.getData()); // ["Data 1", "Data 2"]

옵서버 패턴

옵서버 패턴은 객체 사이의 일대다 의존성을 정의하는 패턴입니다. 한 객체의 상태가 변경되면, 그와 관련된 다른 객체들도 알림을 받고 변경된 상태에 따른 처리를 수행합니다.

class Subject {
  observers = [];

  attach(observer) {
    this.observers.push(observer);
  }

  detach(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notify() {
    this.observers.forEach((ob) => ob.update());
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update() {
    console.log(`${this.name} received an update.`);
  }
}

const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.attach(observer1);
subject.attach(observer2);

subject.notify(); // Observer 1 received an update. Observer 2 received an update.

마무리

자바스크립트에서 동시성과 데이터 패턴을 이해하는 것은 비동기 작업 및 데이터 관리에 있어서 매우 중요합니다. 적절하게 이러한 패턴을 활용하면 프로그램의 성능을 향상시키고 유지보수성을 높일 수 있습니다. 자세한 내용은 관련 문서를 참조하시기 바랍니다.

목차