[YDKJ] Get Started - Chapter 2 - 2(完)

요약

How We Organize in JS

• JS생태계에서 널리 사용되는 코드 구성패턴은 클래스와 모듈

Classes

• 클래스는 데이터와 해당 데이터를 조작하는 동작을 정의함.
• 클래스를 사용하려면 new 키워드로 인스턴스화해야 함.
• 클래스를 사용하지 않더라도 코드를 구성할 수 있지만, 구성이 어렵고 읽기 및 이해가 어려워짐

 

Class Inheritance

• 상속받은 메서드와 재정의된 메서드가 동일한 이름으로 공존할 수 있는 사실은 다형성(Polymorphism)이라고 함.

class Publication {
    constructor(title,author,pubDate) {
        this.title = title;
        this.author = author;
        this.pubDate = pubDate;
    }

    print() {
        console.log(`
            Title: ${ this.title }
            By: ${ this.author }
            ${ this.pubDate }
        `);
    }
}

class Book extends Publication {
    constructor(bookDetails) {
        super(
            bookDetails.title,
            bookDetails.author,
            bookDetails.publishedOn
        );
        this.publisher = bookDetails.publisher;
        this.ISBN = bookDetails.ISBN;
    }

    print() {
        super.print();
        console.log(`
            Publisher: ${ this.publisher }
            ISBN: ${ this.ISBN }
        `);
    }
}

 

Modules

• 모듈패턴도 클래스패턴과 동일한 목적을 가지고 있음 => 데이터와 동작을 논리적 단위로 그룹화하는 것!
• 그러나 몇 가지 차이 점이 있음

 

Classic Modules

function Publication(title,author,pubDate) {
    var publicAPI = {
        print() {
            console.log(`
                Title: ${ title }
                By: ${ author }
                ${ pubDate }
            `);
        }
    };

    return publicAPI;
}

function Book(bookDetails) {
    var pub = Publication(
        bookDetails.title,
        bookDetails.author,
        bookDetails.publishedOn
    );

    var publicAPI = {
        print() {
            pub.print();
            console.log(`
                Publisher: ${ bookDetails.publisher }
                ISBN: ${ bookDetails.ISBN }
            `);
        }
    };

    return publicAPI;
}

• 클래스 형태와 매우 유사함
• 클래스에서는 this로 접근을 하지만 클래식 모듈에서는 아님.
• 모듈은 new를 사용하지 않음!

 

ES Modules

• es6에 추가된 기능으로 클래식 모듈과 같은 목적임.
• 하나의 파일에 하나의 모듈
• api와 직접 상호작용하지 않고 export 키워드를 사용함.
• 가장 큰 차이점은 인스턴스화하지 않는다는 것. ESM은 싱글톤임. => 다중 인스턴스를 지원하려면 클래식 모듈방식을 내부적으로 사용해야 함.

function printDetails(title,author,pubDate) {
    console.log(`
        Title: ${ title }
        By: ${ author }
        ${ pubDate }
    `);
}

export function create(title,author,pubDate) {
    var publicAPI = {
        print() {
            printDetails(title,author,pubDate);
        }
    };

    return publicAPI;
}
**************************************************

import { create as createPub } from "publication.js";

function printDetails(pub,URL) {
    pub.print();
    console.log(URL);
}

export function create(title,author,pubDate,URL) {
    var pub = createPub(title,author,pubDate);

    var publicAPI = {
        print() {
            printDetails(pub,URL);
        }
    };

    return publicAPI;
}

**************************************************

import { create as newBlogPost } from "blogpost.js";

var forAgainstLet = newBlogPost(
    "For and against let",
    "Kyle Simpson",
    "October 27, 2014",
    "https://davidwalsh.name/for-and-against-let"
);

forAgainstLet.print();
// Title: For and against let
// By: Kyle Simpson
// October 27, 2014
// https://davidwalsh.name/for-and-against-let

 

 

 

느낀 점

아직 GetStarted라 깊은 내용을 다루진 않는듯 하다.

대부분 간단한 내용들이지만, ES6 모듈 방식이 싱글톤인 것은 처음 알았다.

나는 ES6 모듈 방식을 채택해서 프로젝트를 해왔었기 때문에, 가볍게 클래스 방식과, 클래식 모듈방식을 읽어보는 계기가 되었다.