패스트캠퍼스 챌린지 19일차

상속과 믹스인

 

코드를 작성함에 있어서 중복된 코드가 발생을 하고 그 중복된 코드를 변수나 함수로 만들지만 그것 또한 한계가 있다. 따라서 코드를 목적에 맞게 범주로 나눠서 분류하면서 중복된 코드를 관리 할 수 있다. 그 방법으로 상속을 사용할 것이다.

 

공통 요소로 분류하고 공통 요소에서 확장할 수 있도록 개별 요소를 만드는 식으로 상속을 사용하면 된다.

상속을 사용하는 매커니즘은

1) 클래스 사용

 

중복을 제거하기 위해 클래스를 사용했지만 중복된 코드를 제거하려다 코드가 더 무거워질 수도 있다. 코드 자체가 하는 일이 작은 경우에 그런건데 클래스의 경우는 단순 함수에서 어떠한 구조를 갖는 것이다. 구조를 갖는다는 건 목적을 위한 형식을 갖는 것이고 그럼에서 나중에 클래스가 더 많은 기능을 가지게 될 때 초기의 복잡도는 유지되면서 사용할 때의 단순함은 유지될 수 있다.

 

2) 믹스인 사용

 

기존의 extends의 상속 방법은 상속의 관계를 바꾸고싶다면 코드를 바꿔야한다. 또 class 문법은 다중상속을 지원하지 않는다. 그럴 때 이 믹스인 기법을 사용한다.

 

...

function applyApiMixins(targetClass: any, baseClasses :any[]) :void{
    baseClasses.forEach(baseClass => {
        Object.getOwnPropertyNames(baseClass.prototype).forEach(name => {
            const descriptor = Object.getOwnPropertyDescriptor(baseClass.prototype, name);

            if(descriptor){
                Object.defineProperty(targetClass.prototype, name, descriptor);
            }
        })
    })
}

class Api{
    getRequest<AjaxResponse>(url :string) :AjaxResponse {
        const ajax = new XMLHttpRequest();
        ajax.open('GET', url, false); // method, Url, async
        ajax.send();
    
        return JSON.parse(ajax.response);    
    }
}

class NewsFeedApi{
    getData(): NewsFeed[]{
        return this.getRequest<NewsFeed[]>(NEWS_URL);
    }
}

class NewsDetailApi{
    getData(id :string): NewsDetail{
        return this.getRequest<NewsDetail>(CONTENT_URL.replace('@id', id));
    }
}

interface NewsFeedApi extends Api {};
interface NewsDetailApi extends Api {};

applyApiMixins(NewsFeedApi, [Api]);
applyApiMixins(NewsDetailApi, [Api]);

function newsFeed() :void{
    const api = new NewsFeedApi();
    let newsFeed: NewsFeed[] = store.feeds;
    const newsTotalPage = newsFeed.length / 10;
    const newsList = [];
    ... 
}

function newsDetail() :void{
	...
}

 

코드의 특성상 class의 extends를 사용하는 것만으로도 해결되는 부분이 많기때문에 대부분 믹스인까지 사용하기보다 클래스의 extends를 사용하지만 어떤 유형은 코드베이스의 유연성이 굉장히 많이 필요하기 때문에 extends만으로 부족한 부분은 믹스인을 사용한다.

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential