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);
});
