MVC 흐름

MVC(Model - View - Controller) 패턴은 웹 어플리케이션을 제작할 때 편리함을 가져다 준다. Pug(구 Jade) 템플릿을 활용하여 이를 구현해보도록 하자. 

$ express pug todoBoard // express [원하는 template] [dir]

$ cd todoBoard

$ npm install // express에 필요한 기본 모듈들이 설치

$ npm start // 서버를 시작하고 localhost:3000으로 접속해 간단한 결과를 확인 가능

이런 순서대로 콘솔 창에 입력하면 express를 이용해 웹 어플리케이션을 만들 간단한 준비가 끝났다. express를 통해 만들어진 폴더의 목록을 보면 views, bin, routes, public, app.js 등이 존재한다. 그리고 npm install을 통해 node_modules와 package.json 파일이 만들어지게 된다. 각각의 폴더의 기능에 대한 설명은 필요할 때 설명하고, 지금은 템플릿을 구성하는 큰 흐름을 설명하도록 하겠다.

먼저 controllers 폴더와 models폴더를 만들어주자. 

views/index.pug 파일이 handlebars의 main에 해당하는 영역이다. 기본 뷰라고 생각하면 이해가 쉽다. models에 들어가게 될 .js 파일들은 데이터라고 생각하면 이해가 쉽다. 그리고 controllers 안에 .js 파일이 models의 데이터를 가져와서 views에 이용하기 좋게 다듬어 제공한다.