require와 import의 차이점

require와 import의 차이는 무엇인가?

• 자바스크립트 코드를 작성하면, 상단 부에 다음과 같은 코드를 작성한 적이 있을 것이다.

  const inp = require('fs')
  

  import pkg from "./package.js"  
  

• 둘은 공통적으로, 외부 파일이나 라이브러리 코드를 가져오는 기능을 하는 모듈 키워드이다.
• 그런데, 이 둘은 어떤 차이점이 있을까?

---

require vs import

• require는 CommonJS를 사용하는 Node.js문이고, import는 ES6(ES2015)에서 사용한다.
  
  • 여기서, CommonJS는 Node.js의 표준이다.
    따라서, 웹 브라우저 밖의 자바스크립트의 표준으로 제시된다.
  • ES6는 아직 브라우저들이 완벽히 지원하지 못하는 시스템이다.
    따라서, 별도의 번들러가 필요하다는 단점이 존재하지만
    성능면에서 비교적 우수하다는 평가를 받는다.

• require는 파일에 저장된 위치에 남아 있으며,
  import는 항상 최상단으로 이동한다.

• require는 파일의 어느 지점에서나 호출 할 수 있지만,
  import는 파일의 시작 부분에서만 실행할 수 있다.(but, 별도의 전용 비동기 문법 존재)

• import는 사용자가 필요한 모듈 부분만 선택해서 불러올 수 있다.
  따라서, require에 비해 성능적 우수와 메모리 절약이 가능하다.

---

require와 import의 사용법

• require

  const jg = require('jaegeon'); 
  

  CommonJS 방식으로, 다른 변수에 할당하듯이 불러온다.

• import

  import jg from "jaegeon"  
  

  ES6 방식으로, 좀 더 명시적인 방법이다.
  최근 많이 사용되는 방법이나, 아직까지 100% 대체되어 사용될 수 없다.
  앞서 말했듯 별도의 번들러 도구를 사용하고, 없으면 사용 불가능하다.

---

require & import 정리

require	import
CommonJS 시스템	ES6(ES2015) 시스템
저장된 위치에 남음	항상 최상단으로 이동
어디서나 호출 가능	시작 부분에서 실행 (별도의 문법으로 해결 가능)
범용적인 시스템으로 표준 시스템으로 동작	필요한 부분만 선택해서 불러오기 가능 비교적, 성능적 우수 & 메모리 절약 가능

---

✨ 출처

require vs import 문법 비교 (CommonJS vs ES6)
The Complete Guide to JavaScript Module Standards: From CommonJS to ES6 and Beyond

---