ES5 | ES6 import/export, CommonJs require 방법

프론트 엔드 쪽에서는 ES5, ES6를 주로 사용하고 백엔드 express 같은 경우 commonJS를 사용한다.

 

1. ES5, ES6 [ export (name, default) | import ]

 

export : 모듈로  내보내기 

사용법 : 

export default와 export name 방식이 존재 한다.

export default

export default는 파일 하나에 하나의변수 또는 클래스만 있다고 개발자에게 명확하게 알려 주는 기능과

export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

export default { User }

{ }가 없이 User를 export 할 수 있다. 

 

import 할 때 이름을 변경 해 서 받 을 수도 있다  

 

export name

파일 하나에 복수의 변수 또는 클래스가 존재 할 수 있고, 한 개 일 수 도있다.

함수의 이름을 설정한 그대로 import해서 받어야 한다. 

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

 

 

import: 모듈 가져오기

사용법 :  import는 2가지 방법이 있다.

import  { } from './000.js'

일반적인 import 사용

import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

가져 올게 많을 땐 * 사용

import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

import { } as 000 from './000.js'

as를 사용하여 이름을 바꿔 가져오는 방법

sayHi => hi 

sayBye => bye

import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

 

2. commonJS [ module.exports | require ]

 

commonJS는 [ module.exports | require ]

 

module.exports : 모듈로  내보내기 

사용법 :

module.exports

const sayHi = (user) => {
  alert(`Hello, ${user}!`);
}

const sayBye = (user) => {
  alert(`Bye, ${user}!`);
}

exports = { sayHi, sayBye }

출처 : https://ko.javascript.info/import-export#ref-353