DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-06-22
작성자: dusunax

---

아이템 56: 정보를 감추는 목적으로 private 사용하지 않기

• ECMAScript 2022 이전, 자바스크립트는 클래스에 비공개 속성을 만들 수 없었다
  • 언더스코어 접두사를 관례로 사용했을 뿐~~
• 타입스크립트의 public, protected, private 접근 제어자를 사용하면 공개 규칙을 강제할 수 있는 것으로 오해할 수 있다~!
  • 하지만 접근 제어자는? 타입스크립트 키워드이기 때문에 컴파일 후에는 제거된다.

// TS
class Diary {
  private secret = "cheated on my English test";
}

const diary = new Diary();
diary.secret;
// ~~~ 'secret' 속성은 private이며 'Diary' 클래스 내에서만 접근할 수 있습니다.

// JS 컴파일 후
class Diary {
  constructor() {
    this.secret = "cheated on my English test"; // private 키워드는 사라짐, secret은 일반적인 속성
  }
}
const diary = new Diary();
diary.secret;

// TS의 접근 제어자들은? 컴파일 시점에만 오류 표시. 언더스코어나 마찬가지로 런타임에 효력이 없다.
// 단언문을 사용하면? TS에서도 private에 접근할 수 있다.
(diary as any).secret; // 정상

예제A:

• JS에서 캡슐화에 효과적인 방법

declare function hash(text: string): number;

// 클로저를 만드는 생성자 예시
class PasswordChecker {
  checkPassword: (password: string) => boolean;

  constructor(passwordHash: number) {
    // checkPassword 함수가 클로저를 이용하여 passwordHash 변수에 접근할 수 있음
    this.checkPassword = (password: string) => {
      // 전달된 비밀번호를 해시화하여 저장된 해시값과 비교
      return hash(password) === passwordHash;
    };
  }
}

const checker = new PasswordChecker(hash("s3cret"));
checker.checkPassword("s3cret"); // true

Closure 예제A: 실행 과정

1. 해시 함수 호출

• hash("s3cret")가 123456이라는 해시 값을 반환한다고 가정

2. PasswordChecker 클래스의 인스턴스 생성

• new PasswordChecker(123456) 호출로 PasswordChecker 클래스의 인스턴스가 생성된다.
• 생성자 함수가 호출되고 passwordHash 매개변수는 123456이라는 값을 받는다.

3. 클로저 생성

• 생성자 함수 내부에서 this.checkPassword에 할당된 함수가 생성
  • passwordHash 변수를 캡처하여 클로저를 만듦 => passwordHash에 접근할 수 있다
    • this.checkPassword 함수는 password 매개변수를 받아, 전달된 비밀번호를 해시화하고 저장된 passwordHash 값과 비교한다.

클로저 짧막 상식

• 실행 컨텍스트 챡챡 쌓기
  • 클로저는 함수가 생성될 당시의 lexical enviorment(여기서는 passwordHash 변수)을 기억하여, 나중에 함수가 호출될 때에도 그 enviorment의 변수 객체에 접근
• 코드가 실행되는 데 필요한 execution context는 스택에서 pop됨 => passwordHash에 접근하려면, 함수가 생성되었던 시점의 렉시컬 환경을 참조해야함(즉, 클로저를 통해 접근할 수 있음). 변수 객체는 함수가 참조하지 않으면 접근할 수 없다. 또한 변수는 함수에 의해 참조되고 있으므로 가비지 컬랙팅되지 않음.

예제A의 단점

• 메서드 정의 위치가 제한적: 생성자 외부에서 passwordHash에 접근할 수 없기 때문에, passwordHash에 접근하는 메서드도 생성자 내부에 정의되어야 한다.
• 메모리: 인스턴스를 생성할 때마다 메서드의 복사본이 생성된다.
• 동일 클래스에서 생성된 인스턴스: 서로의 비공개 데이터에 접근하는 것이 불가능하다.
  • 클래스 단위 비공개? 일반적인 객체지향 언어에서는 동일 클래스의 개별 인스턴스끼리 private 속성에 접근이 가능하다.

예제B: Private Class Fields

• ECMAScript 2022 표준, 클래스 인스턴스 외부에서는 직접 접근할 수 없다.
  • 이전 버전으로 컴파일 시 WeapMap으로 대체됨

class PasswordChecker {
  #passwordHash: number;

  constructor(passwordHash: number) {
    this.#passwordHash = passwordHash;
  }

  checkPassword(password: string) {
    return hash(password) === this.#passwordHash;
  }
}

const checker = new PasswordChecker(hash("s3cret"));
checker.checkPassword("secret"); // false
checker.checkPassword("s3cret"); // true

WeapMap이란?

• 객체만 허용
  • WeakMap은 키로 객체만 사용할 수 있습니다. 원시 자료형(예: 숫자, 문자열 등)은 사용할 수 없습니다.
• 약한 참조(Weak References)
  • WeakMap은 키로 사용된 객체에 대한 참조가 약하게 유지됩니다. 약한 참조는 다른 곳에서 해당 객체를 참조하지 않으면, 해당 객체가 가비지 컬렉션의 대상이 될 수 있음을 의미합니다. 즉, WeakMap의 키로 사용된 객체가 메모리에서 해제될 수 있습니다.

