노드란?


node.js의 등장배격은 2008년 구글에서 크롬브라우저의 소스코드를 공개하였고,

브라우저를 분석을 하니 V8 엔진 위에서 javascript 코드를 실행시켜주는 이벤트 처리 I/O 프레임워크가 존재하였는데 이것이 node.js 였다.

node.js는 


노드의 특징 4가지


1. Chrome JavaScript Engine V8 기반의 서버 플랫폼


- V8은 Google에 의해서 C++로 개발된 오픈 소스 자바스크립트 엔진


- JavaScript를 compile하여 native machine code 변경 후 runtime시 다시 최적화하여 실행하는 구조.

[스크립트 언어]

(컴파일 과정이 없다.)

javascript code -> native machine code


- Garbage Collection을 통한 메모리의 효율적인 관리. ( memory leak는 개선의 여지가 있음 )


- Standalone 고성능 JavaScript 엔진으로 사용가능. 


2. 빠르고 확장 가능한 Network 프로그램 개발에 특화


- TCP , UDP 관련 프로그램 개발 가능


- 하지만, 거의 대부분 Web Application 작성에 활용   






3. Single Thread 기반의 Non-Blocking I/O model 사용


노드를 사용하는 가장 중요한 이유중 하나는 비동기형 방식이다.


동기형과 비동기형의 차이를 알아보자.



<동기형>


첫번째 코드는 동기형일 경우이다. 

코드를 보면 query를 날리는 구문이 있다. 

var sum = result + 100; 이 실행되려면 query()의 결과값이 나와야 실행이 된다.

동기형이 친숙한 사람들은 이것이 당연하다고 생각하실 수도 있다.


하지만 비동기형 코드를 보자.


<비동기형>


비동기형의 경우 query를 던져놓고 바로 console.log("first")를 실행한다.


그리고 결과 값이 나오면 function(result){console.log("second")}가 실행이 된다.


그렇다면 비동기형식과 동기형식중에 무엇이 더 낳을까?


이것은 상황에 따라 다르다. 비동기형식은 I/O 작업이 많을 경우 빠른 속도를 보인다.



그리고 Single Thread 기반이란  multi Thread 기반과 비교하면서 이야기해보자


다음의 그림을 참조하면 된다.






<Multi Thread>

-동시에 Service할 수 있는 Client의 수는 Thread Pool안에 있는 가용한 Thread의 수와 동일


-일반적으로 Thread Pool안의 Thread는 500~2000. ( 2000을 넘는 경우는 거의 없다. )


-할당된 Thread가 IO작업( Network, File, DB )을 하게 되면 blocking 방식으로 처리되어 해당 Thread가 CPU를 사용하지 않는 상태(wait 상태)로 변환.


-즉, IO시간만큼 Thread는 blocking.




<Single Thread>


Node.js 는 Single Thread로 구성되어 있다. 내부적으로는 Thread Pool 로 구성되어 있다.





4. Event Driven Programming Model 


이것은 간단히 말하면 node는 non-blocking 기반이기 때문에 항상 이벤트가 발생하며 이벤트에 해당하는 작업이 실행된다. 


노드에서 이벤트 처리를 하는 것은 다음 링크를 참조하자


http://posnopi13.tistory.com/9







Posted by 구레이더

서버 사이드 언어라면 mysql을 연동할 수 있는것이 당연하다. 

일단 여기서 전제는 mysql을 다들 쓰실줄 아는 것으로 하겠다. 

노드에서는 mysql의 접속을 도와줄 mysql이라는 간단한 모듈이 있다. 

"mysql"모듈을이용하여 mysql에 접속해보겠다.


처음엔 cmd 창에서 mysql을 실행하겠다. 이미 데이터베이스와 사용자 id는 생성되어있습니다.

mysql 실행

mysql 접속하여 현재 상태를 확인해 보겠습니다. 


현재 mysql에 생성된 데이터베이스 목록들입니다.



<프로젝트 생성>

1. package.json 작성

우리는 mysql 모듈만 사용할 것입니다. "mysql":"*"를 작성한 뒤 모듈을 추가합니다. 

오른쪽 클릭후 [run npm update]를 누르시면 됩니다.

2. 그리고 app.js 를 생성하여 코딩을 할 것입니다.

3. app.js 코딩

