const express =require('express');    // 모듈을 가져오자.

const app= express();   //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 상수에 담아주자.

const bodyParser = require('body-parser'); 


app.locals.pretty= true;     // 코드를예쁘게해준다.

app.set('view engine','jade');

app.set('views','./views');


// use라는 api를 사용하여 express의 정적서비스를 app.js에서 사용할 수 있도록 연결시키자.

// public 디렉토리 안의 정적인 파일들을 직접적으로 사용할 수 있게 하는 코드

app.use(express.static('public'));  


// use라는 api를 사용하여 body-parser를 app.js에서 사용할 수 있도록 연결시키자.

app.use(bodyParser.urlencoded({extended: false}));

// 이렇게 미들웨어를 들여오고 use로 이 미들웨어(body-parser를 연결시켜서 request 객체의 body api를 사용할 수 있게 만든다.)



app.get('/', function(request, response){     // get 방식  // get을 라우터(길 안내자)로 생각하자.

response.send('hello world');

});


app.get('/rout',function(req, res){

res.send('<h1>hello router</h1>, <img src="/router.png">');

});


app.get('/login', function(req, res){

res.send('Login please');

});


app.get('/template', function(req, res){

res.render('temp',{_title:'jade',time:Date()});

});


app.listen(3000, function(){

console.log('connected 3000 port');

});



//서로 다른 네트워크를 중계해주는 장치. 보내지는 송신정보에서 수신처 주소를 읽어 가장 적절한 통신통로를 지정하고, 다른 통신망으로 전송하는 장치를 말한다.


//============================================================================================

// 정적인 파일을 모아놓은 (나의 경우 public)디렉토리는 패키지로 선언한 해당 디렉토리(package.json 파일이 있는..)에 위치시키자.  



// 작은 따옴표아니다. 물결표시 밑에 그래이브액센트?

// var a = ``; 그래이브 액센트 ``를 사용하여 html코드를 변수에 담아 해당 변수를 사용할 수 있다. 


 

app.get('/dynamic', function(req, res){

var time =Date(); 

var lis = '';

for(var i=0; i<5; i++){

lis = lis + '<li> coding</li>';

}

var output = `<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8">

</head>

<body>

Hello, Dynamic!

<ul>

${lis} 

<!--변수를 담아서 표현하는 방법 use 그래이브 액센트-->

</ul>

${time}

</body>

</html>`;        

res.send(output);

});


//============================================================================================


// 주의할 부분

// app.get('/info',function(req, res){

// res.send('hello')   로직상 가장 위에 있는 것만 응답객체에 실어서 보내지고 그다음껀 보내지지 않는다. 

// res.send(req.query.id);  

// });

app.get('/info',function(req, res){

res.send(req.query.name+','+req.query.id);     // req요청객체에 쿼리스트 링을 실어서!

});



app.get('/topic',function(req, res){

var topics =[

'javascript is the client language'

,'nodejs is the server side javascript'

,'express is a module of extra modules'

];


//`의 경우 작은 따옴표아닌것 알아두자.


var output = `

<a href = "/topic?id=0">Java Script</a><br/>

<a href = "/topic?id=1">Node js</a><br/>

<a href = "/topic?id=2">Express</a><br/>

${topics[req.query.id]}

`;

res.send(output);

});


//============================================================================================



app.get('/board/:number',function(req, res){

var boards =[

'javascript is the client language'

,'nodejs is the server side javascript'

,'express is a module of extra modules'

];



var output = `

<a href = "/board/0">Java Script</a><br/>

<a href = "/board/1">Node js</a><br/>

<a href = "/board/2">Express</a><br/>

${boards[req.params.number]}

`;

res.send(output);

});


//============================================================================================



app.get('/content/:number/:mode/:name',function(req, res){

var output=`

<h1>number : ${req.params.number}</h1>

<h2>mode : ${req.params.mode}</h2>

<h3>name : ${req.params.name}</h3>

`;

res.send(output);

});


// path 의 갯수를 맞춰줘야만한다. 만약 http://127.0.0.1:3000/content/0/1 정상적으로 화면이 뿌려지지 않는다. 


//============================================================================================


app.get('/form',function(req, res){

res.render('form');

});


app.get('/form_receiver', function(req, res){

var tit = req.query.title;

var des = req.query.description;

var output = `

<h2>title : ${tit} </h2>

<h2>description : ${des} </h2>

`;

res.send(output);

}); 


//============================================================================================



// post방식을 처리할 때는 app.post로 하는 것이 맞다. 

// 아래의 경우에는 request객체의 query를 사용한 것

// undefined 가 뜬다. title, description에 undefined .

// app.post('/form_receiver',function(req, res){

// var tit = req.query.title;

// var dsc = req.query.description;

// res.send('title: '+ tit+' and descriptrion: '+ dsc);

// });



// 기본적으로 request 객체 req 안에 사용자가 요청한 정보들이 들어가 있다.

// 즉, req의 query를 사용하여 title을 받아올 수 없다.

// 그럼 어떻게 post 방식으로 처리하였을 때 form_receiver 패쓰로 접근시 값을 나타낼 수 있는가.

// req 객체의 query가아닌 body로 받아줘야한다.

// 그런데 제약이 있다. body api를 사용하기 위해서는 body-parser 혹은 multer와 같은 middleware(미들웨어)를 사용하여 제어해야한다.

// body-parser 모듈을 설치해보자. npm install body-parser --save

// var bodyparser = require('body-parser'); 를 app.js에 입력하여 해당 모듈을 들여오자.

// app.js로 들어오는 모든 요청들은 body-parser라는 미들웨어를 먼저 통과한 다음에 라우터가 동작하게 된다.


// 결론

// get 방식의 경우에는 express 가 기본적으로 query api를 제공하지만 , 

// post방식의 경우에는 기본적으로 body api를 제공하지 않으므로,

// body-parser 혹은 multer와같은 미들웨어가 따로 필요하다.

// 그래서 위와같은 미들웨어를 npm으로 설치한 후에 1.require --> 2.use 를 이용하여 사용한다. 



// url에 127.0.0.1:3000/post로 접근할 경우에는 get방식으로 접근해야한다. 

// 그 이유는 url에 path를 입력하고 들어가는 것이므로 post방식으로 접근해서는 안된다. 올바르게 찾아가지 못한다.

app.get('/post',function(req, res){

res.render('post');

});


// request 객체의 body를 사용해보자.

app.post('/form_receiver',function(req, res){

var tit = req.body.title;

var des = req.body.description;

var output = `

<h2>title : ${tit}</h2>

<h2>description : ${des}</h2>

`;

res.send(output);

});




'nodejs' 카테고리의 다른 글

(22) supervisor 를 사용해보자.  (1) 2016.06.07
(20) 데이터 전송 (POST 방식)  (0) 2016.06.02
(19) 데이터 전송 (GET 방식)  (0) 2016.06.02
(18) GET vs POST  (0) 2016.06.01
(17) semantic url (의미론적 url) vs 쿼리스트링 방식  (0) 2016.06.01

+ Recent posts