3. node.js - express를 이용한 MVC모델 구축[간단한 웹서버] -시리즈1

음... 이야기가 장황하니 어디서부터 이야기를 시작해야할지 잘 모르겠다...

일단 노드는 서버사이드 언어인 것을 잘 알 것이다. 즉, 사용자가 요청하고 그것에 대한 처리를 한 뒤, 출력을

주는 시스템이다. 예전에는 이것에 대한 모델이 정해지지 않았지만 최근에는 MVC 모델이 표준화되었다.

MVC모델이란 Model, View, Controller를 뜻하는 것이다. 이야기로는 감이 잘 안올 것이다. 그림을 살펴보면...

<첫번째 그림>

<두번째 그림>

두가지 그림이 있는데 둘다 MVC 모델을 의미한다 필자가 보기에는 두번재가 조금더 이해하기 쉬울 것 같다.

순서를 살펴보자.

1. 사용자가 요청을 한다.

2. Controller는 요청에 대한 정보를 Model에 요청을 한다.

3. Model은 데이터베이스에서 정보를 가져온뒤 Controller에 전달한다.

4. Controller는 정보에 대해 적당한 로직을 거친뒤 View에 전달한다.

5. 전달받은 인자를 적절한 곳에 배치한 뒤 View는 사용자에게 전달해주며 끝난다.

이것으로 각자의 역활을 알 수 있다.

Controller - 중앙 통제

model - 정보를 제공

View - 사용자에게 보여지는 모습을 제공

node.js는 이러한 모델을 구축하기 쉽게 express라는 모듈을 제공해준다. 

지금부터 express 모듈을 이용하여 간단한 mvc 패턴을 활용한 웹서버를 구축해 보겠다. 

나는 이것으로 mvc 패턴 구축과 node.js에서 파라메터 즉 인자 값을 전달 하는 3가지 형식으로 제작하겠다. 

위에서 보시다시피 사용자는 무언가를 요청할 때 인자값을 전달하며 요청을 한다. 그렇기에 이 값을 가지고 

일을 하여야 한다. 나는 지금부터 그 중 첫번째 방법인(잘 안쓰이기도 하다.) 

동적 URL 바인딩을 통해 인자를 받아 보겠다.

필자의 환경은 Webstorm - IDE를 사용할 것이다.

1. node.js 프로젝트를 생성한다.

2. 무언가 뜨면 configure를 누른다.

프로젝트가 생성되었다.

웹서버를 담당할 expressWebServer.js를 생성하자. 위치는 usingEpress 바로 아래에 생성한다.

package.json 파일을 들어가서 express모듈이 있는지 확인하자 없다면 

dependencies 안에 "express":"*" 를 선언하자.

이때, 이것은 추가이기 때문에 위치를 잘모고 쉽표(,)를 잘 찍어주자. 숫자가 아닌 "*"를 쓰는 이유는 

가장 최신버전을 의미한다.

그리고 지금 사진에는 빠졌지만 "ejs":"*"도 추가하자.

ejs란 html 문서와 같은 view를 담당하는 것 중에 하나이다. 자세한건 나중에 또 다루겠다.

먼저 expressWebServer.js를 코딩해 보겠다.

/**
 * Created by HOME on 2015-08-12.
 */
    //  1. 필요한 모듈들을 require 한다.
var http = require("http"),//웹서버를 실하는 역활을 하는 http 모듈
    express = require("express"),//MVC 패턴을 쉽게 구현해주는 express 모듈
    path = require("path"),//경로 설정시 유용하게 해주는 path 모듈
    app = express();// app는 express()모듈을 담는다.

    // 2. routes 파일에 routing을 담당할 모듈 정의한 뒤 객체를 받아온다.

var routes = require("./routes");//  "./routes" 은 두가지 의미를 가진다.
// (1). 내가 정의한 routes 모듈을 사용한다.
// (2). routes라는 이름의 파일에서 index 파일을 사용한다.
// 나는 여기서 2번째 의미로 사용하였다.

    // 3. app의 기본 설정을 한다.
// 기본 설정에는 view 역활을 하는 파일을 어디에 있는지와 어떤 엔진을 사용할 것인지
// routing을 하는 파일은 어디에 있는지
app.set("views",path.join(__dirname,"views"));
app.set("view engine","ejs");
app.use("/",routes);

    //4. http 서버를 구동한다.
http.createServer(app).listen(5000,"localhost");
console.log("startion....5000");

expressWebServer.j를 다음과 같이 정의 하였는데 이해가 안가는 부분이 있을 때 질문을 올리시면 답변을 하겠다.

이것이 main코드이다. 그리고 이제 view와 routing을 담당하는 파일들을 코딩해보자

