🤔 모듈 시스템이란?
쇼핑몰을 만들어야 한다고 가정해보자
쇼핑몰 내에는 회원 관리 기능 ,장바구니 기능 ,결제 기능 등이 있다
이 모든 기능을 한 파일에만 작성한다면?
코드가 매우 길어지고 복잡할 것이고
버그 수정이나 기능 개선을 위해 수정을 해야할 때
수정을 해야 할 부분이 어디인지 모르게 되므로 효율이 매우 떨어지게 된다.
이것을 생산성이 떨어진다고도 한다.
그래서 보통 여러가지 기능들을 구현할 때 기능의 대한 건 파일
기능마다 각각의 파일로 구현을 하는 방식이 일반적이다.
이렇게 하면 특정 기능에 버그가 생겼을 때 해당 파일만 수정하면 되기 때문에
생산성이 좋아지게 된다.
이렇게 각각의 기능에 대한 JavaScript 파일들을 모듈이라고 부른다.
각 파일마다 이렇게 그 파일이름을 따와서 "기능이름" 모듈이란 명칭으로 부른다.
모듈을 생성하고 , 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템을
모듈 시스템(Module System)이라고 부른다.
JavaScript의 모듈 시스템에는 Common Js(CJS), ES Module(ESM),AMD,UMD 등이 있다.
💻 CJS(Common JS) 활용 실습 예제
만든 math 모듈인 add와 sub를
module이라는 내장 객체의 exports라는 프로퍼티 값으로 객체를
저장을 해줄 것이다. 이 객체안에 프로퍼티로 내보내고 싶은 값을 넣어주면 된다.
만든 두개의 함수를 내보내려면
이런식으로 작성해주면 된다.
또 이 때 내보낼 때 key: value 부분에서 key 값과 value가 명칭이 똑같다면?
이런식으로 생략해서 적어서 내보내도 정상적으로 내보낼 수 있다.
이렇게하면 만든 두개의 함수가 CJS(Common JS) 에 의해서 내보내지게 된다.
내보내진 값들은 다른 index 같은 모듈에서 내장함수인 require를 이용하여
모듈의 경로를 인수로 전달하여 불러와서 사용할 수 있다.
index.js 파일로 내장함수 require를 이용하여 경로를 인수로 전달해주고
터미널에서 npm run start 명령을 사용하면
math module로 부터 받아온 add, sub 함수가 잘 출력되어지는 것을 확인할 수 있다.
단순 가져온 함수명을 출력하는 것이 아니라 직접 함수를 이용해 연산을 하려면?
먼저 index.js 파일 내부의 동작을 가져온 함수 안에 인수를 넣고 호출하는 형식으로
수정해준다.
이런식으로 npm run start 명령으로 호출해보면
정상적으로 add,sub의 연산 결과가 출력되어지는 것을 볼 수 있다.
다른 방법으로 이렇게 변수에 넣어 결과를 출력할 필요없이
객체의 구조분해할당을 이용하여 간결한 작성이 가능해진다.
💻 ESM(ES 모듈 시스템) 활용 실습 예제
먼저 package.json 파일 내부에 위 라인에 ,를 하나. 추가하여
"type":"module" 부분을 추가 시켜준다.
이렇게 작성하면 이 패키지는 ESM을 사용하겠다는 뜻이다.
이렇게 ESM은 모듈로부터 어떤 값을 내보낼 때
export 뒤에 객체를 리터럴로 생성해서 내보내고싶은 값들을 담아주면 끝이다
CJS보다 훨씬 간결하다.
반대로 모듈로부터 값을 가져오려면 import {가져올 값들} from "파일의 경로";
형식으로 작성해주면된다.
터미널에 npm run start로 문제없이 두 함수를 가져온 것을 확인할 수 있다.
ESM에서는 이런식으로 다양한 방식으로 값을 내보내고 또 가져올 수가 있다.
또 한가지 방식을 설명하자면
이런식으로 내보낼 함수 앞에 바로 export라는 키워드를 붙여도
정상적으로 내보내고 받기가 가능하다.
이런식으로 하면 하나의 모듈을 대표하는 default 값을 내보내는 것이 가능하다.
내보낼 곱셈 함수를 추가적으로 만들어서 export default 키워드를 붙여주고
불러올 때 기본 함수를 불러오듯이 하면 안 되고 {}없이 하나의 기능만 적어줘야 한다
또 특별하게 불러올 이름을 multiply면 mul 이런식으로 마음대로 불러와도 무관하다.
동일한 경로면 여러기능을 불러올 때 한줄에 한번에 불러오는 것도 가능하다. 훨씬 더 간결해진다.
함수들이 정상적으로 불러와져서 결과가 출력된 것을 확인할 수 있다.
🤔 주의할 점 1 - 확장자를 명확하게 붙여줘야한다.
ESM 방식은 CJS 모듈 방식과는 다르게 가져올 때 파일의 확장자를 붙여주어야한다.
만약 붙이지않고 사용하려고 한다면?
이런식으로 파일에서 math 모듈을 찾을 수 없다는 내용의 에러가 출력된다.
ESM 방식을 사용할 때에는 반드시 확장자를 붙여줘야한다.
🤔 주의할 점 2 -모듈 시스템의 방식을 착각하면 어떻게 될까?
만약 이상태에서 위와 같이 CJS방식의 코드를 작성한 상태에서
터미널에서 npm run start을 하게 되면?
이렇게 ES 모듈에서는 require를 사용할 수 없습니다. 대신 import를 사용해야 합니다.
라는 내용의 에러가 뜨게 된다.
왜 이런 에러가 뜨냐면 기본적으로 ESM과 CJS는 함께 사용할 수 없기 때문이다.
충돌로 인하여 에러가 뜨는 것이다.
앞으로 프로그래밍시 이런 에러를 접하게 된다면 모듈 시스템 방식을 착각하지 않았는지 점검을 해보아야한다.
