node.js Express프레임워크 => MVC패턴으로 정리하기

Node.JS Express  MVC패턴 정리

 Node.JS는 자바스크립트 언어를 이용한다. 자바스크립트의 역사는 넷스케이프 사가 개발한 Ecma script이며, 구글에 검색해보면 MS의 JS script까지 자세하게 나온다. 프론트개발에만 사용했었던 자바스크립트는 node.js의 등장으로 서버까지 사용할 수 있게 되었고, 구글(크롬 v8 자바스크립트 엔진)이 크롬 웹브라우저에 집중하면서부터 계속 성장하고 있다.  

 웹개발은 구글과 워드프레스의 성장의 결과, PHP진영과 자바스크립트로 구분되고 있다. 닷넷 분야는 기존의 개발자들만 하는 추세인 듯하다. 향후 크롤링, 인공지능(tensorflow.js), 3D 프로그래밍(WebGL), IOT(cyclon.js) 가상현실 분야(WebRTC)가 성장할수록 자바스크립트는 더욱 확장할 것으로 예상한다.

 

 이번 포스팅에서는 Node.js의 기초인 Express프레임워크를 자신의 컴퓨터에 설치하고, 서버를 직접 만드는 방법을 알아보자.

__1 『Node.js 설치하기』

 Node.js를 다운받는다. Node.js는 Node.js 사이트에서 다운받을 수 있다. 구글에서 node.js를 검색하면 아래와 같은 node.js 메인 사이트로 연결된다. 

Node.js를 다운받고, 설치까지 했다면, cmd 명령프롬프트 창에서, `node -v`를 입력한다. `node -npm` 도 입력해서 버전을 확인한다. 혹시 설치가 불안하다면, npm install -g yo 입력을 해서 '요맨'을 설치한다. ( http://yeoman.io 설명 참조)

__2 『Express 프레임워크 설치하기』

`npm install -g express-generator`를 실행한다. (`-g`는 전역설치를 의미)

__3 『Express로 기본 뼈대 생성』

 폴더를 생성하고, cd 명령어로 해당 폴더로 이동한다. 그리고 `express --ejs`를 덧붙여서,  View템플릿으로 ejs를 사용한다고 명시한다. pug를 사용하려면 express --pug를 사용하면 된다.  

 npm을 실행하는 명령어로는,  `SET DEBUG=해당폴더:* & npm start` 혹은 `npm start`를 입력한다.

__4 『어플리케이션 실행』

 http://localhost:3000 을 입력하면 Express 뼈대로 만들어진 웹 어플리케이션이 나타난다.

__5 『MVC 폴더설정』

MVC 란, M : Model , V : View, C : Controller 를 뜻한다. 만일 MVC 패턴을 음식점에 비유한다면, 아래와 같다.

---

Model = '요리담당'

Controller = '서빙담당'

View = '홀 담당(매니저)'

---

위의 과정을 그대로 진행했다면, 현재 Express 프레임워크로 만든 폴더는 아래와 같다. 

view폴더가 밖에 나와있고, routes폴더도 위치가 어수선하다. 이를 정리해보자. 아래처럼 'server' 폴더를 생성한다.

server 폴더 아래에는 'config' , 'routes' , 'views' 폴더를 생성한다. config은 향후 DB정보를 담을 Model이 되고, routes는 컨트롤러 역할을, views 폴더는 ejs view 템플릿 파일이 들어간다.

이제 express를 설치할 때 자동으로 생성됐던 view파일 이동해야 한다. 상위에 있는 views 폴더 안의 'error.ejs' , 'index.ejs' 파일을 복사한다. 

그리고 위에서 미리 생성했던 server -> views 폴더 안에 'error.ejs' , 'index.ejs' 파일을 붙여넣기 한다. (처음에 생성된 views 폴더는 삭제한다)

MVC에서 컨트롤러라 할 수 있는 routes 파일을 옮겨보자. 가장 상위에 있는 routes폴더 안의 'index.js' , 'users.js' 파일을 복사한다. 

그리고 위에서 생성한 'server -> routes ' 폴더 안에 'index.js' 'users.js' 파일을 붙여넣는다.

__6 『app.js 파일수정』

 view파일과 라우트 파일 경로가 변경되었으니, app.js 파일을 수정해야 한다. 아래 사진처럼, 화살표 있는 3군데를 수정해준다. (단순, 경로만 변경) 

__7 『폴더정리 결과』

위의 과정대로 진행했다면, 현재 server 폴더 안에 DB정보나 컨트롤러, view파일 정보가 모두 들어가 있다. 

마지막으로 app.js파일에 아래와 같은 server구문을 넣어보자. app.js파일을 열고,

module.exports = app; 다음에 아래의 서버실행 코드를 입력한다.

app.set('port',process.env.PORT || 3000);

var server = app.listen(app.get('port'),function(){

console.log('Express server Listening on port'+server.address().port);

})

__8 『package.json 수정』

git에 올릴 경우를 대비하여, package.json파일에 기록을 남긴다.

---

{

  "name": "nodestudy",

  "description":"Study of node.js",

  "License":"webdoli",

  "Author":{

    "name":"moglZero",

    "url":"https://www.mogl3d.com"

  },

  "repository":{

    "type":"git",

    "url":"https://github.com/manbar34/nodeStudy.git"

  },

  "keywords":[

    "MVC",

    "Express",

    "Node.js"

  ],

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node app.js"

  },

  "dependencies": {

    "body-parser": "~1.18.2",

    "cookie-parser": "~1.4.3",

    "debug": "~2.6.9",

    "ejs": "~2.5.7",

    "express": "~4.15.5",

    "morgan": "~1.9.0",

    "serve-favicon": "~2.4.5"

  }

}

---