타입스크립트 class

사전에 새 단어를 추가하고 단어를 찾고 단어를 삭제하는 메소드를 만들 예정!

type Words = {
  [key: string]: string;
};

Words 타입은 문자열 키와 문자열 값으로 이루어진 객체

class Word {
  constructor(
    public term: string,
    public def: string
  ) {}
}

Word 클래스는 term과 def라는 두 개의 속성을 가지고
이 두 속성은 생성자 파라미터로 전달되고 public 멤버 변수로 할당

class Dict {
  private words: Words;
  constructor() {
    this.words = {};
  }

• Dict 클래스는 words라는 Words 타입의 private한 멤버 변수를 가지며
• 이 변수는 해당 클래스 내부에서만 접근할 수 있습니다.
• constructor 메서드는 words 변수를 빈 객체로 초기화합니다.

add(word: Word) {
    if (this.words[word.term] === undefined) {
      this.words[word.term] = word.def;
    }
}

• add 메서드는 Word 타입의 객체를 받아서 words 객체에 추가합니다.
• 이미 동일한 term을 가진 단어가 존재하는 경우에는 추가되지 않음

def(term: string) {
    return this.words[term];
}

def 메서드는 주어진 단어의 정의를 반환합니다. 만약 해당 단어가 존재하지 않는다면 undefined를 반환합니다.

const kimchi = new Word("kimchi", "한국의 음식");

kimchi라는 이름의 Word 클래스 인스턴스를 생성합니다.

이 코드의 동작은 다음과 같습니다:

1. Dict 클래스를 사용하여 단어 사전을 생성합니다.
2. 새로운 단어를 추가할 때 add 메서드를 사용합니다.
3. 특정 단어의 정의를 확인하려면 def 메서드를 사용합니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

const dictionary = new Dict();
dictionary.add(new Word("apple", "a fruit"));
dictionary.add(new Word("banana", "another fruit"));

console.log(dictionary.def("apple")); // 출력: "a fruit"
console.log(dictionary.def("banana")); // 출력: "another fruit"
console.log(dictionary.def("kimchi")); // 출력: undefined

이렇게 하면 단어를 추가하고 정의를 확인하는 간단한 단어 사전이 생성됩니다.

접근 제한자(Access modifier)

객체 지향 프로그래밍에서 클래스 멤버의 접근을 제어하는 데 사용
주로 클래스의 필드(속성)와 메서드에 사용되어 멤버변수를 외부에서 접근 가능한지 여부를 결정

접근 제한자(Access modifier)는 다음과 같이 세 가지 종류가 있습니다:

• public: 해당 멤버가 어디서든 접근 가능 즉, 클래스 외부에서도 접근
• protected: 해당 멤버가 해당 클래스 또는 해당 클래스를 상속한 하위 클래스에서만 접근 가능
• private: 해당 멤버가 해당 클래스 내에서만 접근 가능 해당 클래스를 상속한 하위 클래스에서도 접근할 수 없음

접근 제한자를 적절하게 사용하는 것은 클래스의 캡슐화를 유지하고 데이터의 은폐를 통해 코드를 안전하게 유지하는 데 도움이 됩니다.
이를 통해 클래스의 내부 구현을 숨기고 외부에서 클래스에 대한 의존성을 줄일 수 있습니다.

예를 들어,

• 위의 코드에서 Dict 클래스의 words 멤버를 private으로 선언
• 외부에서 직접적으로 words에 접근하는 것을 방지
• 이를통해 Dict 클래스의 내부 구현 세부 사항을 숨기고, 오직 Dict 클래스의 메서드를 통해서만 words에 접근할 수 있도록 제한

코드의 안정성을 높이고 의도치 않은 변경이나 접근을 방지

만약 private를 public으로 변경한다면, 외부에서 직접적으로 words에 접근할 수 있게 됩니다. 이는 클래스의 캡슐화를 깨고, 내부 구현 세부 사항에 대한 의존성을 증가시킬 수 있습니다.

의도치 않은 변경이나 오류 발생의 가능성을 높일 수 있으며, 코드의 유지보수성을 감소시킬 수 있습니다.

따라서 접근 제한자를 적절하게 사용하여 클래스를 설계하는 것은 코드의 안전성과 유지보수성을 향상시키는 데 중요합니다. 클래스의 내부 구현 세부 사항을 숨기고 외부에서의 접근을 제한함으로써 안정성을 높이고 코드의 복잡성을 줄일 수 있습니다.

추상 클래스와 메소드

TypeScript에서 추상 클래스(abstract class)와 추상 메서드(abstract method)는 객체 지향 프로그래밍의 핵심 개념 중 하나입니다.

추상 클래스는 다른 클래스가 상속받을 수 있는 기본 클래스로 사용되지만, 직접 인스턴스화할 수 없습니다. 이는 추상 클래스가 구체적인 구현을 제공하지 않는 하나 이상의 추상 메서드를 포함할 수 있기 때문입니다.

추상 클래스(Abstract Class)

추상 클래스는 abstract 키워드를 사용하여 정의합니다. 이 클래스 내에서 구현된 메서드(구체 메서드)와 구현되지 않은 메서드(추상 메서드)를 모두 포함할 수 있습니다.

abstract class Animal {
  // 추상 메서드
  abstract makeSound(): void;