// WeakMap을 사용하여 프라이빗 데이터 저장하기 예제
const privateData = new WeakMap();

// 클래스 정의
class Person {
  constructor(name, age) {
    // WeakMap에 현재 인스턴스(this)를 키로 사용하여 데이터 저장
    privateData.set(this, { name: name, age: age });
  }

  // 프라이빗 메서드 예시: 외부에서 접근할 수 없음
  #privateMethod() {
    console.log(`This is a private method for ${privateData.get(this).name}`);
  }

  // 공개 메서드에서 프라이빗 데이터 사용 예시
  introduce() {
    // privateData를 통해 프라이빗 데이터 접근
    const { name, age } = privateData.get(this);
    console.log(`Hello, my name is ${name} and I am ${age} years old.`);
    // 프라이빗 메서드 호출
    this.#privateMethod();
  }
}

// Person 클래스 인스턴스 생성
const person1 = new Person("Alice", 30);

// introduce 메서드 호출
person1.introduce(); // 출력: Hello, my name is Alice and I am 30 years old.
//        This is a private method for Alice

// 외부에서 privateData에 직접 접근할 수 없음
console.log(privateData.get(person1)); // undefined

요약

• public, protected, private같은 access modifiers는 타입 시스템에만 강제됨.
  • 런타임에는 소용이 없으며, 단언문으로 우회할 수 있다.
• 클로저 & 프라이빗 필드 사용하기

아이템 57: 소스맵을 사용하여 타입스크립트 디버깅하기

• 타입스크립트 코드를 실행한다: 타입스크립트 컴파일러가 생성한 JS 코드를 실행한다.
  • 기존 코드를 다른 형태로 변환하는 도구들 예시) 압축기 minifier나 전처리기 preprocessor
• 디버거는 런타임에 동작 => 디버깅을 하면 보게되는 코드는 전처리기, 컴파일러, 압축기를 거친 자바스크립트 코드이다.
  • 변환된 JS는 복잡하다.

소스맵 source map

• 브라우저 제조사가 내놓은 해결책: 대부분의 브라우저와 많은 IDE가 지원
• 변환된 코드의 위치와 심벌들을 원본 코드의 원래 위치와 심벌로 매핑

변환된 JS 예시

• async, await을 지원하기 위해 이벤트 핸들러를 상태 머신(state machine)으로 재작성

  • 코드의 동작은 동일하지만, 형태가 매우 다르게 된다.
  • tsconfig.json에서 sourceMap 설정 => .ts 파일에 대응하는 .js와 .js.map 파일을 생성

  {
    "compilerOptions": {
      "sourceMap": true
    }
  }
  

• 소스맵이 js와 함께 있으면? 브라우저의 디버거에서 새로운 index.ts 파일이 나타남 => 브레이크포인트 설정 & 변수 조사 가능

  • 디버거 좌측의 파일 목록에서 파일이 기울임 글꼴이다? => 웹 페이지에 실제로 존재하는 파일이 아니다!
  • index.js.map 파일이 파일 내용을 포함하거나(인라인), 별도의 index.ts 파일을 가지도록 설정할 수 있음(참조 포함, 브라우저가 네트워크를 통해 로드)

• 알아둘 점

  • TS가 bundler나 minifier를 사용하고 있다면? 번들러나 압축기가 각자 소스맵을 생성한다.
    • 이상적인 디버깅 환경이 되려면 생성된 자바스크립트가 아닌 원본 타입스크립트 소스로 매핑되도록 할 것
    • 번들러가 TS 지원이라면 별도 설정 없이 괜찮지만, 아니라면 추가 설정 필요
  • 상용 환경에 소스맵이 유출되고 있는지 확인
    • 디버거를 열지 않는 이상 소스맵이 로드되지 않으므로 사용자에게 성능 저하는 없음
    • 원본 코드의 복사본에 주석, 버그 추적을 위한 url등 공개할 필요가 없는 내용이 있을 것
  • NodeJS 디버깅에도 소스맵 사용할 수 있다.
  • 타입 체커가 코드를 실행하기 전 오류를 잡을 수 있지만, 디버거를 대체할 수는 없다. 소스맵을 사용하면 타입스크립트 디버깅 환경을 구축할 수 있다.

Things to Remember

• Don't debug generated JavaScript. Use source maps to debug your TypeScript code at runtime.
  • 원본 코드가 아닌 변환된 자바스크립트를 디버깅하지 말고, 소스맵을 사용해서 런타임의 타입스크립트 코드를 디버깅하자~!
• Make sure that your source maps are mapped all the way through to the code that you run.
  • 소스맵이 완전히 매핑되었는지 확인할 것
• Know how to debug Node.js code written in TypeScript.
• Depending on your settings, your source maps might contain an inline copy of your original code. Don't publish them unless you know what you're doing!
  • 소스맵에 원본 코드가 그대로 포함되도록 설정되어 있을 수도 있다. 공개하지 않도록 하기