Modern Js 13(모듈)

모듈은 무엇인가?

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

모듈

모듈은 무엇인가요? 우리가 개발을 하다보면 코드량이 엄청 많아지게 됩니다. 그렇게되면 에러가 발생하거나 수정을 원할때 찾는시간이 걸리리게 되고 가독성 역시 좋지 않게 됩니다. 이때 우리는 코드를 파일로 나누게 되는데 이것을 모듈(module)이라 부르게 됩니다.

모듈의 핵심 기능

엄격 모드로 실행됩니다.

  • 모듈은 항상 엄격 모드로 실행 됩니다. 선언 되지 않은 변수에 값을 할동하는 등의 코드는 에러를 발생시킵니다.

모듈 레벨 스코프

  • 모듈은 자신만의 스코프가 있습니다. 따라서 모듈 외부에서 모듈의 함수를 접근 할수 없습니다.

단 한번만 평가됩니다.

  • 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 단한번만 실행됩니다.
  • 이말의 의미는 아래 코드를 통해 설명 하도록 하겠습니다.
//person.js
export let person = {
    name: 'KUD'
}

//change.js
import {person} from './person.js';
export default person.name = 'LEE'

//console.js
import {person} from './person.js';
export default console.log(person.name)

//index.js
import change from './change.js';  
import console from './console.js'; // 'LEE'

모듈의 위치 파악

  • import.meta를 사용하여 모듈의 위치를 파악할수 있습니다.

지연실행

모듈 스크립트는 항상 지연 실행됩니다.

export 사용법

export의 사용법에 대해 알아 보겠습니다

export const name = "KMU";

export class person{
    constructor(name){
        this.name =name;
    }
}
class person2{
    constructor(name){
        this.name =name;
    }
}

class person{
    constructor(name){
        this.name =name;
    }
}
export{name,person}
export default name = "KMU"

import 사용법

import의 사용법에 대해 알아 보겠습니다

import {가져오고 싶은거} from '원하는 모듈'
//or 만약 가져오고 싶은것의 이름을 변경해서 가져오고 싶다면 
import {가져오고 싶은거 as 원하는 이름} from '원하는 모듈'