본 게시물에서 소개할 내용은 ES6의 import와 export 이다. nodeJS의 require과 exports가 아니다
자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지 ( require / exports ) 와 ( import / export ) 키워드를 접하게 되는데, 이 둘은 비슷하면서도 달라 가끔 자바스크립트 개발하는데 있어 혼동을 준다.
둘다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 지니고 있다.
※export의 경우 헷갈리게 단수 export(ES6)와 복수 exports(Nodejs:CommonJS)이다
( require / exports ) 는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다라고 볼수 있다.
( import / export ) 는 ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다.
IMPORT / EXPORT module (ES6)
모듈 = 자바스크립트파일
기존 모듈의 단점, <script src=‘a.js’>로 모듈을 여러개 불러오면 변수를 공유하므로 유지보수나 버그등으로 좋지않음
위의 단점 해결 방안 <script type=‘module’ src=‘’a.js>console.log(b)</script> 이렇게 하면 해당 스크립트 안에서만 변수b가 사용되기에 2의 문제가 사라짐
위의 3번을 조금 더 개선하면 아래의 결과가됨
<script type=‘module’ src=‘a.js’>
import b from ‘./a.js’
console.log(b)
</script>모듈시스템 종류
ES module방식
-Es6(2015)부터 만들어졌다
-import할 scrip태그에 type=‘module’를 추가하는것만으로 사용가능하다
//1-1 (내보낼 데이터)
//a.js
<script type=‘module’>
export const a= 1;
export const b= (c)=>console.log(c);
export default const e= (f)=>console.log(f);
<script>//1-2 (일반 export)
//b.js
<script type=‘module’>
import {a,b} from ‘a.js’
console.log(a) // 1
console.log(b(3)) // 3
<script>//1-3 (별칭사용)
//c.js
<script type=‘module’>
import * as d from ‘a.js’
console.log(d.a) // 1
console.log(d.b(3)) // 3
<script>//1-4 (일반 export default)
//b.js
// 한 모듈당 하나만 사용가능
// {} 대괄호 사용없이 변수로 바로 사용가능
<script type=‘module’>
import e from ‘a.js’
console.log(e(5)) // 5
<script>//1-5 (export default 로 변수 여러개 합쳐서 내보내기)
// k.js
<script type=‘module’>
const a =1;
const b = (c)=>console.log(c);
export default { a,b }
<script>// m.js
<script type=‘module’>
import newName from ‘k.js’
console.log(newName.a) // 1
console.log(newName.b(6)) // 6
<script>2.CommonJS방식
-NodeJs의 모듈을 사용하기 위해서 만들어짐
-NodeJs에서도 EsModule사용가능함, package.json -> type=‘module’선언
-export. 으로 내보내고 require()로 import함
//2-1 (내보낼 데이터)
//a.js
<script type=‘module’>
export.a= 1;
export.b= (c)=>console.log(c);
<script>//2-2 (일반 export 방법1)
//b.js
<script type=‘module’>
const {a,b}=require(‘./a.js’)
console.log(a) // 1
console.log(b(2)) // 2
<script>//2-3 (일반 export 방법2)
//c.js
<script type=‘module’>
const d=require(‘./a.js’)
console.log(d.a) // 1
console.log(d.b(2)) // 2
<script>//2-4 (module.exports 로 변수 여러개 합쳐서 내보낸다 )
//d.js
<script type=‘module’>
const a= 1;
const b= (c)=>console.log(c);
module.exports = { a,b }
<script>//e.js
<script type=‘module’>
const {a,b}=require(‘./d.js’)
console.log(d.a) // 1
console.log(d.b(2)) // 2
<script>