[Javascript] ES6 모듈화(import/export) 사용하기

들어가기전..

ES6 문법을 Node로 실행하기
https://www.daleseo.com/js-babel6-node/
Node를 사용하면 자바스크립트(.js)을 실행시킬 수 있다. 위 블로그에 설명이 잘나와있다.(나도 따라함...ㅎㅎ 사실Vue 프로젝트 안에서만 사용해봤기 때문에.. 신기하다..)

https://www.daleseo.com/js-module-import/ <= 참고하였습니다.

Vue 프로젝트를 진행하다 보면, require 나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 볼 수 있는데 require는 뷰 설정파일(vue.config.js)에서 자주 보이고, import 는 일반 js 파일에서 자주 본다. 두 키워드 모두 동작은 똑같으며, require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 import ES6에서 새롭게 도입된 키워드이다. 모듈화에 대해 살펴보자. !!!

키워드 이름 그대로 모듈을 내보내거나(export) 가져올때(import) 사용한다.

복수 객체 내보내기/불러오기

내보내기(export)

내보내기는 Named Export 와 Default Export가 존재한다. 여러 객체를 내보낼 때는, 내보내는 변수나 함수의 이름이 그대로 불러낼 때 사용되기 때문에 Named Exports라고 부른다.

module.js

// export1
export function greeting(){
  return "Hello World!";
}

// export2
const CONSTANT = {
  "NAME": "CORN",
  "AGE": "31",
  "print": function(){
    return `${this.NAME} : ${this.AGE}`
  }
}

export { CONSTANT }

불러오기(import)

여러 객체(Named Exports)를 불러 올 때는 필요한 객체만 선택적으로 이용하거나, 모든 객체에 별명을 붙이고 그 별명을 통해 접근할 수 있다.

import { greeting, CONSTANT } from "./modules"

console.log(greeting());
console.log(CONSTANT.print());

import * as module from "./modules"
console.log(module.greeting())
console.log(module.CONSTANT.print())

>>> Hello World!
>>> CORN : 30
>>> Hello World!
>>> CORN : 30

단일 객체 내보내기/불러오기

하나의 자바스크립 모듈 파일에서 단 하나의 객체를 내보내고 불러오는 방법을 알아보자

내보내기(export)

단일 객체를 내보낼 때는 export default 키워드를 사용한다.

export default {
  greeting(){
    return "hello world!"
  },
  name: "Corn"
}

불러오기(import)

단일 객체(Default Export)를 불러올 때는 아무 이름이나 원하는 이름을 명시하고 해당 객체에 접근할 수 있다.

import corn from "./module2"

console.log(corn.greeting())
console.log(corn.name)

참고

• 하나의 모듈(파일)에서는 하나의 default export만 가능하다
• named export는 동일한 이름으로 가져올 수 있고, 이름을 바꾸려면 별칭(as)를 사용해야 한다.