2주차 강의-node.js.txt

소스코드 깃허브 주소 : https://github.com/zino1187


***일반 자바스크립트와 node.js의 차이

자바스크립트의 구성 요소 : 

1) 변수, 연산자, 제어문, 배열, 객체 등의 기본 언어가 가져야 할 문법

2) Data, Array, String, Math 등의 내장 객체

3) DOM api => 이걸로 http 문서를 동적 제어 가능

node.js의 구성 요소 : 

1) 변수, 연산자, 제어문, 배열, 객체 등의 기본 언어가 가져야 할 문법

2) Data, Array, String, Math 등의 내장 객체 

3) 서버 구축을 위한 각종 모듈, 전역변수 (이게 핵심)


****게시판(mysql) 만들어 보기

설치 버전이 아닌 mysql이라면 bin 내부로 들어가서 커맨드 창 열고 mysqld

클라이언트는 커맨드창으로 해 보자 

bin 내부 경로 커맨드창에서 mysql -h localhost -u root -p
패스워드 없게 설정해 놨으니 바로 엔터

db 가 뭐가 있나 보기 : show databases;

(오라클이면 select tablespace from...)

'create database 이름;' 으로 생성, 'use 이름' 으로 사용

'show tables'로 테이블들 확인

1.뭐가 있어야 할지 생각해 보기
=> No, 제목, 작성자, 조회수, 날짜...
=> PK는 No로 하면 안됨. PK가 지워지면 게시판에서 이빨이 빠져 버림. 그래서 No는 컬럼 안 만들어도 됨
=> 내용도 있어야 함

2.거기에 맞춰서 게시판에 쓸 테이블 만들기
create table notice(notice_id int primary key auto_increment,
 		    title varchar(200), 
		    writer varchar(20), 
		    content text, 
		    hit int default 0, 
		    regdate timestamp default now()
		   ) default character set utf8;

=>오라클이랑 다른 점을 생각하면서 쿼리를 작성해 보자.

3.디자인은 걍 가져오자

1)https://www.w3schools.com/howto/default.asp 에 가면 좋은 거 많음. 거기서 html 코드 복사.

2)visual studio code에서 list.html 만들고 그 코드 붙여넣는다.

3)로컬에서 편하게 보기 위해 view in browser 플러그인 설치하면 좋음


3.node로 서버를 구축하자

visual studio code에서 server.js로 만들어 보자


4.웹서버에 만든 파일 요청

express.use() 메서드와 __dirname 전역변수를 활용하자. server.js 파일 만든 거 참조.


5.글 쓰기 화면 http 파일 디자인

https://www.w3schools.com/howto/howto_css_contact_form.asp 에서 코드 복사


1)write.html로 저장

2)form의 id랑 name은 테이블 컬럼 값이랑 일치시키고
submit form은 button으로 교체

3)입력 부분은 무료 에디터 하나 가지고 와서 사용해 보자

https://ckeditor.com/ckeditor-4/download/

다운로드와 cdn 방식이 있는데 cdn으로 사용해 보자

<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>

4)편하게 가기 위해서 jquery도 설치
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

5)문서 onload 시에 에디터의 디자인이 적용되도록 코딩

//문서가 로드되면
$(function(){
    //기존 textarea의 디자인을 교체
    CKEDITOR.replace( "content");
});

6)전송버튼 누르면 서버에 전송되도록 코딩

일단 form 태그 수정

<form method="POST" action="/board/write">

거기에 맞춰 server.js 수정

/* 게시판 관련 요청 처리 */
app.post("/board/write", function(request, response){
    //파라미터 값들이 제대로 전송되어 오는지 확인...
    //express 모듈을 사용하면 body 속성을 이용하여 post 방식으로 전송된 파라미터 값들을 받아 올 수 있다.
    
    console.log(request.body);
    
});

write.html 문서 쪽에 스크립트 작성

$("input[type=button]").click(function(){
        $("form").submit(); //전송!
    });



여기까지 하면 undefined로 뜰 거임. 이걸 해결하기 위해서는