view는 client가 요청하였을 때 결과를 주는 방식을 정의하는 것이며, routing은 예를들어 

네이버를 접속할 때 www.naver.com 을 입력을 할수도 있고 www.naver.com/group, www.naver.com/cheat 등 여러가지 url이 있을 수 있다. 

이것에 대한 입력이 들어왔을 때 어떤 곳에서 처리를 하는지 정하는 것이 routing이다 네트워크를 배웠다면 라우터를 연상하여도 좋다.

먼저, routing에 대하여 정의해보겠다. 위의 소스를 보면 

var routes = require("./routes");

app.use("/",routes);

가 존재하는데 첫번째는 routing을 하는 객체를 불러오는 것이며 괄호()안의 내용은 ./ -> 현재의 디렉토리를 의미하며 "routes는 폴더명이며 여기서 index파일을 실행하겠다."일수도 있으며 routes.js가 있다면 routes.js를 의미하는 것일 수도 있다. 여기서는 routes폴더의 index.js를 의미한다. 즉 routes 객체는 routes/index.js 모듈을 사용한다는 뜻이다.

두번째는 express를 담당하는 app에서 입력이 "/"로 시작하는 것이 있다면 routes에서 처리하겠다는 의미를 한다. 

그럼 routes를 정의해보자. 아까 의미한대로 routes라는 폴더내에 index.js 파일에 다음과 같이 코딩을 한다.

//expressWebServer의 express 객체를 생성한다.
//생성된 객체가 있다면 생성된 객체를 참고하기 때문이다.
var express = require('express');
var router = express.Router();//express 객체중에서 routing하는 능력이 있는 객체를 추출해낸다.

/* GET home page. */
router.get('/', function(req, res) {//만약 get 방식이며 "/"로 시작한다면 여기서 처리를 한다.
  //res는 client에게 돌려주는 변수이며 
  // render는 view에 준비한 화면을 뿌려주는 역활을 한다.
  res.render("index");//view 폴더에서 index 파일을 뿌려준다는 의미
});
//여기서는 URL binding을 사용하기에 "/"다음에 오는 주소는 userName으로사용하여 view에서 뿌려줄때 이용한다.
router.get('/:userName', function(req, res) {
  //req는 요청할때 들어오는 변수이며 이때 params를 이용하여야 해당 정보를 추출할 수 있다.
  var uName = req.params.userName;
  res.render("param",{//view에서 param파일을 뿌려주며 변수로 name을 같이 전달해준다.
    name : uName
  })
});
module.exports = router;// module을 require 할때 반환 되는 것은 router 이다.

이렇게 해서 routing을 해주는 index.js 를 정의하였다. 

이제는 view를 설정할 차레이다. 아까 usingExpress에서 view는 view폴더에서 처리한다고 정의하였기에 view 폴더에 이제 뿌려질 view들을 정의해보자 우리는 view 엔진으로 ejs를 사용한다고 하였다. 

view 폴더에 보면 index.ejs와 param.ejs가 생성된것을 볼수 있다. 그렇다면 우리도 이제 코딩해보자.

view 폴더에 index.ejs를 정의한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>환영합니다.</h1>
</body>
</html>

이것은 사용자가 localhost:5000으로 입력해왔을 때 기본 파일을 정의한 것이다.

그리고 사용자가 localhost:5000/홍길동이라고 입력하였을 때 사용할 파일은 

param.ejs 로 정의한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1><%= name%>환영합니다.</h1>
</body>
</html>

이제 모든 것이 정의되었다. 이제 expressWebServer를 실행 한뒤 브라우저에서 접속을 해보자.

콜솔창에 서버가 실행된 것이 출력된다.

우리는 주소를 localhost로 설정하였고 포트번호는 5000번을 사용하였기에 localhost:5000으로 접속해본다.

아까 index.js에서 "/"는 view->index.ejs를 실행 하는것을 기억하는가? index.ejs가 실행된 것을 볼수 있다.

그렇다면 이제 슬러시 "/"를 사용한 뒤 문자를 입력해보자

localhost:5000/홍길동이라고 입력해보앗다.

그리고 아무 문자나 써보았다.

기억하라! 우리가 사용한 parameter passing은 URL 바인딩 기법이다. 이것은 이정도 역활 밖에 못한다.

그래서 다음 시리즈에 Query String 기법과 Form tag post 기업을 포스팅 하도록 하겠다. 이 두가지가 중요하다.

결론 : 우리는 MVC 패턴으로 프로젝트를 구성하였고 노드에서는 이것을 도와주는 express라는 모듈이 있으며 우리는 이것을 이용하여 프로젝트를 구성하였다. 그리고 parameter passing 기법중에서 URL 바인딩 기법을 사용하여 사용자로부터 정보를 입력받았다.