국비지원 82일차 - NodeJS http, request, url, express, routing

http.js

//ex13http.js
//ex13_layout.html파일을 읽어서 브라우저에 출력해보자.
var fs=require('fs');
http=require('http');

http.createServer(function(req,res){
    fs.readFile("ex13_layout.html","utf8",function(err,data){
        //data에 파일 내용이 담긴다.
        if(err) throw err;
        res.writeHead(200,{'Content-Type':'text/html'}); //컨텍스트 타입 지정
        res.write(data); // 데이터 사용
        res.end(); //end하지 않으면 헤드에 서버가 계속 돌아가는 표시가 나타남
    })
}).listen(3333,function(){
    console.log("server started at http://localhost:3333");
})

request.js

//ex14request.js
var http=require('http'),
fs=require('fs');
/* request의 속성
[1] method : 요청방식
[2] url : 요청 url
[3] headers : 요청 메시지 헤더
[4] httpVersion : http버전 정보
*/
var server=http.createServer(function(req,res){
    var method=req.method; 
    var path=req.url; 
    var headers=req.headers;
    var version=req.httpVersion;
    console.log('요청 method='+method);
    console.log('요청 url='+path);
    console.log('요청 version='+version);
    //console.dir(headers); //log로 부르면 object만뜸

    // '/'로 요청이 들어오면 ex13_layout.html을 보여주고
    // '/login'으로 요청이 들어오면 'login.html'을 보여주고
    // '/join'으로 요청이 들어오면 'join.html'을 보여주기
    if(path=='/'){
        fs.readFile("ex13_layout.html","utf8",function(err,data){
            if(err) throw err;
            res.writeHead(200,{'Context-Type':'text/html'});
            res.end(data);
        })
    }else if(path=='/login'){
        fs.readFile("login.html","utf8",function(err,data){
            if(err) throw err;
            res.writeHead(200,{'Context-Type':'text/html'});
            res.end(data);
        })
    }else if(path=='/join'){
        fs.readFile("join.html","utf8",function(err,data){
            if(err) throw err;
            res.writeHead(200,{'Context-Type':'text/html'});
            res.end(data);
        })
    }


});
server.listen(3333,function(){
    console.log('started at http://localhost:3333');
})

url.js

//ex15url.js
//url내장모듈을 이용하여 request의 query string을 추출해보자.
var http=require('http'),
url=require('url');

var server=http.createServer(function(req,res){
    var reqUrl=req.url;
    var queryObj=url.parse(reqUrl,true); //쿼리스트링 파싱 (true값을 주면)
    var qObj=queryObj.query; //쿼리스트링만 추출

    //브라우저에 h1태그로 qStr을 출력해보기
    res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});
    var str="<h1>"+JSON.stringify(qObj)+"</h1>"; //JSON = Object객체를 문자열화 함
    res.write(str);
    //이 중에 name만 추출하여 이름:aaa
    str="<h2>이름: "+qObj.name+"</h2>";
    str+="<h2>비밀번호: "+qObj.pwd+"</h2>";
    str+="<h2>아이디: "+qObj.userid+"</h2>";
    res.write(str);
    //아이디도 추출하여 아이디:hong 식으로 출력하세요
    res.end();

}).listen(3333,function(){
    console.log('server started at http://localhost:3333');
})

express.js

//ex16express.js
//express모듈(외장모듈) => 설치해야 함
//터미널에 'npm install express --save' 치고 엔터
//'npm init' 치고 엔터만 계속 치다가 마지막에 Is this OK? (yes) 뜨면 yes치면 됨
//express모듈 설치되고 package.json파일에 설치된 모듈정보가 저장된다.
//express모듈은 http모듈과 같은 기능을 가지나 http보다 더 많은 기능을 가지고 있다.

var http=require('http'),
express=require('express'),
path=require('path'),
static=require('serve-static'),
url=require('url');
const { write } = require('fs');

