Js복습 pt.5 module system

 

차린건 쥐뿔도 없지만 채령편 재밌고 이쁘다 입꼬리 씰룩씰룩

---

 

자바스크립트와 리액트를 사용하면서 무심코 사용했던 import와 export 뭐 대충 파일 내보내고 가져오는 의미아닌가?

얼추 맞았다. 하지만, module에 대한 정확한 이해와 기존의 script를 통해 파일을 주고받는 것과 무슨차이가 있는지 보도록 하자.

 

1. 모듈, 모듈시스템

애플리케이션의 기능들을 추가하다보면 당연히 규모 확장이 될 것이다.  이 경우 한 개의 파일로 통솔하기엔 어려움이 많다.파일을 여러개로 분리하게되는데 이때 이 분리된 파일을 모듈이라고한다.추가로,  이렇게 분리된 파일들을 불러올 수 있게끔 하는 것이 모듈 시스템이다.

 

자바스크립트 상에선 script태그를 통해 파일을 주고 받는데 이경우 전역스코프를 공유한다는 문제가 발생한다.

 

예시로, a.js, b.js모두 number라는 변수에 20, 10이라는 숫자를 각각 할당하고  index.html에서 두 파일을 불러오고 number을 출력 할 경우 늦게 선언된 number의 값이 나오게된다. 즉, 우리가 원치 않는결과가 나올 수 있다.

 

이러한 이유로 파일을 각각 효과적으로 분리하는 시스템이 필요해서 모듈시스템을 사용한다.

 

 

2. 모듈시스템의 장점

1. 변수명 겹쳐도 상관x 

위에서 말한 것처럼 기능을 추가, 개선하다보면 코드 양이 증가하게되고 전역스코프에 존재하는 변수명들이 겹치는 경우 발생해도
모듈만의 네임 스페이스를 가져 문제 해결 가능하다.

 

2. 코드를 필요할 때마다 재활용 가능 

우리가 반복되는 기능을 효율적으로 사용하기 위해 function을 만든 것처럼 모듈을 만들고 필요시에 가져오면 된다.

 

3.  유지 보수가 용이함

독립적으로 코드가 있기에 하나만 수정해도 이 모듈을  사용하는 다른 코드에서도 수정 반영 된다.

 

 

3. 종류와 예제

모듈 시스템 종류 여러개가 있지만 AMD, UMD, CommonJS, ES Module등 마지막에 두개를 볼 것이다. 

마지막 두개중 앞에나온 CommonJS가 Nodejs에서, ESModule이 자바스크립트에서 사용되고 있다.

 

자바스크립트 모듈방식인 ESmodule부터. 사용법은 다들 익숙할 것이다.

 

script태그에 type="module"속성 추가시 이 파일은 모듈로서 동작한다.

module을 외부서 사용 시  export, default export를 사용해서 불러올 때는 import를 통해 불러올 수 있다.

 

아 그리고 밑의 예제를 혹시나 하는 사람들이 있다면 type이 module이라면 로컬파일에서는 작동하지 않는다. 404가 뜰 것이다.서버를 통해 실행해주자 난 웹서버 크롬 이용했다.

추가로 module의경우 엄격모드로 진행되니 파일경로도 정확하게 적어주자.

 

 

예제로 파일 js파일 두개 html파일 한개를 만들었다.  

 

perfectScore라는 변수와 덧셈, 두 수의 평균을 구하는 function이 들어간 math파일 그리고 이  function들과 변수를 이용한 index.js 파일이 있다. 이 index.js는 index.html에서 module 타입으로 script했다. 

 

아 너무 덥다 블로그쓰는데 지금

 

콘솔창을 확인해보자. 예상한대로 function 기능도 잘 가져왔고 변수도 잘 가져온채로 출력된 것을 볼 수 있다.

 

오 하얘 테두리라도 그려줄걸

4. export default

export와 export defualt를 통해 파일을 내보낼 수 있는데 나도 export default를 종종 사용했다.(이유는 몰루) 무슨 차이인지 보자. 

 

모듈은 크게 두 종류로가 있다고 한다.

1. 여러개의 함수로 이루어져있는 라이브러리 형태의 모듈
2. 개체 하나만 이루어져 있는 모듈 (보통 이렇게 되어있다고 함)

2번째의 경우 export default를 사용하고 이 모듈에는 개체가 하나있어! 하고 확고하게 나타내는 것이라고 한다.

default로 불러 가져올 경우 { }없이 가져올 수 있다. + 가져올 때 User을 가져왔더라면 원하는대로 이름을 변경해서 가져올 수 있다. 

 

 

5. common js

위에서 말한 것 처럼 nodejs에서 사용하는 모듈시스템 위에서 배운 ES6과는 다르게 사용되는데.

내보낼 때는 exports, module.exports 불러올 때는 require 을 사용한다.

현재는 odejs에서도 es module이 사용 가능함. package.json에서 type="module"선언하면 된다고한다.