이번 시간에는 모듈에 대해서 알아보자!!
모듈은 node.js에서 제공하는 기능 중에 하나인데, 자신이 쓰고 있는 code가 너무 길다 싶으면, 잘게 잘게 쪼갤 수가 있다.
[ C++ 하셨다면, header file로 생각하면 된다. ]
일반적으로는 파일당 100줄이 넘어가면, 다른 파일로 쪼갠다고 한다.
코드들을 쪼개서 좀 더 관리하기 쉽게 만들자는 취지에서 "묘듈"이라는 개념이 등장했다.
예시를 한 번 만들어보자
module.exports
안에 할당을 해서 넘겨주면 된다.참고로,
odd
<=>odd : odd
,even
<=>even : even
둘은 같은 의미이다.
최신 문법에서는 키값과 value 값이 같으면 value 값은 생략이 가능하다. 단, value 값 생략은 module.exports 를 객체로 할당하는 경우에만 가능하다!! 그 외에는 찍어봤는데... 하나도 안 됨!!
본인이 쓰지는 않더라도, 이런 문법이 나왔을 때, 당황하지 않게 알아만 두자!!
이제 우리가 만든 var.js
를 func.js
에서 어떻게 받아쓸 수 있을지 확인해보자!!
console
로 찍어보면, var.js
에서 보낸 값들이 그대로 나온다.
=> 여기서 require
는 node.js
에서 기본적으로 제공해주는 함수이다. 따라서 require
에 대한 추가적인 선언 없이도 사용이 가능하다.
디렉토리 위치 나타내기
' ./var '
는 현재 내가 있는 폴더의 var.js를 가르킨다.
부모 폴더에 있는 var.js를 가져오고 싶으면' ../var '
조부모 폴더에 있는 var.js를 가져오고 싶으면' ../../var '
=> 이런 식으로 상위 폴더로 올라갈 때마다../
를 더 추가해주면 된다.
var.js
에서js
는 생략이 가능하다.
또한, var.js
에서 꼭 객체만으로 넘겨줄 필요는 없다. 배열이든 다른 타입도 가능하다.
단, 이런 경우는 odd
하나 밖에 넘겨주지 못한다.
질문 있습니다!! )
module.exports = odd;
module.exports = even;
이렇게 2번 할당해주면 되지 않을까요??
=> module.exports 는 파일당 한 번밖에 사용이 불가능하다. 따라서, 넘겨줄 파일이 2개 이상일 경우, 객체나 배열을 사용하자!!
( 배열보다 객체가 받아 쓰기 더 편하기는 하다. 흠흠!! )
다시 func.js
로 돌아와서 var.js
가 넘겨주는 것들을 받아보자.
이렇게 전통적인 방식으로 받을 수도 있지만, 코드스테이츠에서 구조 분해를 배운 사람으로써 구조 분해 할당 역시 사용해볼 수도 있다.
변수로 받아올 때는 어떤 이름으로 할당해도 상관없다.
*하지만, 구조 분해 할당으로, 받아 올때는 "속성명"이랑 "변수명"이랑 똑같아야 한다.
ex)const { gil , cho }
=require('./var');
[ 안됨!!! ]
이제 var.js
와 func.js
를 받아쓸 또다른 파일을 하나 만들어 보자!!
질문 있습니다!! )
line 2
에checkNumber
가 아니고, 받아오는 함수 명하고 똑같은 이름으로 선언하고 할당해줘야 되는 거 아닌가요??
=> 구조 분해 할당이 아니라면, 받아오는 변수의 이름은 얼마든지 달라질 수 있습니다.
지금까지 한 것을 최종적으로 정리해보면, 다음과 같다.
이렇게 module
은 js 파일
이 지나치게 길어지는 것을 막아주고, 같은 파일안에 똑같은 변수나 함수들을 중복해서 선언해 줄 필요없이, 모듈로 전송해줄 수있다는 점에서 메모리 절약과 효율성을 극대화할 수 있다는 장점을 가지고 있다.
const { odd, even } = require('./var');
function checkOddOrEven(number) {
if(number%2) {
return odd;
}
else {
return even;
}
}
// odd와 even은 다른 곳에서 받아온 변수들이다.
// 하지만, 넘겨주는 게 가능하다.
module.exports = {
checkOddOrEven,
odd,
even,
};
그러나, 이런 사용법은 썩 좋지않다.
이미 넘겨받은 변수와 함수들을 또다시 넘겨준다면, 파일들간의 중복이 발생한다.
그래서, 한 파일에 ( var.js
) 필요한 변수와 함수들을 모아놓고 모듈로 만드는 거다.
지금까지 살펴본 모듈 시스템은 Node.js에서 구동되는 모듈 시스템이다. 하지만, 안타깝게도 자바스크립트에서는 다른 방식으로 모듈 시스템을 써야 한다.
사실, 이 부분은 그냥 넘어가려다가 곧 공부하게 될 react 부분에서 많이 보게 된다고 하니, 이런 게 있다는 것만 알고 넘어가자!!
require
=> import ... from
export.module
=> export default
require
와 import
가 같은 기능을 하는 것은 아니다. 서로 기능이 조금씩 다르기 때문에, 잘못 써주면 안 바뀌는 경우도 있다고 한다.이번 블로그는 코드스테이츠의 강의 내용과 ZeroCho 블로그의 일부를 바탕으로 작성했으며, 그 어떠한 상업적 용도도 없음을 밝힌다.