모듈과 모듈 시스템

dana·2021년 11월 8일
1

Javascript / algorithm

목록 보기
2/15
post-thumbnail

모듈?

여러 기능들에 관한 코드가 모여있는 하나의 파일

유지보수성 / 네임스페이스화 / 재사용성의 특징을 가짐

모듈을 개발하기 위한 여러 시스템 = 모듈 시스템

모듈 시스템

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를 사용하는 경우 이 모듈 하나만 내보낼거다 같은 의미로 해석됨 여러 함수나 변수 들을 내보낼 때는 중괄호를 이용해 묶어서 내보내도록함.

profile
PRE-FE에서 PRO-FE로🚀🪐!

0개의 댓글