모듈의 형식
함수와 변수들을 정리정돈 하기 위해 사용한 것이 객체였다.
객체보다도 더 큰 틀의 정리정돈 도구가 바로 모듈이다.
mpart.js
var M = {
me:'Lydia',
func:function() {
console.log(this.me);
}
}
module.exports = M;module.exports = M;:
이 파일(모듈)의 기능들 중 M이 가르키는 객체를 이 파일(모듈) 바깥에서도 사용할 수 있도록 export 한다는 의미
muse.js
var part = require('./mpart.js');
console.log(part); //mpart.js 파일 내에서의 M객체가 출력됨
part.func(); //mpart.js 파일 내에서의 M객체의 func함수를 호출할 수 있음var part = require('./mpart.js');
인자로 가지는 경로의 파일(모듈)을 불러와서 변수 part에 넣겠다는 의미💡모듈을 불러올 땐 require키워드 사용하기!
모듈의 활용
코드 중 바깥으로 독립시킬 수 있는 코드를 찾는다
틀을 생성하는 두가지의 함수를 묶어서 객체화 시켰던 template 객체를 외부로 독립시킬 수 있다.
var template = {
HTML:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
},list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}위의 template 코드를 lib라는 directory를 생성한 뒤, 그 내부에 template.js라는 파일을 만들어 담는다.
이때, 다른 파일에서 해당 모듈(template.js)를 활용하려면 module.exports에 담아줘야 했다.
따라서 template이라는 이름의 변수 대신, 위의 object를 곧바로 module.exports에 넣어준다.
module.exports = {
HTML:function(title, list, body, control){
return `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
${list}
${control}
${body}
</body>
</html>
`;
},list:function(filelist){
var list = '<ul>';
var i = 0;
while(i < filelist.length){
list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
i = i + 1;
}
list = list+'</ul>';
return list;
}
}
그 후, template 모듈의 객체를 사용할 main.js파일의 코드에서, 외부 모듈을 import 해오기 위해 require를 해야 한다.
var template = require('./lib/template.js');이를 통해, main.js에서 template.js 내의 객체를 불러와서 사용할 수 있게 된다.
독립시킬 수 있는 요소를 별도의 모듈로 빼는 과정을 모듈화라고 한다
뭐든 다해보려는 공대생입니다