모듈?
여러 기능들에 관한 코드가 모여있는 하나의 파일
유지보수성 / 네임스페이스화 / 재사용성의 특징을 가짐
모듈을 개발하기 위한 여러 시스템 = 모듈 시스템
모듈 시스템
common JS
자바스크립트의 공식 스펙이 브라우저만 지원
-> 서버사이드 및 데스크탑 애플리케이션에서 자원하기 위한 노력 有
다른 모듈 사용시 require 사용
모듈을 해당 스코프 밖으로 내보낼 땐 module.exports 사용
module 현재 모듈에 대한 정보를 갖고 있는 객체
id, path, parent 등 속성 有
AMD (Asynchronous Module Definition)
비동기 모듈에 대한 표준안
<body>
<script data-main = 'index.js' src = 'require.js'> </script>require.js가 로드되자마자 index.js가 실행되는 구조
UMD (Universal Module Definition)
commonJS와 AMD를 통합하기 위한 패턴
ES6
@babel/plugin-transform-modules-commonjs
-> 변환해야하는 브라우저에 적용
Node.js 사용시 타입을 모듈로 변환해주는 작업 필요
다른 모듈 사용시 import a from '/a.js' - 이때 파일형식도 같이 표기해줘야함.
모듈을 스코프 밖으로 내보내는 경우 export default a; 혹은 export {a};
default를 사용하는 경우 이 모듈 하나만 내보낼거다 같은 의미로 해석됨 여러 함수나 변수 들을 내보낼 때는 중괄호를 이용해 묶어서 내보내도록함.
PRE-FE에서 PRO-FE로🚀🪐!