본문 바로가기

Web Development/Back-end

[생활코딩-Nodejs-19] 객체와 모듈 활용

1. 객체활용

이전 Javascript 문법부분에서 '객체'라는 것을 배웠습니다.

특징만 다시 짚어보자면,

객체는 {key : value, key : value} 형태로 생겼고, 

객체는 배열과 같이 정보를 정리정돈하는 수납상자와 같은 역할을 하며,

자바스크립트에서는 객체에 함수가 포함될 수 있다는 점이 있었습니다.

 

 

이런 객체를 이용해서,

저는 지금부터 아래 사진 템플릿부분을 객체화 시켜보는 작업을 하겠습니다.

이걸 객체로 만들려면 어떻게 해야할까요?

위 사진처럼, template라는 객체를 선언하고

HTML 이라는 key 값에 value값으로 이전의 templateHTML 함수의 값을 그대로 넣어줬습니다.

그리고, list라는 key값에 value값으로 이전의 templatelist라는 함수의 값을 그대로 복사해 넣어주었습니다.

 

이렇게 객체로 넣어준것을 다시 사용하려면,

사용하는 부분에서는 어떻게해야할까요?

list 변수에서 함수를 호출했었던 부분을 template.list 라고 하면서 객체를 호출하도록,

var template부분은 객체와 이름이 겹치므로 이름을 HTML로 변경하고,

객체를 호출하는 template.HTML 이라는 코드로,

response.end부분에서는 불러올 것이 이제 template가 아닌 HTML로 되었기에 HTML로 바꾸어주면 됩니다.

여기는 홈페이지 부분이니깐 나머지 다른 부분도 모두 같은 형식으로 바꾸어주면 객체화가 완성됩니다!

 

2. 모듈(Module)

모듈은 객체가 많아지면 관리가 어렵겠죠?

그래서 객체를 따로 파일로만들어서, 호출하는 방식입니다.

즉, 객체의 수납상자라고 생각해도 좋을것 같네요.

 

모듈을 어떻게 사용하는 것인지 부터 알아보겠습니다.

모듈은 다음과 같이 이용할 수 있습니다.

그럼 모듈을 main.js 본 코드에 적용할 수 있지 않을까요?

해봅시다.

 

 

3. 모듈의 활용

 

위에서 template라고 객체화 시켯던 부분을 모듈화 시켜보도록 하겠습니다.

 

우선 저는 lib 이라고하는 폴더를 하나 더 만들구요,

template.js 라는 파일을 하나 만들었습니다.

그리고 template 객체를 그대로가져와서,

앞에 모듈을 호출할 수 있게 해주는 module.exports 로 이름만 고쳐주었습니다.

 

그리고 main.js 로 다시 돌아가보겠습니다.

저렇게 lib폴더에 template.js파일로 객체를 받았으면 그걸 다시 본문으로 호출해와야겟죠?

그러기위해서 저는 var template 변수는

require('./lib/template.js'); 라고 할당하여,

template.js 파일을 요청하도록 해주었습니다.

그럼 본문에서, template.list()

혹은, template.HTML()

이라고 명령하면 이제 template.js 파일 객체에서 해당 key값에 따라 value를 리턴해주는 것을 확인 할 수 있습니다.

 

 

자 ! 여기까지가 객체화 모듈이었습니다.

 

어떠셧나요?

 

한번 정리해볼까요?

 

모듈 = 객체의 수납상자 같지않나요?

객체 = 함수의 수납상자

함수 = 작은 로직의 수납상자

배열 = Data들의 수납상자

변수 = Data의 수납상자

 

이런 느낌 아닌가요?

 

글로만하면 또 번거롭고 잘 이해가 어렵죠?

 

그림으로 한번 이해해보자구요~

 

 

 

자 여기까지해서 마무리하도록 하겠습니다.

 

 

- E N D -