var bodyParser = require("body-parser"); //파라미터값들을 json 형태로 변환하여 받아줌, 외부 모듈(당연히 인스톨 필요)


//extended는 파라미터의 json 객체 안에 또 json을 포함할지 결정하는 옵션 : 여기서는 false로 줌
app.use(bodyParser.urlencoded({"extended":false}));
app.use(bodyParser.json());

이렇게 코딩하고 나면 전송 파라미터가 콘솔 로그에 출력될 거임.


7)이걸 DB에 넣기위해 접속 만들기

 //mySql에 접속하여 쿼리문 수행!!!
    var con = mysql.createConnection({

        host : "localhost", //호스트명
        user : "root",  //유저명
        password : "", //패스워드
        database : "node" //DB명

    });

    con.connect(function(error){
        if(error){
            console.log(error, "접속실패");
        }else{
            console.log(con, "접속성공");
        }
    });

=> https://www.w3schools.com/nodejs/nodejs_mysql_create_db.asp 가면 잘 나와 있음

8)접속에 필요한 정보 코드는 공통으로 빼 줘야 함.(모듈화 필요)

새 파일 작성(dbstring.js)

var constr = {

    host: "localhost", //호스트명
    user: "root",  //유저명
    password: "", //패스워드
    database: "node" //DB명

}

//모듈명 선언
module.exports = constr;

서버 스크립트 파일에 만든 모듈 끌어오기

//지금까지는 내부 또는 외부 모듈만 사용해 왔으나 개발자가 정의한 모듈을 사용해 보도록 하자!
//여러 방법이 있으나 일단 파일명으로
var constr = require("./dbstring.js");

//mySql에 접속하여 쿼리문 수행!!!
var con = mysql.createConnection(constr);


9)등록 버튼 한번 누를때마다 접속을 만드는 것은 비효율적이므로 커넥션 풀로 구현

/* 매 요청마다 db접속을 발생시키지 않기 위해 커넥션 풀을 이용해 본다. */
var pool = mysql.createPool(constr);


 //커넥션 풀로부터 접속 객체 하나를 빌려오자!
    pool.getConnection(function(error,con){
        if(error){
          console.log(error);
        }else{
            //제대로 풀로부터 접속 객체 얻어왔다면 쿼리 실행
            var sql = "insert into notice(writer, title, content)";
            sql += " values(?,?,?)";

            con.query(sql, [writer, title, content], function(err, result){
                if(err){ //쿼리 시도 자체가 실패한 경우
                    console.log(err);
                }else{
                    console.log(result);
                }
            });
        }
        // 커넥션을 풀에 반환
        con.release();
      });


참고 : 성공시 콘솔 메시지

{ writer: '이름임다', title: '제목임다', content: '<p>내용임다</p>\r\n' }
OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 1,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }



콘솔 메시지 참고해서 성공, 실패시에 메시지 하나씩 들어가도록 구현


 //커넥션 풀로부터 접속 객체 하나를 빌려오자!
    pool.getConnection(function(error,con){
        if(error){
          console.log(error);
        }else{
            //제대로 풀로부터 접속 객체 얻어왔다면 쿼리 실행
            var sql = "insert into notice(writer, title, content)";
            sql += " values(?,?,?)";

            con.query(sql, [writer, title, content], function(err, result){
                if(err){ //쿼리 시도 자체가 실패한 경우
                    console.log(err);
                }else{
                    console.log(result);
                    if(result.affectedRows == 0){
                        console.log("등록실패");
                    }else{
                        console.log("등록성공");
                    }
                }
            });
        }
        // 커넥션을 풀에 반환
        con.release();
      });


10)목록 조회 쿼리

// 게시판 목록요청
app.get("/board/list", function(request, response){
    //select 쿼리로 조회!!!
    
    pool.getConnection(function(error, con){
        if(error){
            console.log(error);
        }else{
            var sql="select * from notice order by notice_id desc";                
            con.query(sql, function(err, result, fields){
                if(err){
                    console.log(err);        
                }else{
                    console.log(result);     
                    //ejs 파일 실행!!!
                    response.render("list");                   
                }
            });                        
        }        
    });//대여!!

});

