게시판 시작해봅시다 -8

지금까지 view를 제외한 모든 코딩을 app.js에서만 해왔지만, 일반적으로 정리를 위해 파일을 나누어서 코딩을 하게 되고 이렇게 나누어 진 파일들을 모듈(module)이라고 합니다.

강의 제목은 refactor라고 붙였지만 일반적으로 refactor는 코드를 정리하는 것으로, 테스트용으로 만든 코드를 다른 사람이 이해하기 쉽게 정리하는 과정입니다. 변수명을 정리한다든지, 정렬을 바로잡는다든지, 쓸때 없는 부분을 지우고 다듬는 과정입니다.

사실 따지고 보면 전 항상 강의를 올리기 전에 refactor를 한 셈이죠.

app.js에서 passport, routes, models을 때어 낼 텐데요, 사실은 app.js를 다 만든다음 부분부분을 때어내는 것이 아니라, 각 부분을 처음 만들때부터 분리해서 만드는 것이 훨씬 쉽습니다.

일단 이것 저것 다 때어낸 app.js를 보겠습니다.

원래 300줄 가까이 되던 code가 40여줄로 줄었습니다. DB, routers, server start 그리고 express(app)에 붙는 미들웨어, passport를 제외하고 모두 각각의 파일로 옮겼습니다.

config/passport.js 

1번째 줄, 2번째 줄은 node package 모듈을 가져오고 있고, 3번째 줄은 user model 모듈을 가져오고 있는데, 

node package 모듈을 가져올때는 모듈 이름만 쓰면 되고, 직접 만든 모듈을 가져올때는 해당 파일의 상대주소(relative path)를 적어주는 것을 알 수 있습니다. 사실, 정확하게 이야기하자면, 파일 위치가 명시되지 않으면 node_modules에 해당 폴더가 있는 것으로 간주하는 것입니다.

혹시 호기심에 node_modules파일안의 package 파일들을 살펴본 적이 있다면, package들 역시 node 코드에 지나지 않는 다는 것을 보셨을 것입니다. 

38번째 줄에서 module.exports에 대입한 object가 require시에 대입이 되게 됩니다.

modules/Post.js


models/User.js


routes/home.js

app.js의 37번째 줄 app.use('/', require('./routes/home'));에 해당하는 부분입니다.

이 모듈은 router 객체를 export하는데, '/' route에 도달하면 이 개체를 사용하게 됩니다.

 

2번째 줄 : router를 module로 export하기 위해 express.Router()로 개체를 생성했습니다.

app.get(...)으로 만들었던 route을 router.get(...)으로 변경했습니다.

/router/post.js

마찬가지로 app.이 router.으로 바뀌었고, 또 한가지, 이 모듈은 app.js 39번째 줄 app.use('/posts', require('./routes/posts'));에 의해 사용되므로 이미 /posts route에 들어와 있는 상태이기 때문에 route을 명시할때 /posts를 써 줄 필요가 없습니다. 

'/posts'가 '/'로, '/post/new'가 '/new'로 변경됩니다.

모델 안에서만 사용되는 함수는 모델 안에 선언하여 사용하면 됩니다. isLoggedIn은 사실 여기도 쓰이고 post에도 쓰이지만.. 내용이 짧고 변화되지 않을 것이므로 그냥 두군데 따로 선언하겠습니다. 코드를 두번 반복하는 것이 정말로 싫으시면(바람직한 자세입니다) common functions을 위한 module을 따로 만들어서 빼셔도 됩니다.

/routes/user.js

마찬가지로 route를 변경했고, isLoggedIn과 checkUserRegValidation을 가져왔습니다.

이렇게 모듈정리는 좀 허무하게 끝이났고.. 마지막으로 .gitignore를 배워봅시다.

사실 지금까지는 github에 node package들을 그냥 막 upload해왔는데, 사실 그렇게 하지 않습니다.

(전 초반에 빨리 app 만드는 부분을 보여드리고 싶어서 이런 부분들을 일부러 설명하지 않았습니다.) 

다른 사람들의 github에서, 심지어 저의 다른 github코드를 다운받으면 node_modules 폴더가 없습니다. .gitignore를 통해서 빼고 올리기 때문이죠. gitignore는 github에 올리고 싶지 않은 파일이나 폴더를 git이 무시하게 할 수 있습니다.

1. .gitignore에 등록되는 순간부터 git에 영향을 받지 않기때문에 우선 node_modules 폴더를 지운 후에 commit을 해주세요.

(지우는 commit이 없으면 git에 계속 남아있습니다. 다운을 받지 않을 뿐..)

2. project폴더에 마우스 우측 클릭하시고 new file을 만들어 줍니다. 파일 이름은 .gitignore로 해주세요.


3. 무시할 파일명, 혹은 폴더명을 적어줍니다.
 

4. 콘솔에서 npm i 를 입력하면 package.json을 읽어서 package들을 다시 다운로드합니다.

5. 새로 생성된 node_modules 폴더가 회색으로 변한 것을 볼 수 있습니다. 이제 이 폴더는 git에 저장되지 않습니다. 

오늘 강의 요약

- 모듈화는 프로젝트 시작할때부터 하는 것이 좋습니다.

- node_modules도 프로젝트 시작할때부터 .gitignore에 넣는 것이 좋습니다.

- github에서 코드를 git clone하는 경우 십중팔구 node_modules가 .gitignore되어 있으므로 콘솔에서 npm i를 입력하여 package들을 받아야 실행할 수 있습니다.

다음은 이 강의의 마지막인 heroku를 사용해서 공짜로 내 웹사이트를 인터넷에 올리는 법을 알아보겠습니다!

github.com/imtaekh/my_app/tree/ba98e7a1b51dbb0b0093ff73048407bd4d18a00b에서 코드를 보실 수 있습니다.   git clone한 다음 git reset --hard ba98e7a하시면 컴퓨터에서 코드를 보실 수 있습니다. [출처] [Node.js 강좌] 11. Refactor & module & .gitignore|작성자 azure0777