- module 사용법
- import default
- module 합치기
- module 예제
1) module 사용법
module을 사용하면 script를 여러 파일로 분리한 후 사용할 수 있다.
array, function, class 등을 하나의 파일로 분리해 필요할 때 불러와 사용한다.
확장성, 유지/보수, 디버깅에 용이하다는 장점이 있다.
export function make1(msg){
console.log(msg, 'make1');
}
export function make2(msg){
console.log(msg, 'make2');
}
export function make3(msg){
console.log(msg, 'make3');
}
javascript 파일을 따로 만든다.
<script type="module">
import {make1, make2, make3} from './module/test1.js';
make1('test1');
make2('test2');
make3('test3');
</script>
html의 script에 type="module"을 추가해 주고 경로를 잘 연결해 준다.
2) import default
const make3 = (x, y) => {
return x * y
export default make3<script type="module">
import make3 from "./module/test3.js";
console.log(make3);
console.log(make3(10, 20));
</script>
default로 export를 할 경우 import 할 때 { } 중괄호 안에 넣으면 안 된다.
따라서 import make3 from "./module/test3.js";와 같이 작성해 주었다.
3) module 합치기
const num = 200;
const make1 = () => {
return 300;
}
const make2 = (x, y) => {
return x + y;
}
class Person {
constructor(name) {
this.name = name
}
}
const obj = {
name: '김', age: 30, addr: '서울'
}
const arr = [10, 20, 30, 40]
export { num, make1, make2, Person, obj, arr } <script type="module">
import { num, make1, make2, Person, obj, arr } from "./module/test2.js";
console.log(num);
console.log(make1);
console.log(make1());
console.log(make2);
console.log(make2(10,30));
const man = new Person()
man.name = '박'
console.log(Person);
console.log(man.name);
console.log(obj);
console.log(obj.addr);
console.log(arr);
console.log(arr[3]);
</script>
선언할 때마다 혹은 선언 후 각각 export 할 수 있지만 위 코드 export { num, make1, make2, Person, obj, arr }처럼 한 번에 변수, 함수, 클래스 등을 export 할 수 있다.
4) module 예제
<script type="module">
const arr = [
{ name: '펭귄', img: 'img0.png', job: '어부', tel: '010-4521-1313' },
{ name: '악어', img: 'img1.png', job: '목수', tel: '010-2342-1313' },
{ name: '삑삑이', img: 'img2.png', job: '경찰', tel: '010-2136-1313' },
{ name: '루피', img: 'img3.png', job: '대장장이', tel: '010-1122-1313' },
{ name: '누렁이', img: 'img4.png', job: '전사', tel: '010-8955-1313' },
{ name: '북극곰', img: 'img5.png', job: '가수', tel: '010-6112-1313' }
]
let ul = document.querySelector('ul')
let del = document.querySelector('.del')
let show = document.querySelector('.show')
let i = document.querySelectorAll('i')
function showList() {
ul.innerHTML = ''
const newObj = arr.map(ele => {
const { name, img, job, tel } = ele;
return `
<li>
<img src="../images/${img}" alt="">
<strong>
<p>${name}</p>
<p>${job}</p>
<p>${tel}</p>
</strong>
<i class="xi-heart-o"></i>
</li>
`
}).join('')
ul.innerHTML = newObj;
i = document.querySelectorAll('i')
i.forEach(ele => {
ele.addEventListener('click', e => {
if (e.target.className === 'xi-heart-o') {
e.target.className = 'xi-heart'
} else {
e.target.className = 'xi-heart-o'
}
})
})
}
del.addEventListener('click', e => {
ul.innerHTML = ''
})
show.addEventListener('click', e => {
showList();
})
showList();
</script>
위 코드처럼 script에 전부 작성된 코드를 module을 사용해 여러 파일로 나누어 관리할 수 있다.
4-1) arr.js
export const arr = [
{ name: '펭귄', img: 'img0.png', job: '어부', tel: '010-4521-1313' },
{ name: '악어', img: 'img1.png', job: '목수', tel: '010-2342-1313' },
{ name: '삑삑이', img: 'img2.png', job: '경찰', tel: '010-2136-1313' },
{ name: '루피', img: 'img3.png', job: '대장장이', tel: '010-1122-1313' },
{ name: '누렁이', img: 'img4.png', job: '전사', tel: '010-8955-1313' },
{ name: '북극곰', img: 'img5.png', job: '가수', tel: '010-6112-1313' }
]4-2) getEle.js
export function get(target) {
const ele = document.querySelector(target);
if (ele) {
return ele;
} else {
throw Error('선택한 요소가 존재하지 않습니다.');
}
}
export function getAll(target) {
const ele = document.querySelectorAll(target);
if (ele) {
return ele;
} else {
throw Error('선택한 요소가 존재하지 않습니다.');
}
}4-3) show.js
const showList=(arr)=>{
let newObj = arr.map(ele => {
const { name, img, job, tel } = ele;
return `
<li>
<img src="../images/${img}" alt="">
<strong>
<p>${name}</p>
<p>${job}</p>
<p>${tel}</p>
</strong>
<i class="xi-heart-o"></i>
</li>
`
}).join('')
return newObj;
}
export default showList;4-4) showList.js
import { arr } from './arr.js';
import { get, getAll } from './getEle.js';
import showList from './show.js'
let i = getAll('i')
let ul = get('ul')
let show = get('.show')
let del = get('.del')
ul.innerHTML = showList(arr);
i = getAll('i')
like();
function like() {
i.forEach(ele => {
ele.addEventListener('click', e => {
if (e.target.className === 'xi-heart-o') {
e.target.className = 'xi-heart'
} else {
e.target.className = 'xi-heart-o'
}
})
})
}
del.addEventListener('click', e => {
ul.innerHTML = ''
})
show.addEventListener('click', e => {
ul.innerHTML = showList(arr);
i = getAll('i')
like();
})4-5) html
<script type="module" src="./module/showList.js">
</script>
arr 배열, querySelector 함수, show 함수를 module화 한 후 showList.js 에서 모두 import 해 주었다.
우선 arr.js를 import 받아 데이터 값을 가져오고 그 값을 show.js에서 매개변수 arr로 받는다.
arr의 값 name, img, job, tel 값을 각각 받은 showList 함수는 li안에 알맞은 내용을 넣어 return 하게 된다.
그 외에 event들은 showList.js에서 처리해 주었다.
