JS에서 Module 사용하기
JS 도 Module 을 지원 합니다!
다른 사람이 만든 기능을 활용 할 때, 매번 코드를 받아서 붙여 넣기는 귀찮겠죠?
이럴 땐, 파일로 받아서 사용하는 편이 더 편할 겁니다!
그래서 JS도 파일을 Module 로 불러와서 사용이 가능합니다!
그런데 방법이 2가지가 있습니다! (CommonJS 방식 / ES6 방식)
CommonJS방식
Node.js 에서 사용되는 모듈 방식 입니다!
키워드로는 require / exports 를 사용합니다. (불러올 때 / 내보낼 때)
Require 로 모듈을 불러 올 때, 코드 어느 곳에서나 불러 올 수 있습니다!
-
전체 모듈로써 내보내고, 전체를 하나의 Obj 로 받아서 사용하는 방법
-
내보내고 싶은 것(변수, 함수, 클래스 등등)에 exports 를 붙여서 내보내고, 각각을 따로 선언해서 가져 오는 방식
-
구조 분해 문법 사용할 수 있다.
화살표 함수 축약
const animals = ['dog', 'cat', 'bear'];
function showAnimals() {
animals.map((el) => console.log(el)); // 화살표 옆에 중괄호 조차 없으면 return함수까지 화살표로 축약한 것.
}
// 위와 같은 함수
function showAnimals() {
animals.map(function (el) {
return console.log(el);
});
}
ES6 방식
2015년에 ES6 가 업데이트 되면서 추가 된 방식입니다.
사실 ES6 는 브라우저에서 구동되는 JS에 대한 문법이라서 Node.js 에서는 사용하려면 별도의 처리가 필요합니다!
예전에는 파일 확장자를 ~~.mjs 로 처리해서 구분
요즘에는 package.json 에 아래의 문구를 추가해 주면 사용이 가능합니다!
ES6 는 CommonJS 처럼 전체를 내보내는 방식이 존재하지 않으며, 필요한 모듈을 설정해서 원하는 것만 내보내고 받는 방식을 씁니다!(사실 CommonJS도 그렇게 변경이 되었습니다!)
-
선언부에 Export 사용하기
구조분해 할당으로
-
마지막에 Export 사용하기
-
import
-
가져올 것들이 많으면
*as를 사용
단, 보통의 경우는 가져올 것을 확실히 명시하는 편이 좋습니다!
메모리 효율 및 처리 속도가 올라갑니다!
-
모듈 이름 바꾸기(import)
모듈 이름을 바꾸고 싶으면모듈이름 as 새로운모듈이름으로 변경이 가능(import, export 동시 적용 가능)
-
모듈 이름 바꾸기(export)
모듈 이름을 바꾸고 싶으면모듈이름 as 새로운모듈이름으로 변경이 가능(import, export 동시 적용 가능)
-ES6방식: export default
CommonJS 에서 본 것 처럼, 모듈은 크게 2가지 방법으로 작성 됩니다.
1. 복수의 export 가 있는 라이브러리 형태의 모듈
2. 파일 하나의 하나의 개체(Obj, Class)만 있는 모듈
보통 파일 하나에 하나의 큰 기능을 커버하는 클래스 또는 Obj 를 만드는 2번의 방법을 선호합니다!
따라서, 이런 파일에는 export default 라는 문법으로 모듈을 내보냅니다!
즉, 해당 파일에는 모듈 개체가 하나만 있다! 라고 알려주는 역할을 합니다
Export default 로 내보내진 모듈을 Import 할 때에는 {} 를 사용하지 않고 불러옵니다!
ES6방식을 사용하려면 pakage.json에
"type": "module".이 있어야 하고,
CommonJS를 쓰려면 위의 내용이 없어야 한다.
CommonJS와 ES6의 차이점
CommonJS 는 Node.js 에서 사용되고 require / exports 사용
ES6 는 브라우저에서 사용되고 import / export 사용
ES6를 Node.js 에서 사용하고 싶으면 package.json 에 "type": "module" 추가 필요
Require 는 코드 어느 지점에서나 사용 가능 / Import 는 코드 최상단에서만 사용 가능
하나의 파일에서 둘 다 사용은 불가능!
일반적으로 ES6 문법이 필요한 모듈만 불러오는 구조를 가지기에 성능이 우수, 메모리 절약 그런데 CommonJS 도 해당 문법이 추가 되었음!
⚠ import와 require 공부하기~
