코드카데미 Javascript - 모듈 내보내기 가져오기 (export, import)

 

Modules

 

자바스크립트에서 모듈이란 한 프로그램에서 추출되어 다른 프로그램에서 재사용가능한 코드 조각

 

💡 모듈을 쓸 때의 장점

• 코드의 버그를 찾고 고치기가 더 쉬워짐

• 애플리케이션의 다른 부분에서 정의된 로직을 재사용 가능

• 정보를 안전하게 지키고 다른 모듈로부터 보호함

• 전역 변수의 이름 설정으로 인한 문제들을 예방함

---

module. exports : 모듈 내보내기

 

Node에 있는 자바스크립트 파일들은 module 객체와 exports라는 속성을 갖는다. 

exports는 무엇이 파일에서 내보내져야 하는지 정의한다.

 

다음은 모듈을 어떻게 정의하고 내보내는가에 대한 예시이다.

 

let Menu = {};
Menu.specialty = "Roasted Beet Burger with Mint Sauce";

module.exports = Menu; 

 

1. Menu라는 모듈을 나타내는 객체를 만듬

2. Menu.specialty는 Menu 모듈 안에 정의되어 있는 속성임

3. 마지막 줄의 코드는 Menu 객체를 모듈로 내보낸 것

 

이를 통해 알 수 있는 모듈을 내보내는 방법

 

1. 모듈을 나타내는 객체를 만듬

2. 모듈 객체에 속성이나 메소드를 추가함

3. module.exports로 모듈을 내보냄

 

📣 모듈을 내보내는 다른 방법

 

module.exports = {
  myAirplane : "CloudJet",
  displayAirplane: function(){
    return this.myAirplane;
  }
};

 

위와 같이 직접 module.export에 객체를 할당하는 방법도 있다.

---

require() : 모듈 가져오기

 

내보낸 모듈을 사용하기 위해선 다른 파일에서 모듈을 가져오는 작업을 해야한다.

require()는 모듈을 가져오는 함수이다.

 

require()는 가져올 모듈 파일이 있는 곳의 경로를 인자로 가진다.

 

const Menu = require('./menu.js');

function placeOrder() {
  console.log('My order is: ' + Menu.specialty);
}

placeOrder();

 

첫줄에서 Menu 모듈을 가져와서 지역 변수에 할당함

 

---

ES6에서 지원하는 방법 ①

export default

 

ES6부터 지원되는 모듈을 내보내는 더 편리한 문법이지만 Node.js에는 지원하지 않는다.

역할은 module.exports와 같음

 

let Menu = {};

export default Menu;

 

import

 

import Menu from './menu';

 

require()와 같은 역할

파일 경로에 파일 확장자 안 들어가는 거 주의1

 

---

ES6에서 지원하는 방법 ②

named exports

 

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

export { specialty, isVegetarian };

 

이 방법은 각 속성들이 객체가 아니라 각 변수에 저장되어 있다는 점이 다름.

 

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

 

또, 변수의 선언과 동시에 내보내는 것도 가능하다.

참고로 이렇게 바로 export해도 나중에 따로 import하지 않으면 쓸 수 없다.

 

export { specialty as chefsSpecial, isVegetarian as isVeg, isLowSodium };

 

이렇게 as를 써서 변수의 이름을 바꿔서 내보내는 것도 가능 (alias 사용)

단, 나중에 import 할 때도 바꾼 변수명을 사용해야함

 

 

named Imports

 

각 변수에 저장해서 내보낸 모듈은 다음과 같은 방법으로 가져와야 한다.

 

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

console.log(specialty);

 

이 경우, 만약 가져오고 싶지 않은 변수가 있다면 생략해도 된다.

 

import { chefsSpecial, isVeg } from './menu';

 

위에서 변수명을 바꿔서 내보낸 경우 위처럼 일반적인 방법으로 가져올 수도 있고

 

import * as Carte from './menu';

Carte.chefsSpecial;
Carte.isVeg();
Carte.isLowSodium(); 

 

이렇게 모듈 전체를 Carte라는 객체로 묶어서 가져올 수도 있다. 

---

Combining Export Statements 

 

위에서 배운 모듈 내보내는 방법 두 가지가 혼합된 버전

named export나 export default냐 하는 차이

 

1.

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

export { specialty as chefsSpecial, isVegetarian as isVeg };
export default isGlutenFree;

 

 

2.

export let Menu = {};

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

export default isGlutenFree;

 

이렇게 두 가지 방법을 섞어 쓰는 것은 피하는 게 좋지만, 경우에 따라 유용하다.

 

---

Combining Import Statements

 

얼핏보면 같아 보이지만 각각 ES6에서 지원되는 방법 ②와 ①이 적용된 것

// export로 각 변수를 내보낸 것을 가져옴 (named imports)
import { specialty, isVegetarian, isLowSodium } from './menu';

//export default로 내보낸 것을 가져옴
import GlutenFree from './menu';