import 키워드

Parker.Park·2022년 9월 10일
0

개념

목록 보기
16/16

import 키워드

Javascript에서 현재 js파일에서 다른 export된 모듈을 가져오기 위해서 사용한다. 주로 라이브러리를 가져올 때 사용했기 때문에 Docs에서 getting started에서 참고하여 여과없이 사용하였다.

import 는 ES6에서 새롭게 도입된 키워드라고 한다. 이 외에도 from, export, default 와 같이 모듈 관리 전용 키워드가 있어서 가독성이 좋고, 비동기 방식으로 작동하기 때문에 실제로 쓰이는 부분만 불러와 성능과 메모리 부분에서 유리한 측면이 있다고 한다.

import 키워드를 어떻게 export와 사용하는지에 대해서 정리해보자.

Named import

import { export1 } from "module-name";

"module-name"에서 가저올 모듈을 절대경로 혹은 상대결로를 표시하는 곳이다. ""따옴표안에서 결정하며 확장자를 쓸경우도 있으니 확인하여야한다. "export1" 하나의 멤버를 가리킨다. 만약 "module-name"에서 추가적으로 멤버를 불러오고 싶다면 "export2, export3..."이 될 수 있다.

import { export1 as alias1 } from "module-name";

가져온 멤버에 별칭을 주어 별칭으로 사용 할 수 있다.

// export-test.mjs

export function fn1() {
  const export1 = "export1";
  console.log(export1);
}

export function fn2() {
  const export2 = "export2";
  console.log(export2);
}

export function fn3() {
  const export3 = "export3";
  console.log(export3);
}
// import-test.mjs

import { fn1, fn2, fn3 as fnThree } from "./export-test.mjs";

fn1(); //"export1"
fn2(); //"export2"
fnThree(); //"export3"

Namespace import

import * as name from "module-name";

가져온 모든 모듈에 대해서 "name"으로 바인딩되어 들어가게 할 수 있다. "module-name"에서 모든 exports된 모듈을 "name"을 통해서 오브젝트의 properties처럼 기능을 사용할 수 있다.

// export-test.mjs

function fn1() {
  const export1 = "export1";
  console.log(export1);
}

export function fn2() {
  const export2 = "export2";
  console.log(export2);
}

export function fn3() {
  const export3 = "export3";
  console.log(export3);
}
// import-test.mjs

import * as Fn from "./export-test.mjs"

// Fn.fn1(); //TypeError!
Fn.fn2(); //"export2"
Fn.fn3(); //"export3"

Default import

import defaultExport from "module-name";

"default export"를 통해 내보낸 것을 기본값으로 가져올 수 있다. (=보내는 방식에 따라 불러오는 방식이 차이가 나는 이유였다.)

// export-test.mjs

function fn1() {
  const export1 = "export1";
  console.log(export1);
}

//fn2, fn3만 보낼 것이다.
export default {
  fn2() {
    const export2 = "export2";
    console.log(export2);
  },

  fn3() {
    const export3 = "export3";
    console.log(export3);
  },
};
// import-test.mjs

import Fn from "./export-test.mjs";

// Fn.fn1(); // TypeError
Fn.fn2(); //"export2"
Fn.fn3(); //"export3"

파일단위로 ES 모듈 적용

원래 기존 CommonJS모듈에서 ES모듈인 import, export를 사용하려면 Babel이라는 트랜스파일러를 사용하여야 한다. Node.js 13.2버전부터 ES모듈 시스템을 정식 지원하게 되었다고 한다. 이에 따라 다른 도구 없이 손쉽게 ES모듈을 사용할 수 있게 되었다고 한다.
사용법에 대해서 간단하게나마 정리해보자.

초반에 import키워드를 사용할 때 가장 먼저 아래와 같이 에러 메시지를 받을 가능성이 높을 것이다.

(node:84825) Warning: 
To load an ES module, set "type": 
"module" in the package.json or use the .mjs extension.

이를 해결할 첫번째 방법은 간단하게 파일 단위로 확장자를 js대신 mjs를 사용하는 것이라고 한다. Node.js에서 프로젝트 내부 모듈을 불러올 때는 반드시 확장자까지 포함해줘야 한다. 이는 브라우저에서 import가 작동하는 방식과 맞춰주기 위해 의도적으로 설계된 부분이라고 하니 참고 바란다.

프로젝트 단위로 ES 모듈 적용

Node.js에서 ES모듈을 사용하는 두번째 방법이기도 한데, 바로 package.json파일 설정을 통해서 전체 파일에 적용하는 것이다.

{
  (...)
   "type":"module"
  (...)
}

여기서 헷갈리는 것이 있다면, 프로젝트 참여할경우 자동으로 import를 불러오는 경우가 대부분이었다. 그때는 별다른 확장자가 없었는데, 그 이유는 TypeScript라 그런 것으로 추정한다.(정확한 소스가 아니라ㅠ)

마치면서

import키워드가 어떤 의미인지 알아보다가 module에 대해서 정리해야할 필요성이 생겼다!

참조

[import, MDN]

[import, MDN]

[자바스크립트 ES6 모듈 내보내기/불러오기 (import), DaleSeo.com]

[자바스크립트 CommonJS 모듈 내보내기/불러오기 (require), DaleSeo.com]

[Node.js에서 ES 모듈(import/export) 사용하기, DaleSeo.com]

profile
개발자준비중

0개의 댓글