모듈
-
파일을 나눠서 관리
-
getDom.js에는 태그 정의
-
event.js에는 함수 정의
-
app.js에서는 이벤트 핸들러를 등록
-> getDom.js, event.js 에서는 export를 붙여 넘겨주고 (필요에 의해 import도 가능), app.js에서 import하여 사용 (내 파일, 팀원 파일 등 모두 import 가능) -
app.js만 html에 등록해도 다 연결되어있기 때문에 (import, export로) 다른 파일들은 html에서 안불러도됨
-
export할 (내보낼) 데이터가 1개라면 (객체 1개, 배열1개 ...) default를 쓸 수 있음
-> default를 쓰게되면 import할 때 이름 수정해서 사용 가능
-> defalut를 통해 객체를 내보냈을 때 import한 곳에서 객체처럼 사용 가능
ex) console.log(hahahaha.pow(5)); console.log(hahahaha.add(3,6)); -
이름 중복 방지
-> import할 때 이름이 중복되면 as를 붙여서 바꿔서 사용가능 -
백틱을 통해서는 태그를 가져올 수 없음
ex) console.log(내가 만든 btn: {btn}); console.log(불러온 btn:, $button); -
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="app.js" defer></script>
</head>
<body>
<button id="btn">클릭 !</button>
<p class="text"></p>
</body>
</html>- getDom.js
// 버튼 태그와 p 태그를 가져옴
const $btn = document.getElementById('btn');
const $pText = document.querySelector('.text');
export { $btn, $pText};
- event.js
// getDom.js에서 $pText를 가져오기
import {$pText, $btn} from './getDom.js';
console.log($pText, $btn);
// 이벤트 핸들러 함수
export const clickHandler = e => {
$pText.textContent = '안뇽?';
};- app.js
// app.js나 main.js 파일 하나 만들어놓고 내 파일 or 팀원들 것 import해서 협업
// 변수가 겹칠 경우 as로 기존 변수를 새로운 변수로 변경해서 불러올 수 있음
import { $btn, $btn as $button } from "./getDom.js";
import { clickHandler } from "./event.js";
import hahahaha from "./pow.js"; // pow 이름을 hahahaha 변경
const $btn = '123'; // 내가 만든 변수
// 백틱으로는 태그 못가져옴
console.log(`내가 만든 btn: ${$btn}`);
console.log(`불러온 btn:`, $button);
// hahahaha는 객체이므로 객체형태로 출력
console.log(hahahaha.pow(5));
console.log(hahahaha.add(3,6));
// // event.js에서 만든 이벤트 핸들러 등록
$button.addEventListener('click', clickHandler);- pow.js
// 만약에 내보낼 데이터가 1개라면 default를 쓸 수 있다.
// -> 내보낼 때 이름을 마음대로 바꿔서 내보낼 수 있다.
// ex) 객체 1개, 배열 1개 ..
const pow = n => n ** 2;
const add = (n1, n2) => n1 + n2;
export default {pow, add};
백엔드 개발자