본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
주말에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
20일차 공부 시작!
오늘의 강의 주제는 '상속과 믹스인'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
- 상속과 믹스인 활용의 이해 -
* 상속의 구조와 의미
상속은 객체지향 프로그래밍에서 코드의 재사용성과 구조화, 유지 관리의 편리함을 목표로 활용된다. 상위 클래스가 공통적으로 제공할 기능 및 속성을 정의하면 하위 클래스들은 이를 물려받아 별도의 코드 중복 없이 확장하거나 변형할 수 있다.
타입스크립트에서는 보통 'extends' 키워드를 사용해 상속 구조를 만든다. 상속은 공통 로직을 한 곳에 집중시켜 코드의 일관성을 높이고 여러 관련 클래스가 동일한 규약을 따르도록 유도한다.
* 클래스와 생성자
클래스를 통한 상속을 구현할 때는 반드시 생성자(constructor)가 필요하다. 생성자는 객체가 태어날 때 한 번만 호출되는 함수로 초기화가 반드시 필요한 속성들을 설정하며, 하위 클래스에서도 super를 통해 상위 클래스의 생성자를 호출해야 한다. 이 구조는 각 객체가 확실한 초기 상태를 갖게 하고, 유지보수와 확장이 용이하도록 돕는다.
class Api {
url: string;
ajax: XMLHttpRequest;
constructor(url: string) {
this.url = url;
this.ajax = new XMLHttpRequest();
}
protected getRequest<AjaxResponse>(): AjaxResponse {
this.ajax.open('GET', this.url, false);
this.ajax.send();
return JSON.parse(this.ajax.response);
}
}
class NewsFeedApi extends Api {
getData(): NewsFeed[] {
return this.getRequest<NewsFeed[]>();
}
}
class NewsDetailApi extends Api {
getData(): NewsDetail {
return this.getRequest<NewsDetail>();
}
}
* 코드의 분류와 중복 관리
공통 기능을 제공하는 클래스를 두고, 이를 기반으로 개별적인 요소를 파생하면 중복 코드가 줄어들지만 클래스가 너무 단순할 때에는 오히려 구조가 복잡해져 부담이 될 수 있다. 코드 규모가 작을 때는 단순함을 유지하는 게 더 합리적인 선택일 수 있고, 장기적으로 프로젝트가 커질수록 상속 구조의 이점이 두드러진다. 결국 클래스 설계의 목적은 반복 요소를 최소화하면서도 각 목적에 맞는 구조와 형식을 만드는 데 있다.
* protected 지시어의 활용
타입스크립트에서는 public, private 외에 protected 지시어를 지원한다. 이는 클래스와 그 하위 클래스 내부에서만 접근 가능하게 하며 외부에서는 호출할 수 없다는 점이 특징이다. 상속 구조를 안전하게 유지하고 의도하지 않은 접근을 방지하기 위해 중요한 개념이다.
* 믹스인의 개념과 활용
믹스인은 클래스 간 기능 확장을 유연하게 처리하는 또다른 방법이다. 전통적인 extends 방식과 달리 믹스인 기법은 클래스를 직접 합성해 독립적으로 기능을 결합하는 형태다. 믹스인은 상하 관계가 아니라 기능 단위의 집합으로 보아, 다중 상속이 제한된 타입스크립트에서 다양한 기능을 가진 객체 설계에 특히 유용하다.
기술적 구조로서 믹스인은 보통 함수 형태의 합성 도구를 만들어 여러 클래스의 프로퍼티와 메서드를 하나의 대상 클래스에 덧붙인다. 이 과정에서 상속 계층이 드러나지 않아 유지관리가 비교적 쉽고 유연하게 기능 확장이 가능하다.
class Api {
getRequest<AjaxResponse>(url: string): AjaxResponse {
const ajax = new XMLHttpRequest();
ajax.open('GET', url, false);
ajax.send();
return JSON.parse(ajax.response);
}
}
class NewsFeedApi {
getData(): NewsFeed[] {
return this.getRequest<NewsFeed[]>(NEWS_URL);
}
}
class NewsDetailApi {
getData(): NewsDetail {
return this.getRequest<NewsDetail>(CONTENT_URL);
}
}
function applyApiMixins(targetClass: any, baseClass: any) {
baseClasses.forEach(baseClass => {
Object.getOwnPropertyNames(baseClass.prototype).forEach(name => {
const descriptor = Object.getOwnPropertyDescriptor(baseClass.prototype, name);
if (descriptor) {
Object.defineProperty(targetClass.prototype, name, descriptor);
}
});
})
}
applyApiMixins(NewsFeedApi, [Api]);
applyApiMixins(NewsDetailApi, [Api]);
* 믹스인과 전통적 상속의 차이
extends를 통한 상속 구조는 코드 상에서 상하 관계가 명확히 드러나는 반면 믹스인 기법은 필요에 따라 기능을 가져다 쓰는 방식이다. 상속 관계를 동적으로 바꿔야 하거나 다중 상속이 필요한 경우 믹스인 패턴이 훨씬 유리하다. 믹스인 사용 시 상속 계층이 복잡해지는 문제 대신 각 기능이 독립성을 갖고 재사용될 수 있다는 점에서 장점이 있다.
마치며
오늘도 환급 챌린지 22강 공부 완료!!
이번 강의에서는 상속과 믹스인에 대해서 배웠다. 상속에 대해서는 잘 알고 있었지만 믹스인 기법 등에 대해서는 처음 보았고 잘 설명해주셔서 유익했다.