1. 모듈이란?
- 공통된 기능이나 특별한 목적에 따라 각각의 파일로 분리하는 과정
- 효율적으로 관리, 재활용 가능
2. 모듈 파일의 조건
- 모듈스코프
: 모듈파일이 가지고 있는 독립적인 스코프 ( 파일안에 선언된 변수는 모듈파일 안에서만 사용) - html의 script 태그에서 모듈 타입 정해주기 : (type: “module”)
- 모듈 스코프는 서버에서 보기
3. 모듈 문법
: 모듈 문법을 사용하면 모듈스코프안의 변수, 함수들을 다른 파일에서 사용할 수 있다.
- export{ }: 베출하기
- import: 불러오기 ( import{변수,함수} from 경로 )
- 특징
: 결국 모듈화된 파일들은 서로 연결되어있기 때문에 html파일에서는 시작이 되는 한 자바스크립트 파일만 선언한다.
4. 이름 바꾸기 (as)
- 변수나 함수를 불러왔을 때 기존의 파일에 존재하던 변수와 이름이 같을 경우를 방지하여 사용
- ex) import {변수 as 다른이름, 함수} from ‘경로’
- export에서도 사용가능
5. import 한꺼번에 다루기 (named export)
import * as 이름 from ‘경로’
- (wildcard Character)
: 경로에서 export한 요소들을 로 모두 import하고 이름으로 사용 - 이름은 객체처럼 사용가능 (각각 요소들을 속성으로 불러온다)
- 필요할 때 적절하게 사용하기
6. dafault export
export default
: 모듈파일 내에서 한번만 사용가능
- import할때는 꼭 as사용해서 사용해줘야됨
- default값은 as 뒤에 정해준 이름만으로도 중괄호 밖에 따로 빼줄 수 있음
- 중괄호 기준으로 named랑 default 구분 가능
65Lv.