본문 바로가기
웹 백엔드/NodeJS, PM2

nodejs의 모듈 시스템 : export, import

by 번데기 개발자 2018. 9. 27.
반응형
모듈 시스템


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

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

하지만 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로 넘겨줍니다.
        이것은 두개이상의 패키지에서 같은 변수이름을 사용해 변수가 곂칠때 유용합니다.

        










반응형