CommonJS 와 ES(6) 모듈 키워드 ( require vs import ) 차이

📍  공부하게 된 계기

 

require 와 import 의 차이가 궁금해서 파보다가 ... CommonJS 와 ECMAScript 까지 살펴보게 되었다.

하면서 느낀거지만, 자바스크립트를 사랑하는 개발자가 많은 것 같다.

자바스크립트의 무한한 잠재력에 놀라면서도, 그걸 확장시키는 개발자들이 있기에 내가 이렇게 편하게 

코딩을 할 수 있는 게 아닌가 싶다 ㅎ

 

 

📌  CommonJS

 

자바스크립트 언어의 활동 영역을 더 넓히기 위해 조직된 그룹이다.

---

브라우저 이외에도

 

✔  Server-side JS applications 

✔  CLI tools

✔  Desktop GUI-based applications

✔  Hybrid applications

 

등 다양한 어플리케이션에 자바스크립트 언어가 쓰일 수 있도록 표준화된 라이브러리를 제공한다.

( Python, Ruby, Java 와 같이 라이브러리가 풍부한 언어를 본받아

다양한 자바스크립트 API를 만들어 제공하는 것 같다 )

 

📎  Server-side JS 주요 쟁점

 

자바스크립트가 브라우저용 언어일 때 가졌던 한계점들

 

🔹  서로 호환되는 표준 라이브러리가 없다.

🔹  DB를 연결할 수 있는 표준 인터페이스가 없다.

🔹  다른 모듈을 삽입하는 표준적인 방법이 없다.

🔹  코드를 packaging 하고, 배포하고, 설치하는 방법이 필요하다.

🔹  dependency 문제를 해결하는 공통 패키지 모듈 저장소가 필요하다.

 

-->  결국 " 모듈화 " 가 필요하다.

-->  CommonJS 의 주요 명세는 이 모듈들을 어떻게 정의하고,

       어떻게 사용할 것인지에 대한 고민의 결과라고 할 수 있다.

 

📎  모듈화

 

🔸  Scope  :  모든 모듈은 각자의 독립적인 실행 영역이 있어야 한다.

 

// fileA.js

var a = 5;
var b = 7;

// fileB.js

var a = 10;
var b = 1;

// 자바스크립트 언어는 파일마다 독립적인 스코프가 있기 때문에, 
// 파일 하나에 모듈 하나를 작성하면 다른 파일에 있는 모듈과 충돌이 생기지 않는다.
// 같은 이름의 전역 변수를 다른 파일에 각각 작성했을 때 오류가 생기지 않음 !

 

🔸  Definition  :  모듈 정의는 exports 객체를 이용한다.

 

// fileA.js

var a = 5;
var b = 7;

exports.sum = function(num1, num2){
  return a + b + num1 + num2;
};

// fileB.js

var a = 10;
var b = 1;

// fileA.js 처럼 export모듈(전역 객체)을 사용하게 되면, 해당 모듈이 외부로 공개된다.
// 다른 파일들은 공개된 이 모듈을 불러와 사용할 수 있게 된다.

 

🔸  Usage  :  모듈 사용은 require 함수를 이용한다.

 

// fileA.js

var a = 5;
var b = 7;

exports.sum = function(num1, num2){
  return a + b + num1 + num2;
};

// fileB.js

var a = 10;
var b = 1;

var moduleA = require("fileA");

moduleA.sum(a, b);  // 5+7+10+1 = 23

// require() 함수를 이용해 exports로 인해 공개된 모듈을 불러올 수 있다.
// 함수 sum은 선언된 환경을 기억하기 때문에 fileA의 a와 b 값을 가져올 수 있다.

 

※ 요즘 var 변수 선언 키워드는 잘 안쓰지만, 전역 변수임을 강조하기 위해 사용했다 !

 

이처럼 CommonJS 는 현재 실질적인 표준 역할을 하고 있다.
대표적으로 Node.js 가 이 명세를 따르고 있다. ^___^

 

 

📌  ECMAScript

 

Ecma international 에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다.

ECMAScript specification ( ECMAScript 사양 ) 이라고도 부른다.

스크립트 언어가 준수해야하는 규칙, 세부 사항, 지침을 제공한다.

 

자바스크립트는 이 ECMAScript 사양을 준수하는 범용 스크립트 언어이다.

---

📎  사용 예시

 

자바스크립트는 자바스크립트 엔진이 읽고 실행한다.

자바스크립트 엔진의 종류에는

✔ 구글의 V8,

✔ 모질라 파이어폭스의 SpiderMonkey,

✔ 마이크로소프트 엣지의 Chakra 등이 있다.

 

📍

각 엔진은 모두 자바스크립트 언어를 읽고 해석할 수 있지만 수행 능력 (Performance) 이 차이난다.

자바스크립트 언어를 처리하는 로직이 각자 다르기 때문이다 !!

 

📍

또한 각 엔진이 지원하는 ECMAScript 사양이 다르다.

누가, 얼마나 최신 버전을 지원하는지, 폭 넓은 다양성을 추구하는 지에 따라 해석의 폭이 달라진다.

그래서 " ECMAScript 호환성 " 이라는 단어가 나오는 것이다.

자바스크립트 엔진을 담당하는 회사의 업데이트에 따라 쓸 수 있는 자바스크립트 문법의 종류와 양이 달라진다 ㅋㅋ wow

" 이 브라우저는 어떤 버전의 ECMAScript 를 지원하나요 ? "
" ECMAScript 의 어떤 기능을 지원하나요 ? "

등의 질문을 할 수 있다 !!

.

.

.

.

💥 ECMAScript 호환성 문제를 해결하기 위해 나온게 Babel ... 💛💪

 

 

📌  require 와 import 차이 ?

 

아니 그래서 require 랑 import 의 차이가 뭐나구 ..!

require 은   CommonJS 의 함수
import 는 ES6 의 키워드

 

✔  require

 

const mysql = require("mysql");

 

CommonJS 의 함수로, 원하는 모듈을 불러올 수 있다.

ES6 사양을 지원하지 않는 환경이거나, Babel 과 같은 인터프리터가 없을 땐 require 을 사용해야 한다.

 

 

✔  import

 

import mysql from "mysql"

 

ES6 의 키워드로, 원하는 모듈을 불러올 수 있다.

 

 

📍  추가로 공부할 것

 

CommonJS 와 ES6 는 근본적으로 모듈을 내보내고 불러오는 방식이 다르다.

ES6 은 CommonJS 에서 지원하지 않는 Named Parameter 기능도 있으니, 두 방식의 차이점 익혀놓을 것.

 

 

 

 

 

 

 

참조

 

https://www.daleseo.com/js-module-import/

https://d2.naver.com/helloworld/12864

https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html