Colin's Blog
[javascript] Angular에서의 자바스크립트 캡슐화 기법 사용 방법

Angular 애플리케이션을 개발하면서 자바스크립트 캡슐화 기법을 사용하고 싶은 경우가 있을 것입니다. 이 기법은 코드의 보안성을 높이고 다른 모듈에서의 접근을 제한함으로써 코드의 안전성을 확보합니다. Angular에서는 여러 가지 방법으로 자바스크립트 캡슐화를 구현할 수 있습니다.

1. 모듈을 활용한 캡슐화

모듈은 상태나 동작을 캡슐화하는 데 유용한 Angular의 핵심적인 개념입니다. 모듈을 활용하면 특정 모듈 밖에서의 접근을 막을 수 있고, 필요한 경우 외부에 노출시키지 않아도 됩니다. 모듈을 이용하여 변수나 함수 등을 캡슐화하고, 외부에서의 접근을 제한할 수 있습니다.

// 모듈을 이용한 캡슐화 예시
var myModule = (function() {
  var privateVar = "private variable";

  function privateFunction() {
    return "private function";
  }

  return {
    publicFunction: function() {
      return "public function";
    }
  };
})();

console.log(myModule.publicFunction()); // "public function"
console.log(myModule.privateVar); // undefined (접근 불가)
console.log(myModule.privateFunction); // undefined (접근 불가)

위의 예시에서 privateVar와 privateFunction에 직접적으로 접근할 수 없으므로, 모듈을 이용하여 캡슐화를 구현한 것입니다.

2. ES6 Class를 이용한 캡슐화

ES6에서 도입된 Class를 사용하면 객체지향적으로 캡슐화를 구현할 수 있습니다. 접근 제어자인 public, private, protected 키워드를 이용하여 캡슐화 수준을 명시할 수 있습니다.

// ES6 Class를 이용한 캡슐화 예시
class MyClass {
  #privateVariable = "private variable";

  publicMethod() {
    return "public method";
  }

  #privateMethod() {
    return "private method";
  }
}

let myObject = new MyClass();
console.log(myObject.publicMethod()); // "public method"
console.log(myObject.privateVariable); // undefined (접근 불가)
console.log(myObject.privateMethod); // undefined (접근 불가)

ES6 Class를 사용하여 #으로 시작하는 변수와 메서드를 private으로 선언하여, 외부에서의 직접적인 접근을 막은 것을 확인할 수 있습니다.

3. Angular Service를 이용한 캡슐화

Angular에서는 Service를 이용하여 공통 로직이나 데이터를 캡슐화할 수 있습니다. 다른 컴포넌트에서 해당 서비스를 주입하여 사용함으로써, 중복을 최소화하고 모듈화된 코드를 작성할 수 있습니다.

// Angular Service를 이용한 캡슐화 예시
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private privateVariable: string = "private variable";

  publicMethod(): string {
    return "public method";
  }
}

위의 예시에서 privateVariable은 외부에서의 접근을 차단하고, publicMethod()를 통해 외부에 필요한 기능을 노출시킨 것을 확인할 수 있습니다.

Angular에서의 자바스크립트 캡슐화 기법을 통해 코드의 보안성과 모듈성을 확보할 수 있습니다. 이러한 방법들을 적절히 활용하여 Angular 애플리케이션을 보다 안전하고 유지보수가 쉬운 형태로 개발할 수 있습니다.

참고문헌:

© 2018 Colin. All rights reserved.