nodejs의 모듈 시스템 : export, import

모듈 시스템

자바스크립트는 예전부터 리소스 관리가 어려운 문제가 있었습니다. 

리소스는 웹페이지를 구성하는 자원들인데 현재 웹에서는 해당 페이지에 필요한 모든 파일을 불러 와야 하고 그 파일들이 곂치지 않는지 잘 살펴봐야 합니다.

하지만 npm 과 같은 패키지 관리 툴을 사용하여 여러 자바스크립트 라이브러리들을 개발자들이 쉽게 사용할 수 있도록 구현하였고, 자신이 구현한 자바스크립트의 리소스들도 쉽게 다른 파일에서 사용할 수 있게 관리 할 수 있습니다.

기존의 모듈 시스템 require

require React from 'react';

require from 'react-dom'

과 같은 형태로 이용이 가능합니다.

모듈 시스템 import

import React from ‘react’; 

Import from ‘react-dom’

둘다 해당 패키지에서 변수를 가져오는 작업을 수행하지만 {} 로 둘러쌓인 부분이 있는데 이는 export시의 차이입니다.

* 참조 : 하지만 아직 nodejs에서는 es2015 모듈시스템을 지원하지는 않습니다.

import BookList from '../containers/book-list'

위처럼 경로가 나오게 되면 사용자가 지정한 리소스를 import하라는 뜻이며, 경로가 나오지 않는다면 npm 안에있는 라이브러리를 사용하라는 뜻입니다.

모듈 시스템 export 방식

자바 스크립트의 export방식에는 3가지가 있습니다.

Example.js

const a = 1;

const b = 2;

export { a };

export const c = 3;

export default b;

Example2.js

import d, { a, c as e } from './Example’;

console.log(a, d, e); // 1, 2, 3

a : a는 객체에 담아서 export합니다.

c: c는 선언 및 초기화와 동시에 export합니다.

b: b는 default를 붙여줘서 export합니다.

->     a,c는 괄호 안에서 불러오고 d는 괄호 없이 불러오고 c는 as e라고 적혀있습니다.

       

        여기서 default는 기본이라는 뜻입니다. default로 export한 b는 괄호를 사용하지 않아도 export할 수 있습니다. 

        변수 d가 변수 b를 import한 것 이라는 것을 알 수 있습니다.

        괄호 안의 변수를 바꾸고 싶다면 as라는 키워드를 사용하여 바꿀 수 있습니다. 

        위의 c as e라고 한 부분은 변수 c의 값을 변수 e로 넘겨줍니다.

        이것은 두개이상의 패키지에서 같은 변수이름을 사용해 변수가 곂칠때 유용합니다.

        

참조)  https://www.zerocho.com/category/ECMAScript/post/579dca4054bae71500727ab9