var app=express();
app.use('/',static(path.join(__dirname,'public')));
//public이라는 디렉토리에 정적인 파일들(html,image,css 등)을 두고
// '/' 경로로 접근하고자 할 때 사용한다.
app.get("/test",function(req,res){
    res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});
    res.write("<h1>Hello</h1>");
    res.end();
})
//get방식으로 '/login'요청이 들어오면 해당 요청을 받아들이는 함수를 작성하고
//그 함수 내에서 사용자가 입력한 아이디와 비밀번호를 브라우저에 출력하세요
app.get('/login',function(req,res){
    //get 방식일 때 파라미터값 받기 ==> req.query를 이용해서 받는다.
    //post방식일 때 파라미터 값 받기 ==>body-parser를 설치해야 함 (여기선 안하고 ex17에서함)

    //1) url모듈을 사용하는 방법
    //2) req.query를 사용하는 방법
    
    //1)
    // var qobj=url.parse(req.url,true).query;
    // var uid=qobj.userid;
    // var pw=qobj.pwd;

    //2)
    var uid=req.query.userid; //userid==input name
    var pw=req.query.pwd;
    
    res.writeHead(200,{'Content-Type':'text/html; charset=utf-8'});
    res.write("<h1>아이디: "+uid+"</h1>");
    res.write("<h1>비밀번호: "+pw+"</h1>");
    res.end();
})


http.createServer(app).listen(3333,function(){
    console.log('http://localhost:3333');
})

routing

//ex17routing.js 어떤 요청이 왔을 때 어디로 보내는 것을 routing이라한다.
var http=require('http'),
express=require('express'),
fs=require('fs'),
static=require('serve-static'),
path=require('path'),
url=require('url'),
bodyParser=require('body-parser');// <-외장 모듈 body-parser => post방식일 때 필요한 모듈 (init할때 설치완료됨.)

var app=express();
app.use('/', static(path.join(__dirname,'public')));
//static() = 정적인 파일을 접근할 수 있도록 해줌

//미들웨어로 bodyParser를 사용하겠다고 명시하자.
app.use(bodyParser.urlencoded({extended:true})); //post방식일 때 <-안넣으면 파싱을 못함
//true값을 주면 객체 안에 객체를 파싱할 수 있도록 한다.

/* 라우팅-------------
    get / ==> index.html보여주기
    get /login ==> public/login.html보여주기 (fs모듈 사용하기)
    post /login ==> 웹브라우저에 응답 보내기 "<h1>Hello Login</h1>"
    get /users ==> <h1>모든 회원 목록</h1> 응답 보내기
*/

app.get('/login',function(req,res){
    fs.readFile("public/login.html","utf8",function(err,data){
        if(err) throw err;
        res.send(data); //express모듈을 설치하면 res.send()함수를 쓸 수 있다. send()함수에는 밑에 3개가 들어있다.
        //*주의사항* res.send() = 딱 한번 호출가능

        // res.writeHead(200,{'Content-Type':'text/html'});
        // res.write(data);
        // res.end();
    })
})

app.post('/login',function(req,res){
    //post방식일 때는 body-parser를 설치한 뒤
    //'npm i body-parser --s'
    //res.send("<h1>Hello Login</h1>")
    //get방식일 때 => req.query.userid 
    //post방식일 때 => req.body.userid
    var dummy={
        userid:'admin',
        pwd:'tiger'
    }

    var uid=req.body.userid;
    var pw=req.body.pwd;
    //사용자가 입력한 아이디와 비번이 dummy의 userid,pwd와 같으면
    //환영합니다. admin님! 출력하기
    //그렇지 않으면 아이디 또는 비밀번호가 틀려요 출력하기

    if(uid==dummy.userid&&pw==dummy.pwd){
        //res.send("<h1>환영합니다"+uid+"님!</h1>");
        res.redirect('/'); //redirect방식으로 홈페이지 이동
    }else{
        res.send("<h1>아이디 또는 비밀번호가 틀려요!</h1>");
    }
})

app.get('/users',function(req,res){
    res.send("<h1>모든 회원 목록</h1>");
})

//★★★★★★★★★★★★
//req.query <- get방식
//req.body <- post방식
//req.params <- path로 들어오는 값 받는 메소드
//★★★★★★★★★★★★

app.get('/users/:uid',function(req,res){
    //요청 path에 따라 다르게 들어오는 :uid => 요청 파라미터를 받아보자.
    var id=req.params.uid;
    console.log('id===>'+id);
    res.send("<h1 style='color:blue'>"+id+"님의 MyPage</h1>");
})

//존재하지 않는 페이지 처리하기
app.get('*',function(req,res){
    res.status(404).send("<h1>해당 페이지는 존재하지 않아요</h1>");
})



http.createServer(app).listen(3333,function(){
    console.log('http://localhost:3333');
})