/**
* Created by HOME on 2015-08-13.
*/
// 1. 필요한 module require - mysql
var sql = require("mysql");
// 2. mysql 접속 경로 설정
//option 객체에 데이터들을 넣는다. 접속은 내 pc로 하기 때문에 localhost이며
//포트번호는 mysql이 지정된 3306을 사용한다.
//그리고 미리 만들어 놓았던 아이디와 비밀번호인 nodejs를 이용하여
//library 데이터베이스에 접근한다. 이것은 내가 미리 만들어 놓은 것들이다.
var option = {
host: "localhost",
port: 3306,
user : "nodejs",
password : "nodejs",
database : "library"
};
// 3. 접속하는 객체생성
//sql 객체에서 연결을 담당하는 객체에 option을 넣으며 연결담당 객체를 받는다.
var conn = sql.createConnection(option);
// 4. mysql 접속
conn.connect();
// 5. mysql 쿼리문과 콜백함수 정의
//잊지마라 노드는 비동기처리를 한다. 그렇기에 작업을 받고 sql에 던저놓고 다른 일을 한다.
//그리고 그 일이 끝났을 때 이벤트가 발생하며 다음에 정의된 함수가 실행되게 되어있다.
//일단은 DB에 접속하기 위한 코드이므로 출력을 해보겠다.
conn.query("select * from books",function(err,results,field){
console.log(err);
console.log(results);
console.log(field);
conn.end();
});


4. 콘솔창 확인

많은 자료들이 콘솔에 출력되었다.





만약 쿼리문이나 중간에 오류가 있다면 일부러 password->passward로 고쳐보았다. 이것은 제가 실습중에 실제로 한 실수이며 오류코드를 찾는데 한참 결렸니다. 이것으로 보아 이 option을 넘기는 값의 변수이름까지 정해져 있다고 보아도 무방할 것입니다. 이것은 변수들을 mysql에 비교 대입하기 때문에 값뿐만 아니라 key값까지 조심해야 합니다.



결과창은 에러가 출력 됩니다. 이것은 결과값이 err에 들어가고 이것을 콘솔창에 찍었기 때문입니다.




각자 쿼리문은 알아서 잘 sql문에 맞게 작성하시면 올바르게 나오니 걱정 마시구요. 하지만 이런 코드를 작성하였을때 한가지 문제점이 있습니다. 그것은 바로 연결을 할때 시간이 오래걸리는 점입니다. 사용자가 적다면 이것은 크게 문제시 되지 않지만 만약 사용자가 많다면 문제가 발생할 것입니다. 이런 문제점을 예방하기 위하여 mysql은 DB Pool이라는 개념이 존재합니다. 이것은 미리 mysql과 연결되어 있는 connection을 만들어서 사용자가 요청이 들어오면 이것을 할당해주고 나중에 반납하는 형식으로 하여서 맨처음 DB Pool을 생성할 때에만 시간이 소요되며 결과적으로 연결 시간을 절약할 수 있습니다. 이것에 대한 방법은 다음 시간에 알아보도록 하겠습니다.






Posted by 구레이더

parameter Passing 마지막 방법인 form tag post 방식을 이야기 하겠다.

여태까지 말한 3가지가 parameter Passing의 전부이다. 이 방식은 post방식 둘다 가능하다.


시리즈 1,2 와의 차이점이 있다면 바로 body-parser라는 모듈을 이용하는 것이다.

이것은 express에는 없는 기능을 보완하기 위하여 생성된다. 

거두절미하고 본문을 으로 들어가겠다. 프로젝트의 구성은 


이런형식이다. 다른 파일들도 많은데 이것을 생략한 이유는 사용하지 않기 때문이다 우리는 위에서 명시한 파일만 사용할 것이다. 


순서대로 코딩해보자.

1.우선 패키지.json을 봐서 body-parser 와 ejs를 추가하자.

{
"name": "usingExpress_form_tag_post",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0",
"ejs":"*"
}
}

2. parameterPassing.js 코딩

//   1. 필요한 module require
var http = require("http"),//웹서버를 구축하기위해서
express = require("express"),//routing 기능을 사용하기 위해서
app = express(),//express의 함수를 한번실행한 결과를 app로 가진다.
path = require("path"),//경로지정을 조금 더 편하게 하기 위해서
bodyParser=require("body-parser");//form tag post 방식에서는 post형식이므로 body를 탐색하기위해 필요
// 2. routing module require

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

// 3. view 폴더 들과 엔진을 설정
app.set("views",path.join(__dirname,"views"));
app.set("view engine","ejs");

// 4. express
//app가 못하는 작업을 bodyParser가 하도록 한다. 이때 use의 순서가 바뀌면 에러가 난다.
app.use(bodyParser());
app.use("/",routes);
// 5. 웹서도 기동
http.createServer(app).listen(5000,"localhost");
console.log("start.... - 5000");

3. login.html 파일 코딩

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://localhost:5000/" method="post">
ID : <input type="text" name="uID"><br>
PW : <input type="text" name="uPW"><br>
<input type="submit" value="서버에 접속해요!!">
</body>
</html>

4. param.js 코딩


var express = require("express"),
router = express.Router();

