01.Javascript 모듈화(ES6 ECMAScript6)

자바스크립트 모듈화에 대해 알아보던 도중 발견.

자바스크립트를 객체지향처럼 사용이 가능하네? 란 생각에 조금 신기했다.

다른 사람들 글을 참고하니 문법만 많고 자바스크립트 초보는 어떻게 호출해야하는지 남긴 글은 없는 것 같다.

 

<script type="module">
	<!-- import { months, MODULES_BECAME_STANDARD_YEAR, sayHi, User } from '/js/commonfunc_nhm.js'; -->
    import * as common_func from '/js/commonfunc_nhm.js';
	common_func.sayHi('hi!');
</script>


/*//배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 함수 내보내기
export function sayHi(user) {
    alert('Hello! `user`');
  }
  
// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
  */
  
//배열 내보내기
  let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  // 상수 내보내기
  const MODULES_BECAME_STANDARD_YEAR = 2015;

  // 함수 내보내기
  function sayHi(user) {
      alert(`Hello, ${user}!`);
    }
    

  // 클래스 내보내기
  class User {
    constructor(name) {
      this.name = name;
    }
  }
  
  export { months, MODULES_BECAME_STANDARD_YEAR, sayHi, User };

 

참고사이트

https://woowabros.github.io/experience/2017/12/01/es6-experience.html

신선함으로 다가온 ES6 경험 - 우아한형제들 기술 블로그

 

https://blog.naver.com/PostView.nhn?blogId=bkcaller&logNo=221372359394&parentCategoryNo=&categoryNo=183&viewDate=&isShowPopularPosts=true&from=search

[ES6]19 - ES6 모듈(Module) , as로 별칭 , * 모든 API , 기본값 export defalut, 기명값 export