개발을 하다보면, import와 require 사용과 관련된 에러 메세지를 만날 때가 종종 있다.
차이점 (require / import)
CommonJS / ES6
require는 CommonJS를 사용하는 node.js문이지만 import는 ES6에서만 사용한다.
CommonJS는 서버사이드 JS가 나온 후, 표준화를 위해 정립된 모듈 표준이다. ES6는 2016년에 정립된 최신의 문법 표준이며, ES modules이라는 모듈 표준을 사용한다.
동기 / 비동기
require는 동기로 실행된다. require가 선언되면 하드웨어나 네트워크를 통해 즉시 스크립트를 실행한다. 따라서, require는 파일 경로를 지정해야 호출할 수 있다. require는 프로그램의 어느 지점에서나 호출 할 수 있다.
import는 정적으로 호출하기 때문에, 비동기로 실행된다. 따라서, import는 파일의 시작 부분에서만 실행할 수 있다. 하지만, import도 import()를 사용하면 원하는 지점에서 호출할 수 있다. 자세한 내용은 MDN에 써져 있다.
기타 등등
-
import를 선언하기 위해서는 파일이 런타임 내에 파일이 모듈로 읽어져야 된다. 따라서, HTML의<script> tag안에type="module"을 적어야 한다. -
한 프로그램 안에
require와import를 동시에 사용할 수 없다. -
require는 모듈을 전부 불러오는 반면에,import는 모듈의 필요한 부분만 로드할 수 있다. 따라서,import가 더 효율적이라고 할 수 있고, 점점 많은 라이브러리들이CommonJS의 지원을 중단하고ES modules로 넘어가는 추세라고 한다.
import의 사용예시
// getPrimes.js - import / [export]
// - Returns a list of prime numbers that are smaller than `max`.
export function getPrimes(max) {
const isPrime = Array.from({ length: max }, () => true);
...
return [...isPrime.entries()]
.filter(([, isPrime]) => isPrime)
.map(([number]) => number);
}
// [import] / export
import { getPrimes } from "/modules/getPrimes.js";
console.log(getPrimes(10)); // [2, 3, 5, 7]require 사용예시
// require / [exports]
module.exports = module;
// [require] / exports
const module = require("module");Reference
썸네일 이미지는 OpenAI의 DALL-E로 제작되었습니다.
