모듈

모듈
관련 함수, 변수, 객체, 클래스 등을 한 파일로 그룹화 한 것
재사용할 수 있는 함수, 객체 또는 원시값
export 키워드를 사용해서 모듈 생성
다른 파일에서 사용할 수 있게 함
import 키워드로 다른 파일에서 함수를 불러와 사용 가능

자바스크립트의 실행 환경은 브라우저 환경과 Node 환경이 존재
Node 환경에서의 import 방식은 CommonJS 방식과 ES6 방식 존재
React 개발환경은 대부분 ES6에서 게시된 방법 사용
여러 스크립트에서 동일한 함수 이름을 사용하더라도 

모듈을 사용하면 각 스크립트에서 정의된 함수는 해당 모듈 내에서만 유효

사용하는 이유:
<script> 태그를 사용하면 버그 가능성을 높임
(<script태그를 사용하면 파일간 종속성과 로딩 순서를
수동으로 관리해야 하는데 이 방식은 프로젝트의 규모가 커질수록
종속성을 추적하고 관리가 어려워지며 버그 가능성을 높임)
<!--- 전통적인 스크립트 로딩방식 -->
<script src = "jquery.js"></script>

<!-- 이 스크립트는 jquery.js에 의존-->
<script src = "plugin.js"></script> 

<!--이 스크립트는 plugin.js와 jquery.js에 의지-->
<script src = "app.js"></script> 
// 위에서 아래로 흐르기 때문에

모듈 시스템
import $ from 'jquery';

// 자동으로 jQuery에 대한 의존성을 처리
import plugin from 'plugin'; 

// 모든 의존성이 충족되면 실행
import app from 'app'; 


모듈 이름 바꾸기 (별칭 사용)
import { square as sqr } from '.utils.js';
console.log(sqr(4); // 16
// .utils.js라는 파일의 square함수명을 sqr로 변경
// 변경한 함수명을 사용
// export default를 통해 내보내진 모듈은 import시 이름 변경이 가능
// 특정 경로에서 가져온 (import) 값은 하나밖에 존재하지 않기 때문에

 이름을 명시하지 않아도 특정할 수 있음

import multiply from './math.js';
console.log(multiply(6, 7)); // 42
// './math.js 파일에서 불러오는거니까 중괄호 없어도 됨
// 이름을 바꿔도 이름을 바꿔도 상관 없음

import * as MathFunctions from ./math.js';
console.log(MathFunctions.add(10,5)); // 15
console.log(MathFunctions.multiply(10, 5) // 50
// 300개 import해야하면 일일이 해줄 수 없으니까