자바스크립트 - 모듈

모듈 파일의 조건

1. 모듈 스코프를 갖는다 

다른 파일에서 선언된 함수를 덮어쓰는 등의 의도치 않은 문제 방지 

 

<script type="module">  타입 프로퍼티에 모듈 값을 지정해준다. 

 

브라우저에서 직접 파일을 불러오는 방식 -> 에러 발생

서버를 통해서 HTML 파일을 실행해야 한다. (vscode live server)

---

모듈 문법

 

모듈 만들기

각각의 선언문 앞에 export  붙여주면 다른 파일에서도 모듈 내의 값을 사용할 수도 있다

 

모듈 불러오기

import { 사용할 변수나, 함수 } from '모듈 파일의 경로';

 

-> HTML에서는 진입점 역할을 하는 js 파일 하나만 script 로 연결하면 된다

---

이름 바꿔서 사용하기 : 중복을 피하거나 특정 의도(의미 부여)에 따라 .. 

 

import { 기존 변수 as 파일내에서 사용할 이름 } from '모듈 파일의 경로';

---

한꺼번에 import 하기 : 모듈 파일에서 export 한 모든 대상을 불러옴 

import * as 사용할 이름 from '모듈 파일 경로'

 

객체 형식 & 프로퍼티처럼 사용

 

* = wildcard character (와일드카드 문자)

전체를 가져오게 되어 불필요한 정보도 가져오게 된다 

---

한꺼번에 export 하기 : 모듈 파일에서 내보내고 싶은 대상을 한번에 export 

 

export { 내보낼 대상, 들, 여러, 개 as 사용할 이름} ;

 

변수나 함수 등 여러 대상을 export 하는 방식을 Named Export 라고 부른다. 

---

export default + 반드시 하나의 대상만 

export default 'codeit';

변수나 함수 이름 뿐 아니라 값 하나를 전달할 수 있음.

주의. 모듈 파일 내에서 딱 한번만 쓸 수 있음

여러번 사용하면 에러 발생 

 

import default as codeit 

as 를 반드시 붙여줘야함 

 

ex.

import{

  default as codeit 

  title as memberTitle,

  data as memberData,

} from './index.js';

 

import codeit, {

    title as memberTitle,

  data as memberData,

} from './index.js';

 

default 값에 붙여준 이름을 중괄호 {} 밖을 빼줄 수 있다 

-> default export 와 named export 를 구분할 수 있다 

---

import * memberJS from './파일경로';

와일드 카드 활용해서 가져올 수도 있음

-> default 프로퍼티로 접근할 수 있음

console.log(memberJS.default);

---

모듈 파일에서 한개만 export 할때 default 사용, 

여러개를 export 할때는 named export 사용 (섞어서 쓰는건 권장x)

---

export default { title, print}; 

-> 하나의 객체 값을 export 

객체 축약형 참조 (프로퍼티 값과 변수 이름이 똑같을때?) 즉 {title : title, print : print}