[javascript] import 방식 (named, default)

export는 default와 named로 나눌 수 있고, export 방식에 따라 import도 다르게 해야한다.

 

// some-lib.ts
export default function greet() {
  console.log('Hello');
}

export function say() {
  console.log('hello world')
}

 

default export 만 불러오는 방법

// main.ts
import someLib from './some-lib'; // ✅ someLib는 greet 함수
someLib(); // Hello

 

named export 만 불러오는 방법

// main.ts
import { say } from './some-lib'; // ✅ someLib는 greet 함수
say(); // hello World

 

default와 named 모두 불러오는 방법

// main.ts
import * as someLib from './some-lib';
someLib.greet(); // Hello
console.log(someLib.say()); // hello world

 

 

왜 export를 2개로 나눠서 이렇게 사람을 힘들게 하는지..

javascript 처음에 모듈화가 안되어 있어서 모듈 시스템을 만들기 시작함.

node.js에서 commonJS라는 방식으로 모듈을 도입해서 사용

브라우저에서도 모듈을 도입하자는 요구가 많아 es6에서 모듈을 표준화하기로 하고 import/export 가 등장

 - CommonJS 호환성 유지

 - 새로운 문법적 유연성과 선언적 특성 부여