본 내용은 해당 강의 토대로 작성
App - 객체를 이용해서 템플릿 기능 정리 정돈하기
main.js에서 객체를 이용해서 코드의 복잡성을 낮춘다.
function templateHTML(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>
`;
}
function templateList(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;위의 두 함수는 template라는 접두어를 가지고 있다. 이렇게, 함수를 만들 때 접두사나 접미사를 사용하는 이유는 같은 것을 그룹핑하기 위해서이다. 이 두 함수를 하나의 객체로 그룹핑한다.
var template = {
HTML:function(title, list, body, control){
...
},List:function(filelist){
...
}변수 template 을 선언하고 두 개의 함수를 넣어준다. 함수명을 지우고 key를 앞에 적어준다.
객체화된 함수를 사용하는 것은 아래와 같다.
template.HTML(){}
template.List(){}기존의 함수를 사용하던 부분들도 위의 함수명으로 바꿔준 뒤 정상적으로 페이지가 작동하는지 확인한다.
객체를 사용하는 것은 파편화 되어있는 파일들을 카테고리 별로 묶어서 폴더에 정리하는 것 같다. 이렇게, 동작방법은 똑같지만 내부의 코드를 효율적으로 하는 것을 리팩토링이라고 한다.
Node.js - 모듈의 형식
코드를 정리정돈할 수 있는 도구는 아래와 같다
- 배열
- 함수
- 객체
이에 더해서, 객체가 많아진다면 그것을 정리할 수 있는 도구도 있다. 바로 모듈(Module)이다.
많은 함수들을 정리하기 위해서 객체가 만들어지고 그 객체도 언젠가는 많은 수를 가지게 된다. 이럴 때, 모듈로 만들어 파일 단위로 외부에 독립시킬 수 있다.
mpart.js 라는 파일에 아래와 같이 객체가 있다.(이 객체가 수천개가 있다고 상상해보라)
var M = {
v:'v',
f:function(){
console.log(this.v);
}
}그리고 이 객체를 외부에서도 사용할 수 있도록 아래의 명령어를 추가했다.
module.exports = M;모듈은 약속된 객체이고 위와같이 사용할 것이 정해져 있다. 위 명령어의 의미는 mpart.js의 여러 객체 중에서 M 이라는 객체를 모듈 바깥에서도 사용할 수 있도록 exports한다는 것이다.
별도의 파일 muse.js에서 아래와 같이 명령어를 입력한다
var part = require('./mpart.js');
console.log(part);
part.f();require('./mpart.js') 는 같은 디렉토리에 있는 mpart.js의 모듈을 가져온다는 뜻이다. Node.js로 muse.js를 실행하면 아래와 같이 출력된다.
console.log 로 출력했을 때, 이 모듈이 객체의 방식으로 저장되어 함수 호출 시, 잘 출력되는 것을 확인할 수 있다.
App 제작 - 모듈의 활용
이제, 템플릿 기능을 모듈화 시킨다.
새로운 폴더 lib에 하위 파일 template.js를 생성한 뒤, 객체 template 를 복사 후 해당 파일에 붙여넣기 한다.
module.exports = {
HTML:function (title, list, body, control){
...
}, List:function (filelist){
...
}
}module.exports 를 앞에 붙여줘서 바로 모듈화를 시킬 수 있다.
main.js 에서 모듈을 가져오기 한다.
...
var template = require('./lib/template.js');
...해당 경로의 모듈을 가져와 웹 페이지가 정상적으로 기능한다.
느낀점
객체를 모듈화 해서 더 간단하고 깔끔하게 웹 페이지의 기능을 구현해보았다. 지금까지, Node.js의 여러 모듈들을 사용하면서 require가 뭔지 너무 궁금했는데, 드디어 알게되었다!
'programming study > Node.js' 카테고리의 다른 글
| [생활코딩]WEB2-Node.js (10)(2020.12.24) (0) | 2020.12.24 |
|---|---|
| [생활코딩]WEB2-Node.js (9)(2020.12.23) (0) | 2020.12.23 |
| [생활코딩]WEB2-Node.js (7)(2020.12.22) (0) | 2020.12.22 |
| [생활코딩]WEB2-Node.js (6)(2020.12.19~21) (0) | 2020.12.21 |
| [생활코딩]WEB2-Node.js (5)(2020.12.18) (0) | 2020.12.19 |
