To Do List 10 ] module | exports | 다른 파일에 있는 function과 data 불러오는 법

지금까지 ejs, express, body-parse 등

node modules 를 사용하였다. 

 

 

 

이 node modules은 어떻게 동작하는걸까? 

 

node_modules 폴더에서 ejs를 보면 

 

많은 exports를 볼 수 있다. 

 

이 exports는 무엇일까?

 

---

그 전에 우선 module에 대해 자세히 알아보자. 

 

 Module 

 

오늘 날짜를 알려주는 코드를 묶어서 app.js안에 놓지 말고 다른 파일로 옮겨놓자. 

app.js 안에 모든 코드가 계속 쌓이면 나중에 코드 보기가 어려워진다. 

route(get, post..) 와 상관없는 코드들은

외부 파일로 빼서 필요할 때 부르는 것이 더 효율적이다. 

 

 

 

 

date.js 파일을 만든다. 

 

오늘의 날짜를 알 수 있는 코드인 빨간 박스 안의 코드들을 date.js 파일에 옮긴다. 

그럼 어떻게 app.js 파일에서 date.js 파일을 연결하여 원하는 정보를 가져올 수 있을까?

 

그 방법은 다음과 같다. 

 

1. 함수로 감싸기 

date.js의 파일에서 오늘의 날짜를 알 수 있는 코드를 함수로 감싼다. 

 

 

2.  day 값이 외부로 나가게하기 

이 때 필요한 것이 module이다. 

 

 

 

< node document 참고> 

https://nodejs.org/docs/latest-v15.x/api/modules.html#modules_the_module_object

모듈을 변수처럼 사용한다. 

모듈을 실행 시키면 이 페이지 안에 있는 모든 코드가 실행된다. 

 

 

 

모듈이 뭔지 보기 위해서

일단 date.js 모듈을 실행 시켜보자. 

 

date.js에서 console.log(module); 만들기 

date.js 모듈을 실행 시키고서 

그 안에 어떤 내용이 있나 콘솔에서 받아보자.

 

아래 코드를 작성한다고 바로 콘솔에서 나오는 것은 아니다 

module을 다른 곳에서 불러야 실행이 된다.

 

 

app.js 파일에서 date.js 모듈을 불러보자. 

date.js

 

 

3. app.js에서 date.js 모듈을 연결한다. 

다른 파일에서 모듈  부르기 

app.js

(__dirname + "/date.js") : express, body-parser 처럼 다운 받는게 아니라

다른 파일에서 가져오는 것이므로 파일이름과

__dirname으로 어디에 있든 찾아갈 수 있도록 경로지정을 해줘야 한다. 

그 앞에 / 를 반드시 써준다. 

 

 

 

nodemon app.js를 돌리면

서버를 리프레쉬 했을 뿐인데 

콘솔에 많은 내용들이 나온다. 

(log statement가 running 하고 있다?)

module object를 log했다. ??

 

 

 

 

 

 

그 이유는 date.js 모듈이 자동 실행되어 그렇다. 

 

콘솔

module object 안에 들어 있는 맨 윗 줄부터 살펴보면 

 

id: 모듈 있는 위치

exports: { }  지금은 비어있다. { } 컬리 브레이시스로 되어 있는 것으로 보아 자바스크립트 오브젝트로 보인다. 

parents module : what was the module that actually launched it or required it? in this case it's sth called app.js. 

children module: parents has a whole bunch of children [module], [module], [circular *1] including this date module and also got other children [body-parser], [ejs]

 

 

 

---

 

 exports 

이 exports가 뭘까?

exports에 대해 문서에서 보면

node doc

- exports는 자바스크립트 오브젝트이다.

- module.exports  를 써서

원하는 내용을 구체적으로 적으면

파일 전체가 아니라 파일의 일부분만을 다른 파일에서 부를 수 있다. 

 

 

exports 의 예

1. string만 exports 하기 

 

date.js에서 module.exports로만 해서 "Hello"만 내용으로 나오게 하였다.

date.js

 

app.js에서 date를 불러오면 

app.js

 

콘솔에서 date.js 페이지 전체가 실행된 것이 아닌 Hello만 나온 것을 알 수있다.

콘솔

 

 

 

2. 함수 exports 하기 

아래에 있는 함수를 exports 하려면 

module.exports = getDate; 

getDate로 함수 이름을 써준다. 

뒤에 괄호는 적어주지 않는다. 

 

 

 

app.js에서 console.log(date) 모듈을 실행하면 

날짜가 나오는 것이 아니라 어떤 함수가 있는지 알려준다. 

 

 

 

date에 있는 함수를 실행하려면 

date( ) 괄호 있는 모양으로 

app.js 원하는 곳에 어디에나 적어서 사용할 수 있다. 

 

 

app.get()에서 호출 했기 때문에 브라우저에서 날짜가 잘 나오는 것을 볼 수 있다.

 

이렇게 코드를 모듈로 묶어 놓으면

다시 재사용하기도 편하고, 활용도가 높다. 

 

---

 

 

 getDate( ) vs getDate 

 

getDate( ) 괄호를 하면 즉시 함수가 실행이 되고, 

getDate 괄호가 없으면 나중에 호출 시 실행된다. 

 

app.js에서 date 만을 쓰면 함수가 실행되지 않고 

 

logging 만 되어 어떤 함수인지 알려만 준다. 

 

 

date( )로 함수를 실행시키면 

 

 

그제서야 오늘 날짜를 알 수 있다.

 

 

---

 

 함수 2개 이상 모듈 

한 페이지에 함수가 2개 이상이면 어떻게 모듈로 불러야 할까?

 

date.js 파일에 getDay() 함수를 하나 더 만들어보자. 

그리고선 getDay에 해당하는 exports 만 한 줄 더 써주면 될까? 아니다

 

module.exports = getDate; 

module.exports = getDay; 

이렇게만 적으면 아래 줄에 있는 getDay만 적용이 된다.

 

 

getDate는 사라지고, getDay 만 나온다

 

 

 

둘 다 각각 호출하고 싶으면 어떻게 해야할까?

일단 exports는 자바스크립트 오브젝트이다.

object의 특징은 properties와 mothods를 갖는다. 

 

그래서 property 적듯이 

exports 뒤에 내용을 더 적어 구체화 해서 함수를 호출할 수 있다.

 

module.exports.getDate = getDate; 

module.exports.getDay = getDay; 

 

콘솔로그에서 exports에 뭐가 있나 보자. 

date.js

 

두 함수 다 들어있는 것을 볼 수 있다.

console

 

 

 

그러면 app.js에서  

app.js

3번 줄에서 모듈 가져오는 것은 두 함수 다 가져올 수 있다.

16번 줄에서 어떤 함수를 쓸지 선택해줘야한다. 

let day = date() (X)

 

 

 

let day = date.getDate() (O)

app.js

 

 

 

let day = date.getDay() (O)

app.js

 

 

---