JS 모듈

김민석·2021년 2월 24일
0

Immersive

목록 보기
5/30

모듈의 기본적인 사용법

const 변수 = require('모듈이름')

으로 사용하고자 하는 모듈을 갖고 온다. (python의 import)


다른 스크립트를 불러올 때

// script1.js
const module2 = require('./script2.js')
// script2.js
console.log('this is module 2');

script1.js를 실행시키면 콘솔창에 'this is module 2'가 뜬다.

module.exports가 없을 때에도 require를 통해 다른 스크립트를 불러 올 수 있는 것을 알 수 있었다.

😅하지만 이런 식으로만들면 script2.js는 아무것도 반환하지 않는다. (like return 없는 함수)😎


'모듈'로 노출시킬 때

따라서 위 코드에서 모듈을 노출시키고 싶다면 다음과 같이 하면 된다.

const module2 = require('./script2.js')
console.log(modules2) // 'this is module 2'
module.exports = 'this is module 2'

module.exports 객체에 'this is module 2'가 담기고, 이 객체는 밖에서 실행시킬 수 있는 것이기 때문으로 보인다.


변수에 관하여...

  • 각 모듈안의 변수명이 겹쳐도 다른 변수로 인식
  • 각 모듈안에 선언된 변수는 closer 함수 내부의 변수처럼 사용된다. (정확히 말하자면, 특정 모듈 전체를 실행한 값을 caching하기 때문에 라고 한다.)
    따라서,
//a.js
let counter = 0;
module.exports.increment = function(){
	counter += 1
}

//main.js
let mod1 = require('./a.js');
let mod2 = require('./a.js');

console.log(mod1.increment()) //1
console.log(mod2.increment()) //2
//같은 모듈을 두 번 불러왔지만 딱 한 번만 불러진다.

보면 a.js안의 counter 변수가 클로저 내부 변수를 참조하는 것과 똑같이 작동한다는 것을 알 수 있었다.





참고!

  • exports
    exports는 module.exports 사용을 도와주는 helper다.(따라서 exports는 module.exports를 참조할 뿐이다.)
// hello.js file
module.exports = {a: 1}
// hello-runner.js
const hello = require('./hello');
console.log(hello); // {a: 1}
// hello.js file
exports = {a: 1}
// hello-runner.js
const hello = require('./hello');
console.log(hello); // { } 💥💥💥

😄 읽어보면 알겠지만 cycles는 외부의 모듈이 서로를 참조하는 경우를 의미하는 단어로 보인다.
만약 Main.js 외부에 a,b라는 모듈이 있고, 각 모듈이 서로를 require하고 있다면, 아래와 같은 프로세스가 진행된다. (두 모듈간의 infinite loop를 방지하기 위해서)


1) a를 로딩하던 와중에 b를 import하려고 시도 함


2) b를 로딩하던 와중에 a를 import하려고 시도


3) 다시 a로 요청이 돌아오는걸 본 똘똘이 node.js는 unfinished copy of the a.js exports object를 b에게 떤져버린다.


4) b는 그 후 로딩을 완료하고 `b의 exports object가 a에게 간다.





읽을거리
CommonsJS와 AMD
https://d2.naver.com/helloworld/12864


0개의 댓글