얌생

모듈은 Javascript를 파일 단위로 분리된 코드 덩어리를 말한다.

모듈은 하나의 모듈에서 다른 모듈을 호출해 사용할 수 있다.

모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

모듈의 필요성

• 코드 베이스를 분리할 수 있고, 이를 통해 코드를 구조적으로 관리할 수 있다.
• 코드를  재사용 가능하게 만들어준다. ( = 모듈화 )
• 코드의 함수와 변수중 일부만 외부에서 사용하도록 노출시킬 수 있다. ( 즉, 모듈 내부의 코드 세부사항을 외부로 부터 은닉하는 정보은닉을 표현할 수 있다. )
• 해당 모듈이 참조하고 있는 다른 모듈에 대한 종속성을 관리하는 역할을 담당한다.

CJS ( CommonJS )

Node.js 환경에서 기본적으로 사용되는 모듈 시스템이다.

설정을 따로 추가하지 않은 이상, Node.js에서는 CommonJS를 기본으로 사용한다.

require 함수를 사용하여 다른 모듈을 불러올 수 있다.

require 함수는 경로 혹은 문자열을 가지고 내부 알고리즘을 통해 모듈을 가져오고 종속성을 처리한다.

ESM ( ECMA Script Module )

최신 Javascript에서 지원하는 모듈 시스템이다.

모든 Javascript 환경에서 통합적인 인터페이스를 제공하기 위해 시작된 체계다.

CommonJS 와는 다르게 정적으로 모듈을 가져오며 비동기적 모듈 로딩과 순환 종속을 처리한다.

모듈의 사용법

export 명령어를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다. 

import, require 명령어를 사용해 외부 모듈의 기능을 가져올 수 있다.

 ● import는 ES6( ES2015 )로 모듈 시스템을 관리할 때 사용한다.

• 이 방식은 정적 로딩을 지원한다.
• import 문은 코드의 최상위에 위치해야 한다

 ● require는 CommonJS로 모듈시스템을 관리할 때 사용한다.

• 이 방식은 동적 로딩을 지원한다.
• require 문은 코드의 어디에서든 사용할 수 있다.

ES6 Module 사용

// 📁 sayHi.js
export function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

export 지시자를 사용해 sayHi.js 내부의 함수 sayHi를 외부로 내보낸다.

// 📁 main.js
import {sayHi} from './sayHi.js';

console.log(sayHi); // function
sayHi('John'); // Hello, John!

import 지시자를 사용해 상대 경로 ( ./sayHi.js ) 기준으로 모듈을 가져오고 sayHi.js 에서 내보낸 함수 sayHi를 상응하는 변수에 할당한다.

상대 경로

import {sayHi} from './sayHi.js';

위 코드에서 ./sayHi는 파일 경로를 나타내는데, ./ 으로 시작하는 경로는 '상대 경로' 라는 것을 나타낸다.

여기서, '상대 경로'란 현재 파일의 위치에 따라 다르게 해석되는 파일 또는 디렉토리의 위치는 나타내는 방식이다.

즉, ./sayHi.js 는 현재 파일이 위치한 디렉토리에서 sayHi.js라는 이름의 파일을 찾는 것을 의미한다.

상위 디렉토리에서 파일을 찾으려면 ../ 을 이용하면 된다. 

즉, ../sayHi.js 라고 상대경로를 설정하면 현재 파일이 위치한 디렉토리의 상위 디렉토리에서 sayHi.js 를 찾는 것을 의미한다.

화살표 함수 export, import

/** 화살표 함수 export **/

// 모듈을 호출했을 때, addArrowFunction 키 값에는 addArrowFunction 변수 함수가 가지고 있는 값이 할당된다.
export const addArrowFunction = (a, b) => {
  return a + b;
}

/** 화살표 함수 import **/

import { addArrowFunction } from './math.js'

console.log(addArrowFunction(5, 3));

// Print: 8