Js를 구동하는 환경
- 브라우저 (ex) Chorome)
- Node.js
모듈 시스템
모듈이란 관련된 객체들의 집합소.
브라우저 : ES2015모듈
Node.js : CommonJS, AMD...
왜? 모듈을 사용하는 것 일까?
코드가 복잡해지면 해당 변수들에 대한 접근에서 충돌이 발생 하는 것을 막을 수 있기 때문
ex)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src ='./a.js'></script>
<script src ='./b.js'></script>
<body>
<script >
console.log(a);
</script>
</body>
</html>a.js
let a = 100;b.js
let a = 1000;이럴경우 해당 결과는 b.js:1 Uncaught SyntaxError: Identifier 'a' has already been declared 이와같이 충돌이 발생한다.
모듈의 사용법 (브라우저)
- script의 경우 type을 modole로 설정
- script내의 내용은 import로 다른 파일에서 받아와야 한다.
- 해당 가져올 파일에서는 export를 설정해야 한다.
ex)
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script type="module"> //1.
import {welcome} from './greeting2.js'; //2.
alert(welcome());
</script>
</body>
</html>greeting2.js
function welcome(){ return 'Hello world'; }
export {welcome}; //3.require 사용법 (Node.js)
module.exports 이다. export아니고
export.js
module.exports.number = 0;
module.exports.count = function(number){
this.number++
}
module.exports.see = function(){
console.log(this.number);
}
import.js
var module = require("./export.js");
module.count();
module.see();Node.js로 실행할 경우 import.js를 실행할경우 1이 출력된다.
나의 하루를 가능한 기억하고 즐기고 후회하지말자