Javascript Module
Javascript Module
by jihoon kim
HTML
<h1>Javascript Module</h1>
<pre id="contents">
<span style="font-family: Consolas">
<span style="color: #000000">※ 참고 : https:</span><span style="color: #008000">//github.com/codepink/codepink.github.com/wiki/자바스크립트-모듈,-모듈-포맷,-모듈-로더와-모듈-번들러에-대한-10분-입문서</span>
<span style="color: #000000"># 자바스크립트 모듈</span>
<span style="color: #000000">모듈 포맷</span>
<span style="color: #000000">모듈 로더</span>
<span style="color: #000000">모듈 번들러</span>
<span style="color: #000000">- 코드 추상화 : 특수한 라이브러리에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.</span>
<span style="color: #000000">- 코드 캡슐화 : 코드를 변경하지 않으려면 모듈 내부에 코드를 숨긴다.</span>
<span style="color: #000000">- 코드 재사용 : 같은 코드를 반복해서 작성하는 것을 피한다.</span>
<span style="color: #000000">- 의존성 관리 : 코드를 다시 작성하지 않고도 쉽게 의존성을 변경한다.</span>
<span style="color: #000000"># 노출식 모듈 패턴</span>
<span style="color: #000000">:: 즉시 실행 함수 표현식(IIFE : Immediately Invoked Function Expression)</span>
<span style="color: #000000">(</span><span style="color: #0000ff">function</span><span style="color: #000000">(){</span>
<span style="color: #008000">// ...</span>
<span style="color: #000000">})()</span>
<span style="color: #000000">:: 노출식 모듈 패턴</span>
<span style="color: #008000">// Expose module as global variable</span>
<span style="color: #0000ff">var </span><span style="color: #000000">singleton = </span><span style="color: #0000ff">function</span><span style="color: #000000">(){</span>
<span style="color: #008000">// Inner logic</span>
<span style="color: #0000ff">function </span><span style="color: #000000">sayHello(){</span>
<span style="color: #000000">console.log(</span><span style="color: #ff00ff">'Hello'</span><span style="color: #000000">);</span>
<span style="color: #000000">}</span>
<span style="color: #008000">// Expose API</span>
<span style="color: #0000ff">return </span><span style="color:...