11)list.html에서 반복문을 구현하기 위해 list.ejs로 확장자 명 변경


12)list.ejs가 서버에서 구현되도록 ejs를 npm에서 인스톨


13)뷰 확장자, 디렉토리 설정

//스프링과 마찬가지로 nodejs 에서도 정해진 뷰템플릿을 지원한다
//jade, ejs 
app.set("view engine", "ejs");//확장자를 명시할 필요없음..
app.set("views", __dirname+"/views");//대신에 ejs 는 무조건

14) list.ejs 반복문

<% for(var i=0; i<10; i++){%>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr> 
<%}%>


15)가져온 데이터를 list.ejs에 뿌려 주기 위한 작업

//ejs 파일 실행!!!
response.render("list", {
     rows : result
});


//ejs 파일 수정
<% for(var i=0; i<rows.length; i++){%>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr> 
<%}%>

=>요렇게 하면 테이블 로우 수만큼 반복될 것


16)데이터 뿌리기

<% for(var i=0; i<rows.length; i++){%>
            <%var obj=rows[i]; //해당 번째의 객체 꺼내기%>
        <tr>
            <td></td>
            <td><%=obj.title%></td>
            <td><%=obj.hit%></td>
            <td><%=obj.regdate%></td>
        </tr> 
<%}%>

=>이렇게 하면 뿌려짐

17)날짜 처리, 날짜가 너무 장황하게 나오니까

쿼리를 변경한다!(이건 mysql의 문법)

var sql="select notice_id, title, writer, content, hit, date_format(regdate, '%Y-%m-%d') as regdate from notice order by notice_id desc"; 

6.글 쓰기버튼 추가

1)글 쓰기 버튼

<tr>
    <td colspan="4" align="right">
       <input type="button" id="bt" value="글 쓰기">
    </td>
</tr>

2)이동은 스크립트로

<script>
        window.addEventListener("load", function(){
           var bt = document.getElementById("bt");
           bt.addEventListener("click", function(){
               //write.html 요청
               location.href = "/write.html";
           });
        });
</script>

3)글 작성 완료 후 리스트로 돌아가도록 함

//서버 단 글 작성 로직에서...

else{
            //제대로 풀로부터 접속 객체 얻어왔다면...
            var sql="insert into notice(writer,title,content)";
            sql+=" values(?,?,?)";

            con.query(sql,[writer,title,content], function(err, result){
                if(err){//쿼리 시도자체가 실패한 경우..
                    console.log(err);                        
                }else{
                     console.log(result);  
                     if(result.affectedRows==0){
                        console.log("등록실패");                            
                     }else{
                        console.log("등록성공"); 
                        
                        //목록을 보여주기!!!
                        //클라이언트의 브라우저로 하여금 지정한 url로 다시 접속하라..
                        response.redirect("/board/list");
                     }                     
                } 
                //풀에 다시 반납하기!!
                pool.releaseConnection(con,function(e){
                });                                                       
            });
        }        

7.상세보기

1)list.ejs에 링크

<td>
   <a href="/board/detail?notice_id=<%=obj.notice_id%>">
   <%=obj.title%>
   </a>
</td>

2)서버에 1행 셀렉트 쿼리 추가

//한건 조회!!!
    pool.getConnection(function(error, con){
        if(error){
            console.log(error);
        }else{
            var sql="select notice_id,writer, title ,date_format(regdate,'%Y-%m-%d') as regdate, hit, content from notice where notice_id=?";
            con.query(sql, [notice_id] , function(err, result, fields){
                if(err){//에러가 났다면...
                    console.log(err);
                }else{
                    console.log(result);
                    //result 변수를 상세보기 페이지에 전달!!
                    response.render("detail",{                       
                        row:result[0] 
                    });//ejs에 데이터 전달
                }
                pool.releaseConnection(con, function(e){
                }); //반납
            });
        }
       

    });//대여

8.수정