모듈 프로그래밍

Sass 에서 버튼, 색깔 등등으로 파일을 분리해 작성해주고 나중에 한꺼번에 css 파일로 바꿔서 썼듯이,

 

js 에서도 용도별(?)로 쓰는 함수들의 파일을 분리해준다. 이 때 분리된 파일 각각을 모듈 (module) 이라고 부른다.

 

 

이렇게 하나하나 연결해줘야 하는것들을 `type="module"` 모듈 프로그래밍으로 사용해보자!

모듈 프로그래밍에서는 `defer` 가 기본값이기 때문에 생략할 수 있다.

 

 

dom 파일에 있는 attr,bindEvent,, 등등 많은 폴더가 있다.

 

 

🎈 모듈 내보내기

 

폴더 안에서 꺼내주고 싶은 함수나 변수 앞에 `export` 를 작성해준다.

 

이 폴더에서 불러오고 싶은 파일들을 index.js 로 불러와준다

 

여기서는 dom, error, math 안에 있는 index.js 파일에 안에 있는 모든 파일들을 `export` 해주고 난 뒤,

 

폴더와 같은 단계에 있는 index.js 에 폴더들을 모아준다.

 

+ 클래스나 함수를 내보낼 땐 세미콜론 생략

 

 

🎈 모듈 가져오기

 

import { 함수이름 } from "폴더경로/파일이름.js";

main.js 파일에서 위의 형식으로 내가 쓸 함수들을 불러올 수 있다.

 

import * as 함수이름 from '파일위치/파일이름';

가져올 것이 많을 때 위의 형식으로 객체 형태로 원하는 것들을 가지고 올 수 있다.

 

 

🎈 모듈의 핵심기능

 

엄격 모드로 실행됨

모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근 불가능 = 자신만의 스코프를 가짐

모듈 내 코드는 최초 호출 시 단 한 번만 실행됨