급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!
👀 들어가기에 앞서...
지난 포스트에는 타입스크립트에서는 클래스를 어떻게 쓰면 되는지 기초에 대해 알아보았습니다.
그렇다면 이 클래스와 타입스크립트를 어떻게 활용할 수 있을지,
이번에는 좀 더 알아보도록 하겠습니다.
👀 클래스의 추상화
1. 추상 클래스란?
추상화란 객체지향 프로그래밍에 기초한 방법 중 하나로,
타입스크립트와 자바스크립트의 클래스를 사용하면 구현해볼 수 있습니다.
이 추상화를 적용한 클래스를 추상 클래스라고 하는데요,
추상 클래스란, 인스턴스화 될 수 없고 확장되어야 하는 클래스를 의미합니다.
예를 들어 전체 학생 클래스가 있고, 학생의 학과와 학번을 나타내는 메서드가 있다고 가정합시다.
이 때 학생 클래스를 상속받아 학과별로 학생 클래스를 만들 때,
이 메서드의 내용은 상속받은 학과 클래스마다 달라야 합니다.
"학과: IT학부 / 학번: 20230123"
즉 상속하려는 전체 학생 클래스는 이 메서드가 있기만 하면 되고,
상속받는 각 학과 학생 클래스마다 이 메서드의 내용이 다릅니다.
정리하자면
추상화는 상속하려는 클래스에는 정의만하고,
상속된 클래스들이 서로 다른 내용으로 구현하고자 할 때 사용합니다.
2. 추상 클래스 만들기
이 추상 클래스는 어떻게 표현할까요?
다음과 같이 표현합니다.
추상 클래스 만들기
- 상속하려는 클래스와 메서드 앞에 abstract를 입력합니다. (javascript)
- 이 때 상속하려는 클래스의 메서드에는 void를 입력한다. (typescript)
이 방법을 사용해 위에서 설명했던 전체 학생-학과 학생 클래스를 나타내보면 다음과 같습니다.
//전체 학생 클래스
abstract class Student {
//생략...
//이 메서드는 정의만 되어있고, 상속받는 클래스에서 내용을 작성해야 합니다.
abstract introduce(this: Department): void;
}
//IT학부 학생 클래스
class ITStudent extends Student {
//생략...
//이렇게 추상화를 이용하면 상속받은 클래스 전용으로 코드를 작성할 수 있습니다.
introduce() {
console.log(`학부: IT학부 / 학과: ${this.major}/ 학번: ${this.id}`);
}
}
//국어국문과 학생 클래스
class KoreanStudent extends Student {
//생략...
introduce() {
console.log(`학과: 국어국문과/ 학번: ${this.id}`);
}
}
👀 싱글턴 패턴
생소한 이 개념...
싱글턴 패턴은 클래스가 하나의 인스턴스만 갖도록 하는,
객체지향 프로그래밍 패턴 중 하나입니다.
지금 당장 주로 언제 왜 사용하는지 보다는
일단 하나의 인스턴스만 갖도록 만들어야 한다는 사실에 주목해 봅시다...!
이렇게 하나의 인스턴스만 가지면서, 접근하거나 사용하려면 어떻게 해야할까요?
타입스크립트의 private 생성자를 사용해야 합니다.
지난 포스트에 설명했듯이 private를 사용하면 해당 클래스의 내부에서만 접근이 가능한데,
생성자(constructor) 앞에 이 private를 붙여 여러 인스턴스를 생성하지 않도록 합니다.
그런데 하나의 인스턴스는 만들어져야 해서 접근과 사용은 해야하는 상황입니다.
이럴 때는 정적 프로퍼티와 메서드를 추가해 해결합니다! (자바스크립트 static 사용)
그리고 인스턴스를 생성하는 this 대신,
1. this처럼 쓰이도록 자기 자신을 할당하고,
2. 활용 가능하도록 static을 사용해 정적 프로퍼티로 만들고
3. 인스턴스를 클래스 내부에서 한 번만 생성하도록 하며
4. private를 사용하여 이 클래스 내부에서만 사용하도록 합니다.
방법을 정리하자면 다음과 같습니다.
싱글턴 패턴 구현하기
- private 생성자를 사용해 접근 제어
- static을 활용하여 정적 프로퍼티, 메서드 추가
아래의 예제를 본다면 좀 더 이해가 될 수 있습니다...!
class SingleMyClass extends myClass {
//생략...
//싱글턴 패턴은 인스턴스를 하나만 갖기 때문에 this를 사용하지 않습니다.
//this를 사용하지 않는 이유는 인스턴스를 하나만 생성하기 때문입니다.
// 따라서 this 대신 사용하기 위해
// private과 static을 사용해 정적 속성(접근 가능)이 가능하지만 해당 클래스 내에서만 사용할 수 있도록 하고,
//자기 자신을 설정합니다.
// 그리고 유일한 인스턴스는 이 클래스 내부에서 생성하도록 하면 됩니다.
// 이 작업을 위해 아래와 같이 작성합니다.
private static instance: SingleMyClass;
//private 생성자
private constructor() {
super();
}
//싱글톤을 구현할 수 있게 해주는 정적 메서드입니다.
static getInstance() {
//이미 인스턴스가 생성되었다면 클래스 자체를 호출하도록 조건을 걸고
if (SingleMyClass.instance) {
return this.instance;
}
//인스턴스가 없다면 이렇게 클래스 내부에서
//유일한 이 인스턴스를 실행할 수 있게 리턴합니다.
this.instance = new SingleMyClass();
return this.instance;
}
}
//싱글턴 패턴으로 인해 아래의 instance1과 instance2는 같은 값을 가리키게 됩니다.
const instance1 = SingleMyClass.getInstance();
const instance2 = SingleMyClass.getInstance();
console.log(instance1, instance2); //두 개는 같은 객체이자 같은 인스턴스입니다.😝 마무리
오늘은 Javascript와 Typescript를 활용하여
추상 클래스, 싱글턴 패턴처럼
심화된 코드를 작성하는 방법에 대해 알아보았습니다.
저는 다음 시간에도 살아남을 수 있을까요?!
- 참고:
- Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
- 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
https://www.udemy.com/course/best-typescript-21/
