Node.js | Module에 대한 이해

bubblegum·2024년 1월 18일

NodeJS

목록 보기
2/14
post-thumbnail

01 모듈이란

  • 모듈(Module)Javascript를 파일 단위로 분리된 코드 덩어리를 일컫는다. 여기서 Javascript 파일은 특정한 기능을 가진 여러 개의 함수변수들의 집합체이다.
  • 모듈(Module)은 하나의 모듈에서 다른 모듈호출하여 사용할 수 있습니다.
  • 모듈(Module)은 그 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있습니다.
  • 보통 1개의 파일1개의 모듈이 됩니다.

02 모듈의 필요성

  1. 코드 베이스분리할 수 있으며, 이를 통해 코드를 구조적으로 관리할 수 있습니다.
  2. 코드를 재사용 가능하게 만들어줍니다. 즉, 모듈화(modularize) 됩니다.
  3. 코드의 함수와 변수중 일부만 외부에서 사용하도록 노출시킬 수 있습니다. 즉, 모듈 내부의 코드 세부사항을 외부로 부터 은닉하는 [정보은닉(information hiding)](http://wiki.hash.kr/index.php/%EC%A0%95%EB%B3%B4%EC%9D%80%EB%8B%89)을 구현 할 수 있게 됩니다.
  4. 해당 모듈이 참조하고 있는 다른 모듈에 대한 종속성(Dependency)을 관리하는 역할을 담당합니다.

03 Node.js에서 사용하는 Module

  • CJS(CommonJS)
    CJS(CommonJS)는 Node.js 환경에서 기본적으로 사용되는 모듈 시스템입니다. require 함수를 사용하여 다른 모듈을 불러올 수 있습니다. require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리합니다.
  • ESM(ECMA Script Module)
    ESM(ECMA Script Module)은 최신 JavaScript에서 지원하는 모듈 시스템입니다. 모든 Javascript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계입니다. CommonJS 와는 다르게 정적(Static)으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리합니다.

04 모듈을 사용하는 방법

  • export 명령어를 변수함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다. 이렇게 하면 하나의 큰 프로그램들을 작게 나누어, 다른 파일에서도 재사용 할 수 있습니다.
  • import, require 명령어를 사용하면 외부 모듈의 기능을 가져올 수 있습니다. 자바스크립트는 대표적으로 CommonJS, ES6(ES2015) 방식으로 모듈 시스템을 관리할 수 있습니다.
  1. require
    • CommonJS 모듈 시스템을 관리할 때 사용한다.
    • 동적 로딩(Dynamic Loading)을 지원한다.
    • 비동기적 모듈 로딩을 지원한다.
    • require 문은 코드의 어디에서든 사용할 수 있습니다.
  2. import
    • ES6(ES2015) 모듈 시스템을 관리할 때 사용합니다.
    • 정적 로딩(Static Loading)을 지원합니다.
    • 동기적 모듈 로딩을 지원한다.
    • import 문은 코드의 최상위에 위치해야 합니다.

05 ES6 Module 사용해보기

1. 화살표 함수

  • export
    모듈을 호출했을 때, addArrowFunction 키 값에는 addArrowFunction 변수 함수가 가지고 있는 값이 할당된다.

    export const addArrowFunction = (a, b) => {
      return a + b;
    }
  • import

    import { addArrowFunction } from './math.js'
    
    console.log(addArrowFunction(5, 3));
    
    // Print: 8
    

2. 익명 함수

  • export
    모듈을 호출했을 때, addAnonymousFunction 키 값에는 (a,b){return a + b;} 익명 함수가 할당된다.

    export const addAnonymousFunction = function (a, b) {
      return a + b;
    }
  • import

    import { addAnonymousFunction } from './math.js'
    
    console.log(addAnonymousFunction(9, 3));
    
    // Print: 12

3. default Object

  • export
    모듈을 호출했을 때, add 키 값에는 add 함수가 들어가는 방법이다.

    const defaultObject = {
      add: add,
    }
    
    export default defaultObject;
  • import
    경로에서 가져온 모든(*) module을 math라고 명명하여 import하는 방법

    import * as math from './math.js'
    
    console.log(math.default.add(13, 8));
    // Print: 21

    경로에서 기본값(default)으로 내보내는 객체(object)를 import하는 방법

    import { default as defaultObject } from './math.js'
    
    console.log(defaultObject.add(17, 2));
    // Print: 19

4. default Function

  • export
    모듈을 호출했을 때, defaultAddFunction 함수가 들어가는 방법이다.

    const defaultAddFunction = function (a, b) {
      return a + b;
    }
    
    export default defaultAddFunction;
  • import
    모듈 전체 가져오기

    import * as math from './math.js'
    
    console.log(math.default(20, 11));
    // Print: 31

    default 모듈만 가져오기

    import { default as defaultAddFunction } from './math.js'
    
    console.log(defaultAddFunction(12, 16));
    // Print: 28 

5. default 익명 함수

  • export
    모듈을 호출했을 때, 익명 함수가 반환되는 방법이다.

    export default function (a, b) {
      return a + b;
    }
    
  • import

    import math from './math.js'
    
    console.log(math(2, 1));
    // Print: 3
profile
황세민

0개의 댓글