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

이번에는 이전 시간에는 URL binding을 사용하였다면 Query String을 사용하여 MVC 패턴을 가지는 웹서버를 구축하겠다. 

<MVC 모델의 이해>

사실 MVC패턴은 지난시간과 유사해서 복사 붙혀넣기를 하였고 이번에 주의해야 곳은 routing을 하는 routes 파일의 index.js만 봐도 지난시간을 공부했던 분에게는 시간절약을 하실수 있을 것이다. 만약 처음으로 이글을 접하시는분은 처음부터 정독하기를 권장한다.

<첫번째 그림>

<두번째 그림>

두가지 그림이 있는데 둘다 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("/a",function(req,res)
{
    var name = req.query.myName; // 쿼리 스트링 방식
    res.render("param",{
        name : name
    });

});
module.exports = router;// module을 require 할때 반환 되는 것은 router 이다.

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

여기서 중요한 것은 Query String을 처리할 때는 req.query.key값을 이용하여 값을가져오는 것이다.

즉, 값을 받아올때는 query를 사용하여서 받아오고 그것을 객체화해서 param.ejs에 던져주는 형태이다.

이제는 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/?myName=홍길동이라고 입력하였을 때 사용할 파일은 

param.ejs 로 정의한다.

Query String 형식은 ?로 시작하고 키값과 value 값으로 구성되어 있으면서 &로 연결된다. 

예를들어 , ?myName=홍길동 이라면 myname은 key값이되고 홍길동은 value 값이된다.

두개라면 ?myName=홍길동&weight=70kg 이런형식으로 사용하면 된다.

<!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/a/?myName=홍길동 이라고 입력한다면 다음과 같이 출력된다.

사실 내 코드는 문제가 있다 .

localhost:5000/a/?myName=홍길동 를 보면 /a가 중간에 들어가 있다 사실 원하는 그림은 

localhost:5000/?myName=홍길동 를 입력하였을 때 처리됙길 원했지만 routes/index.js 파일을 정의할 때

router.get("/",function(req,res){
    res.render("index");
});
router.get("/",function(req,res)
{
    var name = req.query.myName; // 쿼리 스트링 방식
    res.render("param",{
        name : name
    });

});

로 정의를 하니 입력안 안먹히고 index.ejs 만 실행되어서 이런 형식으로 정의하였다. 만약 해결방법을 안다면 알려주길 바랍니다~

정리를 하자면 우리는 parameter passing중에서 Query String을 사용하였으며 express모듈을 이용하여서 MVC 모듈을 구성하였다.