- 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!
🔜 모듈
프로그램 코드를 작성하다보면 같은 내용을 반복해서 쓰거나, 관련된 내용의 코드를 합하여 하나의 기능으로 동작하도록 만들곤 한다.
하지만 매번 이렇게 작업하는건 시간적으로, 인적으로 너무 많은 리소스가 낭비된다. 효율적으로 코드를 작성하려면 필요한 기능을 미리 만들어 놓고 그 때 그 때 사용하면 될 것이다.
이 때 사용하는게 모듈이다!
🧐 모듈의 생성과 사용
자바스크립트에서 모듈을 만들 때는 주로 js 확장자를 사용한다.
HTML과 같은 마크업 언어에서 불러올 때와 Node.js와 같이 서버 호스트 환경에서 불러오는 방법이 조금 다른데, 오늘은 Node.js와 같은 서버 환경에서 생성하고 불러오는 것만 소개한다.
1) 모듈화
간단하게 원의 넓이와 둘레를 구하는 함수를 circle.js라는 파일에 만들어보자
// circle.js
const PI = Math.PI;
// 원의 넓이
exports.area = function(r) {
return PI * r * r;
}
// 원의 둘레
exports.circumference = function(r) {
return 2 * PI * r;
}파일을 만들었으면 특정 폴더에 넣어놓든지, index.js 혹은 main.js 파일과 같은 경로에 둔다.
2) 모듈 불러오기
index.js나 main.js에서 위에서 만든 circle.js 파일을 불러온다.
이 때! ES6와 CommonJS 방식이 다르다. 먼저 CommonJS 방식으로 설명하고, 아래에서 두 방식의 차이점을 얘기하겠다.
// index.js or main.js
const circle = require('./circle.js');
console.log(`반지름이 4인 원의 넓이는 ${circle.area(4)}이고, 원의 둘레는 ${circle.circumference(4)}이다.);
// 반지름이 4인 원의 넓이는 50.2654이고, 원의 둘레는 25.1327이다.이처럼 사용법은 간단하다. 내가 주로 사용할 만한 함수나 코드를 미리 js파일로 만들어 놓고, 원하는 때에 원하는 위치에서 코드를 불러올 수 있다!
3) 라이브러리
프로그래밍 할 때 빠질 수 없는 라이브러리도 모듈과 비슷한 개념이다.
모듈이 작음 기능을 담당하는 코드라면, 라이브러리는 이런 모듈들이 합쳐진 하나의 코드 집합이라고 볼 수 있다. 라이브러리의 종류는 너무나 많고 다양해서, 유행을 타서 인기가 많은 것도 있고 시간이 지나면서 지원하지 않는 것도 있다.
Node.js에서 자주 쓰는 라이브러리(패키지)는 npm 트렌드에서 찾아볼 수 있다. 라이브러리 자체에 대한 자세한 설명은 구글링이나 npm 사이트에서 찾아보는 걸 추천한다.
🔚 CommonJS vs ES6
아까 모듈을 불러오는 과정에서 ES6와 CommonJS간에 차이가 있다고 얘기했다. 어떻게 다른 것일까?
(ES6와 CommonJS의 차이는 생략)
1) CommonJS
CommonJS에서는 위에 설명한 것처럼 require로 모듈을 불러오고 exports로 모듈을 배출한다. Ruby라는 언어와 비슷한 성격을 지닌다.
Node.js 환경에서 정식으로 지원하는 방식이기 때문에 별도의 설치나 설정 변경이 필요없다.
2) ES6
ES6에서는 import로 모듈을 불러오고, export로 모듈을 배출한다. Java와 Python과 비슷한 성격을 지닌다.
Node.js에서 정식으로 지원하지 않기 때문에 packacge.json 파일에서 type을 입력 해야한다.
// pacakage.json
{
"name": "test",
"version": "1.0.0",
...
"type": "module"
}맨 아래에 있는 "type": "module"만 추가하면 ES6 문법을 사용할 수 있다.
3) 차이점
비슷하지만 주요 차이점으로는 아래와 같다. (블로그[1] 참고)
- require()는 특정 위치에서 불러와도 남아있지만, import()는 항상 맨 위로 이동
- require()는 프로그램 어느 지점에서나 호출할 수 있지만, import()는 파일의 시작 부분에서만 호출할 수 있음
- 하나의 프로그램에서 두 문법을 동시에 사용할 수 없음
- 일반적 import()는 사용자가 필요한 모듈 부분만 선택하고 로드할 수 있기 때문에 require()보다 성능이 우수하며 메모리를 절약
& 자바스크립트 참고 강의 링크
주석
