05장-최신-자바스크립트-문법과-기능

Last modified: 31 March 2025

5.1 애플리케이션 분리의 중요성

자바스크립트는 애플리케이션을 모듈이라는 단위로 쪼갤 수 있습니다.

tip

확장 가능한 자바스크립트 생태계에서 애플리케이션이 모듈형이라는 것은 잘게 분리된 모듈로 구성되었음을 뜻합니다.

느슨한 결합은 의존성을 낮추어 애플리케이션의 유지보수를 용이하게 만듭니다.

5.2 모듈 가져오기와 내보내기

모듈형 언어가 되기 위해서는 의존성을 가진 모듈을 내보내고 가져올 수 있어야 합니다. 자바스크립트에서는 import 키워드와 export 키워드를 통해 모듈을 관리할 수 있습니다.

5.3 모듈 객체

모듈을 객체로 가져오면 모듈 리소스를 깔끔하게 가져올 수 있습니다.

import * as Animal from "./animals.mjs";

export const zoo = {
    monkeyEat() {
        Animal.monkey.eat("bananas");
    }
};

zoo.monkeyEat();

5.4 외부 소스로부터 가져오는 모듈

ES2015부터는 외부 소스에서 가져오는 원격 모듈을 쉽게 가져올 수 있게 되었습니다.

import * as Animal from "https://example/modules/animals.mjs";

export const zoo = {
    monkeyEat() {
        Animal.monkey.eat("bananas");
    }
};

zoo.monkeyEat();

5.5 정적으로 모듈 가져오기

앞 예시에서 보여준 것은 정적 가져오기(static import)라고 합니다. 메인 코드를 실행하기 전에 모듈을 다운로드하고 실행하기 때문에 초기 페이지 로드 시 많은 코드를 미리 로드해야 하므로 성능에 문제가 생길 수 있습니다.

5.6 동적으로 모듈 가져오기

모듈을 초기에 모두 미리 로드하기보다 필요한 시점에 불러와 사용할 수 있습니다.

export const mswInit = () => {
    if (process.env.mockEnable) {
        import("/modules/msw/handler")
            .then((handler) => {
                handler.default?.start();
            })
            .catch((error) => {
                console.error("Failed to load MSW handler:", error);
            });
    }
}

해당 동적 가져오기는 await과 함께 사용할 수 있습니다.

await import("/modules/msw/handler")

추가로 사용자의 상호작용에 따라 가져올 수 있도록 addEventListener에 추가할 수도 있으며, IntersectionObserver API를 통해 컴포넌트가 화면에 보이는지 여부에 따라 로드할 수도 있습니다.

5.7 서버에서 모듈 사용하기

모듈 기능은 Node 15.3 버전 이상에서 지원되었으며, Node는 type이 module이라면 .mjs와 .js로 끝나는 파일을 자바스크립트 모듈로 취급합니다.

{
    "name": "javascript-modules",
    "type": "module"
}

5.8 모듈을 사용하면 얻을 수 있는 이점

  • 한 번만 실행된다.

  • 자동으로 지연 로드된다.

  • 유지보수와 재사용이 쉽다

  • 네임스페이스를 제공한다.

  • 사용하지 않는 코드를 제거한다.

5.9 생성자, 게터, 세터를 가진 클래스

ES2015+에서는 모듈뿐만 아니라 생성자와 내부를 숨기는 기능을 가진 클래스가 추가되었습니다. extends 기능을 통해 클래스끼리의 상속이 가능하며, 클래스 멤버에 #(해시)를 붙여 비공개 멤버로 만들 수 있습니다.

5.10 자바스크립트 프레임워크와 클래스

지난 몇 년간, React와 같은 라이브러리 및 프레임워크는 클래스의 대체제를 도입해 왔습니다. 대표적으로 리액트의 Hooks는 클래스를 사용하지 않고도 리액트의 상태와 라이프사이클을 다룰 수 있도록 만들어졌습니다.