router.get("/",function(req,res){//맨처음 접속하면 login.html 파일이 실행되도록 한다.
res.sendFile("login.html",{
root : "./"//이것을 한 이유는 login.html 이 현재 폴더가 아닌 상위폴더에 존재하므로
//"../"를 하면은 상대적 상위폴더 개념인데 이것도 안되고
//__dirname 은 현재 폴더인데 당연히 안되서
//"./" 프로젝트의 기본 폴더를 지칭하는 이것을 사용
})
});
//"/"가 들어와도 get과 post방식의 차이로 실행되는 것이 다르다.
router.post("/",function(req,res){
//html form으로 부터 데이터를 받아요!!
//post를 받으려면 body-parser라는 module을 이용해야지 편하게 받아요
var id = req.body.uID;//login.html에서 지정한 id를 req.body라는 새로운 기능을 이용하여 추출
var pw = req.body.uPW;//login.html에서 지정한 id를 req.body라는 새로운 기능을 이용하여 추출
if(id=="test"&&pw=="1234"){//임시적으로 비번과 id를 저장해서 결과에 따라 해당 파일 출력
res.render("loginSuccess");
}
else{
res.render("loginFail");
}
});

module.exports = router;

5. loginFaile.ejs / loginSuccess.ejs 파일 정의

<loginFaile.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>로그인에 실패했어요.</h1>
</body>
</html>

<loginSuccess.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>로그인에 성공했어요.</h1>
</body>
</html>


이것으로 모든 파일 코딩이 완료 되었다. 전체적인 파일의 위치를 다시 확인하자면



자 이제 파일을 실행해보자

1. parameterPassing.js 파일 실행을 하면 콘솔창에 출력이 된다.

2. localhost:5000으로 접속한다.

3. id / pw 를 입력한다.

4. 올바르게 입력되었다면 성공 

5. 올바르게 입력되지 않았다면 실패

6. 실패 페이지 확인할수 있다.



이것으로 우리는 form tag post 형식까지 배워보았다. 간단한거 같지만 만약 이 페이지를 보지 않았다면 엄청난 삽질을 해야했을 것이다. 왜냐하면 node 관련된 자료가 생각보다 적기 때문이다.


이것으로 paramete Passing 에 대한 이야기를 모두~~ 끝마칠수 있다!!

Posted by 구레이더

이번에는 이전 시간에는 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 모듈을 구성하였다.


Posted by 구레이더

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


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


주는 시스템이다. 예전에는 이것에 대한 모델이 정해지지 않았지만 최근에는 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 바인딩 기법을 사용하여 사용자로부터 정보를 입력받았다.


Posted by 구레이더

이번시간부터는 node에 대하여 공부하여 보겠다. 노드는 서버사이드에서 구동하는 자바스크립트이다. 그렇기에 기본적으로 


자바스크립트와 유사하며 모든 형식이 non-blocking 이다. 즉, 비동기 형식이다. 


첫번째로 공부할 것은 node의 모듈화를 하는 방법과 유의사항이다.


모듈 파일인 <testModule.js>를 생성하여 본다. 그리고 모듈들의 기능이나 변수를 export.test1,export.test2,export.myinfo()


로 객체의 변수로 정의한다.


그리고 <test.js>라는 파일을 만들어서 필요한 객체 require을 한뒤 객체의 변수들을 각각 console창에 찍어본다.


<tip> 모듈화를 하였을 때 모듀들을 실제 사용하려면 본파일에 객체를 불러와야 한다. 

이때 사용하는 형식이 require()을 사용하는 것이다.

var 변수명 = require("  모듈이름  ")

그리고 이때 생각해야 하는 것이 모듈이 내부모듈인가 내가 정의한 모듈인가 이다. 내가 정의한 모듈이라면 

모듈이름에 "./모듈이름"을 해야 한다. 이것은 현재의 디렉토리에서 모듈이름의 파일을 찾아서 객체화하기 때문이다.

내부모듈이라면 "모듈이름"만 써도 되겠다.



위의 그림에서 보이듯이 콘솔창에 test1, test2, myinfo()가 제대로 출력이 된것을 확인할 수 있다.

process.cwd()는 현재 파일이 어디서 실행되었는지를 보여주는 함수이다.



그렇다면 이번엔 아까와 <test.js>는 코드가 동일하지만 <testModule.js>에서 exports.~~ 형식으로 모듈화한 뒤 module.exports를

이용하여 마무리 코드를 사용해 보겠다.



실행한 결과 undefined와 myinfo()부분에서는 오류가 난다. 이 뜻은 결국 앞에 코드들이 없어졌다는 뜻이다.

module.exports = "  " 이것은 앞에것을 무시한 새롭게 모듈을 추출하는 형태이기 때문이다.

그래서 모듈화를 할때 반환되는 값이 하나일때는 이형식을 사용하여도 좋지만 여러값인 경우에는 exports.변수명 = 정의

형식으로 하면 좋다.



앞의 console을 주석처리한 뒤 다시 실행하면 console창에 잘찍히는 것을 환인할 수 있다.



Posted by 구레이더