  // 구체 메서드
  move(): void {
    console.log("움직이는 중...");
  }
}

추상 메서드

추상 메서드는 구현부 없이 메서드의 시그니처만을 선언합니다. 이 메서드들은 반드시 하위 클래스에서 구현되어야 합니다.

class Dog extends Animal {
  // 추상 클래스에서 정의된 추상 메서드 구현
  makeSound(): void {
    console.log("멍멍!");
  }
}

const dog = new Dog();
dog.makeSound(); // "멍멍!"
dog.move();      // "움직이는 중..."

이 예제에서 Animal은 추상 클래스이며, makeSound는 추상 메서드입니다. Dog 클래스는 Animal 클래스를 상속받아 makeSound 메서드를 구현합니다. 추상 클래스의 인스턴스를 직접 생성할 수 없기 때문에, Animal 클래스의 인스턴스를 만들려고 시도하면 오류가 발생합니다. 하지만 Dog 클래스의 인스턴스는 생성할 수 있으며, 해당 인스턴스를 통해 makeSound와 move 메서드를 호출할 수 있습니다.

추상클래스를 사용하는 이유

공통적인 기능을 재사용하고, 일관된 인터페이스를 갖는 하위 클래스를 설계하는 데 있습니다. 추상 클래스를 통해 일부 메서드의 구현을 강제하면서도 공통의 구현을 재사용할 수 있습니다. 이를 통해 코드의 중복을 줄이고 유지 보수를 용이하게 합니다.

UI 컴포넌트 만들기

웹 프론트엔드 개발에서 다양한 UI 컴포넌트(버튼, 체크박스, 드롭다운 등)를 구현할 때 추상 클래스를 활용할 수 있습니다.

• 여러 유형의 버튼이 있지만 모든 버튼이 공통적인 기능(렌더링, 활성화/비활성화 등)을 공유한다고 가정
• 추상 클래스 Button을 만들어 공통 기능을 구현하고, 각 버튼의 특수한 동작은 추상 메서드로 선언하여 각 하위 클래스에서 구현

abstract class Button {
  // 모든 버튼에 공통적인 메서드
  render(): void {
    console.log("버튼을 렌더링합니다.");
  }

  // 버튼이 클릭됐을 때의 동작을 정의하는 추상 메서드
  abstract click(): void;
}

class SubmitButton extends Button {
  // '제출' 버튼의 특화된 클릭 동작 구현
  click(): void {
    console.log("데이터를 제출합니다.");
  }
}

class CancelButton extends Button {
  // '취소' 버튼의 특화된 클릭 동작 구현
  click(): void {
    console.log("작업을 취소합니다.");
  }
}

const submitButton = new SubmitButton();
submitButton.render(); // "버튼을 렌더링합니다."
submitButton.click();  // "데이터를 제출합니다."

const cancelButton = new CancelButton();
cancelButton.render(); // "버튼을 렌더링합니다."
cancelButton.click();  // "작업을 취소합니다."