[1장] 2.6.2 JavaScript ES2015에 도입된 모듈 표준과 import, export 키워드

[suhjuho]

1. JavaScript ES2015에 도입된 모듈 표준은 무엇인가요?

2. import, export 키워드에 대해 설명해주세요

[sunghankwon]

1. JavaScript ES2015에 도입된 모듈 표준은 무엇인가요?
   모듈 표준은 프로그래밍 언어에서 코드의 구조와 분할 방법을 정의하는 규칙으로, 다른 코드 파일이 어떻게 재사용될 수 있는지에 대한 표준으로 모듈 표준은 코드의 재사용성, 유지보수성 등을 돕기 위해 사용됩니다.

자바스크립트의 경우 초기에는 모듈 시스템이 없었고, 개발자들이 스크립트 파일을 HTML 문서에 순차적으로 연결하거나, 즉시 실행 함수 표현식과 같은 패턴을 사용하여 모듈화를 흉내 냈었습니다.

그러다 ES6(ECMAScript 2015)에서 import와 expoert라는 키워드를 중심으로 모듈 표준이 도입됐습니다.

모듈 표준의 장점으로는 기능들을 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있고, 코드가 모듈화가 되어있기에, 각 모듈을 독립적으로 수정할수 있어 유지보수성 역시 증가합니다.

또한 import, export를 통해 모듈간의 종속성이 명확해지는 등의 장점이 있습니다.

2. import, export 키워드에 대해 설명해주세요

export

export는 파일이나 모듈안의 함수나, 객체 등을 다른 모듈에서 사용할 수 있도록 외부로 내보낼 때 사용하는 구문입니다. export는 Named exports와 Default exports 두가지 방법을 통해 사용할 수 있습니다.

Named exports

Named exports는 이름을 지정하여 하나 또는 여러 개의 요소를 내보낼 수 있습니다. 이 방식은 다른 모듈에서 특정 이름으로 직접 접근할 수 있게 해 줍니다.

//test.js
export const members= ["성한", "민지", "기원", "성준", "서하"]; // 개별로 선언해서 export

export { copyMembers, getName }; // 묶어서 export

const copyMembers = ["성한", "민지", "기원", "성준", "서하"]; 
function getName() {
    return "성한";
}

Default exports

Default exports는 모듈당 딱 하나의 default export만 있어야 합니다. 이는 모듈을 대표하는 주요 값이나 기능입니다. 기본 내보내기는 이름 없이 가져올 수 있으며, 가져오는 쪽에서 이름을 자유롭게 지정할 수 있습니다.

//main.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

재내보내기 (Re-exporting)

다른 모듈에서 내보낸 요소를 다시 내보낼 수 있으며, 이를 통해 중간 모듈을 생성하거나, 라이브러리의 일부만을 재구성하여 제공하는 등의 작업이 가능합니다.

import greet from './main.js';
export greet;

모듈 내에서 export된 요소는 반드시 import를 통해 접근해야하고 export문은 반드시 모듈의 최상위 레벨에서 사용해야 합니다.

import

import 는 다른 모듈에서 export된 기능들을 현재 모듈로 가져오기 위해 사용됩니다. ES2015(ES6) 이후로 도입된 이 구문은 코드의 재사용성을 향상시키고, 모듈 간의 종속성을 명확하게 관리할 수 있게 해줍니다.

Named Imports

특정 모듈에서 하나 이상의 내보내진 요소를 이름으로 지정하여 가져옵니다. 이름은 모듈에서 내보낸 이름과 정확히 일치해야 합니다.

import { copyMembers, getName } from './test.js';

console.log(copyMembers[0]);  //성한

Namespace Import

모듈에서 내보낸 모든 것을 하나의 객체로 가져와 해당 객체를 통해 모듈 내 요소들을 접근할 수 있습니다. 이 방법은 모듈에 함수나 변수가 많을때 한번에 가져올 때 유용합니다.

import * as math from './test.js';

console.log(members[4]);  //서하
console.log(getName(); //0번 인덱스의 그남자

Default Import

모듈에서 기본으로 내보낸 요소를 가져옵니다. 기본 내보내기는 이름 없이 내보내지며, 가져와서 원하는 이름을 자유롭게 지정할 수 있습니다.

import greet from './main.js';

console.log(greet('기원')); // "Hello, 기원!"

imoprt문은 export문과 마찬가지로 모듈 최상위에서 사용 되어야 하고 모듈 파일 경로는 상대 경로나 절대 경로로 지정해야 하고, 파일 확장자는 생략 할 수 있습니다.