Open suhjuho opened 2 months ago
자바스크립트의 경우 초기에는 모듈 시스템이 없었고, 개발자들이 스크립트 파일을 HTML 문서에 순차적으로 연결하거나, 즉시 실행 함수 표현식과 같은 패턴을 사용하여 모듈화를 흉내 냈었습니다.
그러다 ES6(ECMAScript 2015)에서 import
와 expoert
라는 키워드를 중심으로 모듈 표준이 도입됐습니다.
모듈 표준의 장점으로는 기능들을 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있고, 코드가 모듈화가 되어있기에, 각 모듈을 독립적으로 수정할수 있어 유지보수성 역시 증가합니다.
또한 import
, export
를 통해 모듈간의 종속성이 명확해지는 등의 장점이 있습니다.
export
는 파일이나 모듈안의 함수나, 객체 등을 다른 모듈에서 사용할 수 있도록 외부로 내보낼 때 사용하는 구문입니다. export는 Named exports와 Default exports 두가지 방법을 통해 사용할 수 있습니다.
Named exports는 이름을 지정하여 하나 또는 여러 개의 요소를 내보낼 수 있습니다. 이 방식은 다른 모듈에서 특정 이름으로 직접 접근할 수 있게 해 줍니다.
//test.js
export const members= ["성한", "민지", "기원", "성준", "서하"]; // 개별로 선언해서 export
export { copyMembers, getName }; // 묶어서 export
const copyMembers = ["성한", "민지", "기원", "성준", "서하"];
function getName() {
return "성한";
}
Default exports는 모듈당 딱 하나의 default export만 있어야 합니다. 이는 모듈을 대표하는 주요 값이나 기능입니다. 기본 내보내기는 이름 없이 가져올 수 있으며, 가져오는 쪽에서 이름을 자유롭게 지정할 수 있습니다.
//main.js
export default function greet(name) {
return `Hello, ${name}!`;
}
다른 모듈에서 내보낸 요소를 다시 내보낼 수 있으며, 이를 통해 중간 모듈을 생성하거나, 라이브러리의 일부만을 재구성하여 제공하는 등의 작업이 가능합니다.
import greet from './main.js';
export greet;
모듈 내에서 export
된 요소는 반드시 import
를 통해 접근해야하고 export
문은 반드시 모듈의 최상위 레벨에서 사용해야 합니다.
import
는 다른 모듈에서 export
된 기능들을 현재 모듈로 가져오기 위해 사용됩니다. ES2015(ES6) 이후로 도입된 이 구문은 코드의 재사용성을 향상시키고, 모듈 간의 종속성을 명확하게 관리할 수 있게 해줍니다.
특정 모듈에서 하나 이상의 내보내진 요소를 이름으로 지정하여 가져옵니다. 이름은 모듈에서 내보낸 이름과 정확히 일치해야 합니다.
import { copyMembers, getName } from './test.js';
console.log(copyMembers[0]); //성한
모듈에서 내보낸 모든 것을 하나의 객체로 가져와 해당 객체를 통해 모듈 내 요소들을 접근할 수 있습니다. 이 방법은 모듈에 함수나 변수가 많을때 한번에 가져올 때 유용합니다.
import * as math from './test.js';
console.log(members[4]); //서하
console.log(getName(); //0번 인덱스의 그남자
모듈에서 기본으로 내보낸 요소를 가져옵니다. 기본 내보내기는 이름 없이 내보내지며, 가져와서 원하는 이름을 자유롭게 지정할 수 있습니다.
import greet from './main.js';
console.log(greet('기원')); // "Hello, 기원!"
imoprt
문은 export
문과 마찬가지로 모듈 최상위에서 사용 되어야 하고 모듈 파일 경로는 상대 경로나 절대 경로로 지정해야 하고, 파일 확장자는 생략 할 수 있습니다.
JavaScript ES2015에 도입된 모듈 표준은 무엇인가요?
import, export 키워드에 대해 설명해주세요