자바 스크립트 활용 예시(모듈)

module01.js

/*

    ! 모듈

    # 1. 모듈의 정의

    : 재사용 가능한 코드 조각

    >> 함수, 변수, 클래스, 파일등을 포함

    # 2. 모듈의 특징

    - 각각의 모듈은 독립성을 가짐

    - 다른 코드 내부에서 재사용 가능

    - 네임스페이스 관리

    - 가독성 및 조직화 향상

    # 3. ES6모듈

    : ES2015 이후에 JS에서 공식적으로 모듈 시스템을 도입

    >> import, export 문을 통해 모듈을 가져오고 내보내는 방식 도입

   

    -스코프 격리

    : 모듈 내에서 선언된 변수, 함수, 클래스 등은 모듈 외부에서 접근 X

    >> 전역 변수의 사용 줄이고 이름 충돌을 방지

    - 재사용성과 유지보수성 향상

    # import문 사용 예시

    1) 이름 붙여 가져오기- 중괄호 사용 O

    : 여러 개의 export가 가능

    >> 중괄호 내에서 콤마로 구분하여 나열

*/

import {PI} from './module02.js';

import { multiply as mp} from './module02.js';

console.log(PI);

console.log(mp(5,8));

/*

    2) 이름 붙여 가져오기 as 구문

    >> as키워드 (alias: 별칭, 별명)

    >> 가져오는 모듈 내에서 별칭을 사용하여 해당 기능에 대한 참조

*/

function multiply(x, y){

    return x*y;

}

console.log(multiply(6,4));

/*

    3) 전체 모듈을 별칭으로 가져오기

    >> 하나의 모듈(파일)을 하나의 별칭으로 가져와

        , 모듈 내의 모든 기능을 해당 별칭을 통해 접근

    >> 하나의 모듈을 객체로 파악

*/

import* as module02 from './module02.js';

console.log(module02.PI);

console.log((module02.multiply(9,7)));

/*

    2) 기본 가져오기

    * import 모듈명(변경X) from './파일의 경로.확장자';

*/

import add from './module02.js'

console.log(add(4,5));

 

module02.js

/*

    ! import & export문 (ES6 모듈 시스템)

    # 1. export문

    : 모둘에서 다른 파일로 함수, 변수, 클래스등을 내보낼 때 사용

    >> 이름 붙여 내보내기, 기본 내보내기

    1) Named Exports (이름 붙여 내보내기)

    : 하나의 모듈에서 여러 항목을 내보내기 가능

    : 항목은 고유한 이름으로 참조

    >> 각 항목 앞에 export 키워드 사용

*/

export const PI= 3.14;

export function multiply(x, y){

    return x*y;

}

/*

    2) Default Exports(기본 내보내기)

    : 모듈 당 하나의 항목만 내보내기 가능

    : 주로 한 모듈에 하나의 주요한 기능이 있는 경우에 적합

    >> 각 항목 앞에 export default 키워드 사용

*/

export default function add(x, y){

    return x+y;

}

// export default function sum(x, y){

//     return x+y;

// }

/*

    ? Node.js 환경에서 ES6 모듈 시스템 활용 방법

    pacakage.json 파일에 type: "module"을 추가

    1) 프로젝트의 루트 디렉토리에 package.json 파일 생성

    :npm init -y

    # import문

    : 다른 모듈에서 내보낸 기능을 사용하기 위해 import문을 사용

    >> export 방법에 따라 import하는 방법이 다름

    1) Import Named Exports (이름 붙여 가져오기)

    * import {모듈명} from '해당 모듈의 상대 경로 지정.확장자';

    2) Import Default Exports (기본 가져오기)

    * import 모듈명(사용 개발자 지정 가능) from '해당 모듈의 상대 경로 지정'

*/