[TIL.12]Java Script- Module

자바스크립트 모듈은 코드들을 재사용할수있게 해준다.

• 모듈은 코드의 재활용성을 높이고, 유지보수를 쉽게 해준다.
• 코드를 여러개의 파일로 분리 할 수 있다.
• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용 할 수 있다.
• 한 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션 동작이 개선된다.

module.exports

let Menu = {};
Menu.specialty = "Roasted Beet Burger with Mint Sauce";
 
module.exports = Menu; 
//파일명: menu.js 

let Meun = { }; Menu라는 모듈을 대표하는 객체를 만든다. 모듈 이름은 대문자로 시작해야된다.

Menu.specialty는 Menu 모듈의 porperty 로서 정의된다. 객체에 대한 property 를 설정하고, value에 property를 주면서 Menu 라는 객체에 데이터를 더할 수 있다.

"Roasted Beet Burger with Mint Sauce";는 Menu.specialty property에 저장된 value 이다.

module.exports = Menu; 모듈로써 객체인 Menu를 추출할 수 있다.
module 모듈을 대표하는 변수이고, expoerts는 객체로써 모듈을 드러내는 것이다.

require

다른 파일에 있는 모듈을 추출하는 법
require() 함수는 모듈을 불러온다.

const Menu = require('./menu.js');
 
function placeOrder() {
  console.log('My order is: ' + Menu.specialty);
}
 
placeOrder();
//파일명: order.js

require() 은 다른 파일에서 모듈을 불러온다. (즉, 여기서는 menu.js에서 불러온다.)

module.exports
내보낼때 사용. (다른 파일로 내보낼때) (es5)

(여기까지 es5)

---

(여기서부턴 es6)

export default

export default

let Menu = {};
 
export default Menu;
// export default 객체명(불러올)

하나의 파일에서 단 하나의 변수, 클래스만 내보낼 수 있다.
var, let, cont 를 바로 export default 할 수 없음

import

import
불러올때 사용. (불러오는것)

import Menu from './menu';
//import 변수명 from 파일위치/파일명

from 은 로드될 모듈이 어디에 있는지 알려줌

---

named exports

export
변수를 사용해서 데이터를 내보낸다.
(named export)

let specialty = '';
function isVegetarian() {
}; 
function isLowSodium() {
}; 
 
export { specialty, isVegetarian };

named export는 한 파일 내에서 여러 변수, 클래스를 내보내는것이 가능하다.

named import

import { specialty, isVegetarian } from './menu';
 
console.log(specialty);

여러 변수, 클래스를 받아 올 수 있다.

//export

export let specialty = '';
export function isVegetarian() {
}; 
function isLowSodium() {
};

//import
import { specialty, isVegetarian } from 'menu';

named export는 선언하자마자 내보내는 특징이 있다. 변수선언(var,let,connst) 앞에 export 키워드를 작성하면 된다.

import {받아올 변수, 함수명등} from 파일명