728x90
![[JS] Module [JS] Module](http://t1.daumcdn.net/tistory_admin/static/images/xBoxReplace_250.png)
1. Module
프로그램을 기능별로 여러 개의 파일로 나누는 형태.
2. 내보내기 : export
1) 선언하면서 내보내기
export const title = '계산기 모듈'; export function add(i, j) { return i + j; } export function sub(i, j) { return i - j; }
2) 내보내기 위한 상수, 메서드 지정
const title = '계산기 모듈'; function add(i, j) { return i + j; } function sub(i, j) { return i - j; } //내보내기 위한 상수, 메서드 지정 export { title, add, sub };
3) json 객체로 내보내기
key:value 형태임에 주의한다.
export default { title: '계산기 모듈', add(i, j) { return i + j; }, sub(i, j) { return i - j; }, };
3. 가져오기 : import
1) 필요한 상수,메서드만 가져오기
import { title, add, sub } from '파일명';
2) 외부 모듈에서 지정해놓은 기본 목록 가져오기
모듈 객체 참조 변수명을 설정하고 그 변수명을 이용해 외부모듈 상수와 메서드를 사용한다.
import cal from '파일명'; console.log(cal.title); console.log(cal.add(20, 10)); console.log(cal.sub(20, 10));
'기록 > FRONTEND' 카테고리의 다른 글
[Vue] Router (1) | 2022.05.25 |
---|---|
[JS] Axios (0) | 2022.05.24 |
[Vue] Component (0) | 2022.05.19 |
[Vue] Event (0) | 2022.05.18 |
[Vue] Vue Instance (0) | 2022.05.17 |
댓글