웹 애플리케이션을 개발하다 보면 코드를 구조화하고 유지보수하기 쉽게 만들기 위해 다양한 디자인 패턴을 활용할 수 있습니다. 이 중에서 실행 컨텍스트를 활용한 디자인 패턴은 코드의 실행 프로세스를 관리하고 조정하기 위한 효과적인 방법을 제공합니다. 이번 글에서는 실행 컨텍스트를 활용한 디자인 패턴에 대해 알아보겠습니다.
실행 컨텍스트란 무엇인가?
먼저, 실행 컨텍스트에 대해 간단히 알아보겠습니다. 실행 컨텍스트는 JavaScript 코드가 실행될 때 생성되는 개별적인 환경을 의미합니다. 각 실행 컨텍스트는 유효 범위, 변수, 함수, this 등의 정보를 담고 있으며, 코드 실행에 필요한 여러 가지 정보를 제공합니다.
실행 컨텍스트를 활용한 디자인 패턴
1. 모듈 패턴
모듈 패턴은 코드를 모듈화하여 개별적인 실행 컨텍스트를 만들어 관리하는 패턴입니다. 실행 컨텍스트를 활용하여 모듈 간의 상태 및 동작을 캡슐화하고 격리시킴으로써 코드를 구조화하고 재사용성을 높일 수 있습니다.
const module = (function() {
// private 변수 및 함수 정의
let privateVar = 10;
function privateFunction() {
// ...
}
// public한 메서드 및 변수 반환
return {
publicVar: 20,
publicFunction: function() {
// ...
}
};
})();
2. 싱글톤 패턴
싱글톤 패턴은 특정 클래스의 인스턴스가 단 하나만 생성되도록 하는 디자인 패턴입니다. 실행 컨텍스트를 활용하여 유일한 인스턴스를 생성하고 이를 공유하여 효율적으로 자원을 활용할 수 있습니다.
const singleton = (function() {
let instance;
function init() {
// ...
}
return {
getInstance: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
})();
3. 옵서버 패턴
옵서버 패턴은 주제 객체와 여러 관찰자 객체 간의 의존성을 정의하는 패턴으로, 주제 객체의 상태 변화를 감지하고 이에 따른 처리를 관찰자 객체에 통지합니다. 실행 컨텍스트를 활용하여 주제 객체와 관찰자 객체 간의 연결 및 통신을 관리할 수 있습니다.
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
update(data) {
// ...
}
}
이처럼 실행 컨텍스트를 활용한 디자인 패턴은 코드를 더욱 구조화하고 유연하게 만들어주는데 효과적입니다. 또한, 실행 컨텍스트의 활용을 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
참고문헌:
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
- https://poiemaweb.com/js-scope
- https://joshua1988.github.io/web-development/javascript/javascript-pattern-design/