노드 REPL 실행하고 종료하기


안녕하세요.
고코더 입니다.


Node.js 쉬운 디버깅을 위해 REPL을 사용하는 방법중에 가장 기초인 실행과 종료에 대해 알아봅니다.
이전 블로그 내용을 참고해주세요.



 1. REPL 실행


윈도우에서 명령프롬프트를 실행합니다. 그리고 node 라고 입력합니다.
그럼 왼쪽 꺽쇠가 생깁니다. '>' 이건 입력을 받고 응답할 수 있다는 표시입니다. 
이 표시가 깜빡거리면 REPL을 사용할 수 있는 준비가 완료된 단계 입니다.



 2REPL 종료


종료는 명령어 .exit를 클릭합니다. 혹은 컨트롤+C 를 두번 실행해도 됩니다.
Node에 REPL을 빠져나오면 명령프롬프트 기본 명령어 대기창으로 변경 됩니다.



마무리

쉽죠?


댓글을 달아 주세요


웹스톰에서 노드JS가 자동 실행 안될 때


안녕하세요.
고코더 입니다.


 1. 웹스톰은 컴퓨터에 node가 설치되어 있으면 자동으로 node.js 실행 환경을 설정합니다. 
이유는 잘 모르겠지만 Node가 실행안되는 분이 계시는 경우도 있습니다.



 2. 이럴 경우에는 환경설정 (Ctrl+ Shit + s)를 눌러 실행합니다.
Language & Frameworks을 실행합니다. 그러면 node interpreter 노드 실행 파일을 설정하는 곳과
Package manager를 NPM을 설정하는 곳이 있습니다. 이곳에 자신에 노드를 설치한 폴더로 맞추어 지정합니다. 


 3. 오른쪽 끝에 ...으로 되어 있는 열기 아이콘을 누르고 나오는 팝업에서도 +를 눌러 해당 node.js를 지정하면 됩니다.




마무리


노드가 설치되었다면 자동으로 잡힙니다. 혹시 설치 안하신건 아닌지요?


댓글을 달아 주세요


노드js 는 그저 삭제만 하면 되요


안녕하세요.
고코더 입니다.


노드JS를 윈도우에서 제거 하는 방법을 문의 하는 독자가 계셔서 남깁니다.
언어를 제거 하는 과정을 복잡하게 생각하는 경우가 많습니다. 하지만
대부분의 프로그램들은 삭제시에 자동으로 모든걸 정리해줍니다.
오라클19처럼 삭제가 어려운 프로그램도 있어서 그런지
-> Oracle - 19c 버전 오라클 삭제하는 방법



프로그래밍 삭제에 대해 어렵게 생각하는 분들이 계시네요

 1. 제어판 프로그램 삭제에서 node.js를 제거합니다.


그럼 자동으로 윈도우에 모든 설정을 정리합니다. 


 2. 노드 서버가 실행중이라면 이런 창이 뜨지만 기본 설정된 값을 선택하면 서버를 off 후에 알아서 삭제합니다. 


 3. 삭제를 진행합니다. 윈도우에 설정 정보까지 삭제합니다. 생각보다 시간이 조금 걸리네요.


 4. 삭제 후에 node 명령어를 실행해도 아무것도 나타나지 않습니다. 



마무리


모든지 물어봐주세요


댓글을 달아 주세요


노드JS에서 비동기로 소스 파일을 변경해보자


안녕하세요.
고코더 입니다.


Node.js의 가장 큰 특징중 하나는 비동기로 처리가 가능하다는 것입니다.
이전에도 설명을 자세히 다루었지만 다시 정의하자면 하나의 요청이 처리가 완료 되기 전에 다음 요청으로 진행이 가능합니다.
Node의 최대 성능을 처리해야 한다면 동기를 사용해야 합니다. 하지만 개발자의 의도에 따라 동기 처리와 비동기 처리가 가능합니다.



동기(synchronous) 예제


 1. 동기 방식으로 순차적으로 실행 가능한 Node 소스를 개발하였습니다. 파일을 읽어 올수 있도록 FileSystem(fs) 모듈을 이용해 파일을 불러오는 방식입니다. callback을 지정하지 않아 동기식으로 차례대로 실행을 합니다. 
1
2
3
4
5
6
7
var fs = require('fs'); //filesystem module
 
//동기(synchronous)
console.log(1new Date().getTime());
var data = fs.readFileSync('synchronous.js');
console.log(2new Date().getTime(),'File length:'+data.length);
console.log(3new Date().getTime());
cs

 2. 결과 모습입니다. 순서대로 실행되어 순번대로 1부터 3까지 실행 합니다. 



비동기(ansynchronous) 예제


 3. 이번에는 비동기식 예제를 개발합니다. 이전에 소스를 비동기 방식으로 만들어서 사용해보겠습니다. 
기존 readFileSync은 콜백을 사용할 수 없으므로 readFile으로 함수를 변경하고 콜백(callback)을 입력하였습니다. 
1
2
3
4
5
6
7
8
var fs = require('fs'); //filesystme module
 
//비동기(ansynchronous)
console.log(1new Date().getTime());
fs.readFile('ansynchronous.js'function(err, data) {
    console.log(2new Date().getTime(),'File length:'+data.length);
});
console.log(3new Date().getTime());
cs

 4. 이번에 순서를 보면 2번이 마지막에 실행되었고 3번이 먼저 실행되었습니다. 비동기로 노드를 사용하였기에 요청 이후에 바로 다음단계로 넘어가서 3번을 실행하였기 때문에 먼저 처리된 3번 log가 먼저 찍혀있습니다.




비동기에서 순차적으로 실행하기 


 5. 비동기를 기본 정책으로 사용하지만 로직에 따라 필요한 부분에서 순차적으로 실행되야 하는 경우가 발생합니다.
콜백(callback) 함수를 이용해 실행 순서를 제어 하는 방법입니다. 
1
2
3
4
5
6
7
8
9
10
11
12
var fs = require('fs'); //filesystme module
 
 
//비동기(ansynchronous) 순차실해
console.log(1new Date().getTime());
fs.readFile('ansynchronous_sync.js'function(err, data) {
    console.log(2new Date().getTime(),'File length:'+data.length);
    fs.readFile('ansynchronous.js'function(err, data) {
        console.log(3new Date().getTime(),'File length:'+data.length);
        console.log(4new Date().getTime());
    });
});
cs

 6. 콜백 함수를 이용해 개발자가 원하는 순서대로 실행 되도록 하였습니다.



마무리


비동기는 이제 필수 입니다.


댓글을 달아 주세요


노드JS가 운영되는 방식


안녕하세요.
고코더 입니다.


Node.js의 가장 큰 특징이라고 하면 싱글 쓰레드에 비동기 처리 방식입니다. 사용자의 요청은 한 곳에서 받지만 작업은 실질적으로 멀티쓰레드로 운영하여 결과를 구현합니다.
예제로 이 방식을 표현해보겠습니다.


 1. 싱글 스레드, 비동기 예제



" 따뜻한 오후 서점 독서중인 고코더는 배가 고파서 푸드코트로 이동합니다. 
주문 방식은 먼저 한식,중식,일식,양식등 다양한 입점사들의 요리를 보고 선택을 합니다.
그리고 계산대 앞에서 줄을 섭니다. 앞 손님은 돈까스를 주문합니다. 저는 요리 시간이 오래 걸리는 스테이크를 주문했습니다. 제 뒤에 기다리던 분은 재 빠르게 라면 하나를 주문합니다.
카운터 점원이 계산을 하면서 호출벨을 나눠주고 요리에 맞는 입점사 식당에 주문을 입력합니다. 입점식당은 주문 모니터에 "돈까스 1인분" 내역을 확인하고 요리에 들어갑니다.


고코더는 ITExpress 블로그에서 코딩 강의를 보면서 주문 벨을 만지작 거리면서 기다립니다. 저보다 늦게 주문한 라면이 제일 먼저 나오네요.
그리고 제 앞에서 돈까스를 주문했던 분도 음식을 픽업하고 자리에 돌아옵니다. 그리고 조금 기다리니 제 호출벨이 울리고 마지막으로 제가 주문한 스테이크를 가지러 갑니다. "

요즘 대부분 푸드코트가 운영되는 방식입니다. 계산은 한군데서 요리는 각 입점사가 하는 방식입니다.

여기서 푸드코트 계산을 담당하는 직원은 싱글 스레드 입니다. 
그리고 각 요리를 만들어서 벨을 호출하는 식당들은 비동기 방식입니다. 

입력은 하나의 스레드에서 받지만 순서대로 처리 하지 않고 먼저 처리된 결과 값을 반환해주는 방식이 바로
노드가 사용하는 싱글 스레드 비동기 방식입니다.

그렇다면 멀티 스레드 방식으로 운영되는 푸드코트는 어떨까요?


 2. 멀티 스레드, 동기 방식



어릴적 갔던 푸드코트들은 입주 식당마다 계산 점원이 따로 있었습니다. 
각 먹고 싶은 식당 앞에서 줄을 서고 계산하고 음식을 기다리는 방식입니다. 
배가 너무 고파서 오늘은 중식과 한식을 동시에 먹고 싶다면 각 식당에서 줄을 서고 결제를 합니다. 
음식점 마다 서있는 사람들로 인해 복잡하고 음식점들도 계산을 하는 직원이 한명씩 더 필요했습니다. 

만약 아주 큰 공간에 직원이 충분한 식당들로 이루어진 구조라면 물런 멀티스레드 동기 방식이 유리할 수도 있습니다.



마무리



하지만 최소한에 자원으로 최대한에 효율을 이끌어야 하는 인프라에 기본을 생각한다면 비동기가 좋지 않을까요?


댓글을 달아 주세요


게시판 만들기 delete


안녕하세요.
고코더 입니다. 


이번 시간에는 상세보기 페이지에서 글을 삭제할때에 
해당 비밀번호가 맞다면 해당 글을 수정하는 페이지를 만들어 보겠습니다.


 1. '/delete' board.js 글 삭제 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. 상세보기를 표현할 라우터를 추가합니다. 
router.post('/delete',function(req,res,next)
{
    var idx = req.body.idx;
    var passwd = req.body.passwd;
    var datas = [idx,passwd];


    var sql = "delete from board where idx=? and passwd=?";
    conn.query(sql,datas, function(err,result)
    {
        if(err) console.error(err);
        if(result.affectedRows == 0)
        {
            res.send("<script>alert('패스워드가 일치하지 않습니다.');history.back();</script>");
        }
        else
        {
            res.redirect('/board/list/');
        }
    });
});


 1-2. 소스 설명 
  • 87번 라인 
    • post로 넘어오는 /delete URI를 바인딩 합니다.
  • 91번 라인
    • 변수로 넘어온 데이터를 배열로 합칩니다. 
  • 93번 라인
    • update 쿼리를 작성 합니다. 글 고유번호와 비밀번호를 조건절로 걸었습니다.
  • 97번 라인
    • affectedRows - 해당 쿼리로 변경된 수에 행을 불러옵니다. 0이면 업데이트가 되지 않았으므로 비밀번호가 틀린 것입니다.
  • 99번 라인
    • 패스워드가 틀렸다면 send로 이전 페이지로 다시 보냅니다.
  • 106번 라인
    • 수정 성공후에 다시 원래 상세 페이지로 이동시킵니다.


삭제는 delete로 글을 완전히 삭제하는 기능입니다. 수정과 거의 동일한 로직이입니다.
상세 페이지에서 요즘은 하나에 페이지에서 가능하도록 개발하는 추세 입니다.


마무리


수정과 너무 비슷해서 글을 안썼는데 요청하는 분이 계시네요.


아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.




댓글을 달아 주세요


게시판 만들기 page


안녕하세요.
고코더 입니다.


이번 시간에는 게시판에 간단한 페이징을 구현합니다. 기존에 만든 리스트 페이지는 글이 추가되면 페이징 없이 아래로 노출되는 기본방식 입니다. 
오늘은 다시 리스트 페이지에 페이징을 추가해볼려고 합니다. 
처음 개발시에 페이징 구현을 하지 않는건 생각보다 많은 로직이 들어가는 기능 입니다. 리스트 개발시에 페이징을 함께 하면 개인적인 경험에서는 지치기 때문에 노드를 조금 익숙하게 받아들인 후에 살펴보는 것이 낫습니다.



 1. board.js 페이징 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. board.js에 아래 코딩을 추가합니다. 
기존 list는 그대로 두고 page 라는 페이지를 새로 만들어 페이징을 구현합니다. 
게시판 기능을 여러가지로 추가하면서 개선해 나가는 개발 습관을 길러보세요.
router.get('/page/:page',function(req,res,next)
{
    var page = req.params.page;
    var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
        "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board";
    conn.query(sql, function (err, rows) {
        if (err) console.error("err : " + err);
        res.render('page', {title: ' 게시판 리스트', rows: rows, page:page, length:rows.length-1, page_num:10, pass:true});
        console.log(rows.length-1);
    });
});

 1-2. 소스 설명 
  • 75번 라인 
    • page라는 URI 접속 경로를 추가 합니다. 이 페이지는 기존 리스트에 페이징이 추가된 기능입니다.
  • 77번 라인
    • 현재 페이지를 req객체를 통해 가져옵니다/
  • 78번 라인 
    • 기존에 사용한 select 구절 그대로 입니다.
  • 82번 라인
    • rows : 데이터베이스 쿼리에 데이터를 랜더링 합니다.
    • page : 현재 페이지를 랜더링 합니다.
    • length : 데이터에 전체 길이를 랜더링 합니다. -1을 한 이유는 DB에 행에 전체는 1부터 시작이지만 for문은 0부터 시작이기 때문에 -1을 합니다.
    • page_num : 한 페이지에 보여줄 행에 갯수를 말합니다.





 2. page.ejs 파일 추가


 2-1. 페이징 ejs 파일을 생성 합니다.
기존에 리스트 페이지를 수정해서 페이징 기능이 가능하도록 만들 것입니다. 


 2-2. 파일안에 내용을 아래처럼 채워주세요.
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
<a href="/board/write">글쓰기</a>
<table border="1">
    <tr>
        <td>번호</td>
        <td>작성자</td>
        <td>제목</td>
        <td>조회수</td>
        <td>수정일</td>
        <td>등록일</td>
    </tr>
    <%
    for(var i = (page * page_num) - page_num; i < (page * page_num); i++) {
    if(i > length){
        i++;
    }else{
        var data = rows[i]
    %>
    <tr>
        <td><%= i + 1 %></td>
        <td><%= data.name %></td>
        <td><a href="/board/read/<%= data.idx %>"><%= data.title %></a></td>
        <td><%= data.hit %></td>
        <td><%= data.modidate %></td>
        <td><%= data.regdate %></td>
    </tr>
    <% }
    }
    %>
    <tr>
        <td colspan="6">
            <%
            for(var j = 0; j < rows.length / page_num; j++){
            %>
            [<a href="/board/page/<%= j + 1 %>"><%= j + 1 %></a>]
            <%
            }
            %>
        </td>
    </tr>
</table>
</body>
</html>

 2-3. 상단 노출 소스 설명
  • 20번 라인
    • (page * page_num) - page_num : 처음 보여줘야 할 게시물을 찾습니다. 2페이지면 "(2*10)-10=10" 10번째 데이터부터 노출 합니다.
    • page * page_num : 마지막으로 보여질 게시물 번호를 찾습니다. "2*10=20" 20번쨰 데이터까지 노출 합니다. 
  • 21번 라인
    • 현재데이터가 전체보다 크면 i 값을 늘려 종료 합니다.
  • 24번 라인
    • i값이 아직 전체 데이터보다 작다면 data를 담아서 리스트에 노출 합니다. 


 2-4. 하단 페이징 소스 설명
  • 40번 라인
    • length / page_num : 전체 갯수와 페이지 노출 갯수를 나누어 총 페이지를 계산 합니다.
  • 42번 라인
    • 계산된 페이지 만큼 노출 합니다. 




 3. 결과 화면 


 3-1. 게시판에 페이징이 추가되어 페이지를 이동하여 원하는 데이터를 한눈에 볼수 있게 되었습니다.


 3-2. 페이지 이동시에 URI에는 맨뒤에 숫자에 따라 페이지가 나타나고 번호도 순서에 따라 노출합니다. 



마무리


간단한 페이징 방법까지 배워봤습니다.




아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요


게시판 만들기 update 


안녕하세요.
고코더 입니다. 


이번 시간에는 상세보기 페이지에서 글을 수정하고 비밀번호를 입력 한 후에 
해당 비밀번호가 맞다면 해당 글을 수정하는 페이지를 만들어 보겠습니다.



 1. '/update' board.js 글 수정 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. 상세보기를 표현할 라우터를 추가합니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
router.post('/update',function(req,res,next)
{
    var idx = req.body.idx;
    var name = req.body.name;
    var title = req.body.title;
    var content = req.body.content;
    var passwd = req.body.passwd;
    var datas = [name,title,content,idx,passwd];
 
 
    var sql = "update board set name=? , title=?,content=?, modidate=now() where idx=? and passwd=?";
    conn.query(sql,datas, function(err,result)
    {
        if(err) console.error(err);
        if(result.affectedRows == 0)
        {
            res.send("<script>alert('패스워드가 일치하지 않습니다.');history.back();</script>");
        }
        else
        {
            res.redirect('/board/read/'+idx);
        }
    });
});
cs


 1-2. 소스 설명 
  • 51번 라인 
    • post로 넘어오는 /update URI를 바인딩 합니다.
  • 58번 라인
    • 변수로 넘어온 데이터를 배열로 합칩니다. 
  • 60번 라인
    • update 쿼리를 작성 합니다. 글 고유번호와 비밀번호를 조건절로 걸었습니다.
  • 64번 라인
    • affectedRows - 해당 쿼리로 변경된 수에 행을 불러옵니다. 0이면 업데이트가 되지 않았으므로 비밀번호가 틀린 것입니다.
  • 66번 라인
    • 패스워드가 틀렸다면 send로 이전 페이지로 다시 보냅니다.
  • 70번 라인
    • 수정 성공후에 다시 원래 상세 페이지로 이동시킵니다.


수정은 등록과 다르게 update를 사용합니다. 권한이 작성자에게 있기 때문에 조건절로 해당 권한을 묻습니다. 
상세 페이지에서 요즘은 하나에 페이지에서 가능하도록 개발하는 추세 입니다.


마무리


업데이트까지 마무리 됐습니다.



아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요


게시판 만들기 read


안녕하세요.
고코더 입니다. 


이번 시간에는 리스트에 있는 글에
내용을 확인하는 상세 페이지를 개발 합니다. 
지금까지 강의를 잘 따라오신 분들이라면
이 글을 안보고도 개발이 가능합니다. 
지금 내가 어느정도 노드가 자신있는지 테스트 해보실려면
이 강의 전에 읽기 페이지를 한번 스스로 만들어보세요.



 1. '/read' board.js 상세보기 코딩 추가 


 1-1. board.js에 코딩을 추가합니다. 


 1-2. 상세보기를 표현할 라우터를 추가합니다. 
1
2
3
4
5
6
7
8
9
10
11
router.get('/read/:idx',function(req,res,next)
{
var idx = req.params.idx;
    var sql = "select idx, name, title, content, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " +
        "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board where idx=?";
    conn.query(sql,[idx], function(err,row)
    {
        if(err) console.error(err);
        res.render('read', {title:"글 상세", row:row[0]});
    });
});
cs

 1-2. 소스 설명 
  • 39번 라인 
    • read라는 uri 뒤에 idx 게시글의 고유번호를 받습니다.
  • 42번 라인
    • 쿼리를 작성합니다. 한개에 글만 조회 하기 때문에 마지막 idx 에 매개변수를 받습니다.
  • 44번 라인 
    • 매겨변수에 idx를 전달 합니다.
  • 47번 라인
    • row[0]에 데이터를 랜더링 합니다. 한개에 데이터만을 가져오도록 첫번째 행만 요청합니다.


쿼리에 idx만 조회 하고 하나에 데이터를 가져오는거 빼고는 글 리스트와 거의 동일한 구조입니다. 



 2. read.ejs 파일 추가 


 2-1. 글을 확인하는 글 상세 파일을 생성합니다. 
read.ejs 이름으로 생성합니다. 
리스트에 데이터를 클릭할때 자세히 확인할 수 있는 페이지입니다.



 2-2. 글 상세 페이지 내용 입력
상세 내역 HTML을 그대로 복사해서 코딩해주세요.
그대로 복사해서 페이지를 만들어 주세요. 
해당 페이지는 글을 상세기능과 글 수정으로 폼을 전송합니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
 
<form action="/board/update" method="post">
    <table border="1">
        <input type="hidden" name="idx" value="<%=row.idx%>"/>
        <tr>
            <td>작성자</td>
            <td><input type="text" name="name" id="name" value="<%=row.name%>" required/></td>
        </tr>
        <tr>
            <td>제목</td>
            <td><input type="text" name="title" id="title" value="<%=row.title%>" required/></td>
        </tr>
        <tr>
            <td>내용</td>
            <td><textarea name="content" id="content" cols="30" rows="10" required><%=row.content%></textarea></td>
        </tr>
        <tr>
            <td>패스워드</td>
            <td><input type="password" name="passwd" id="passwd" required/></td>
        </tr>
        <tr>
            <td>변경일</td>
            <td><%=row.modidate%></td>
        </tr>
        <tr>
            <td>등록일</td>
            <td><%=row.regdate%></td>
        </tr>
        <tr>
            <td>조회수</td>
            <td><%=row.hit%></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">글 수정</button>
                <a href="/board/list">목록</a>
            </td>
        </tr>
    </table>
</form>
 
</body>
</html>

cs

 2-3. 소스 설명
  • 10번 라인
    • post로 꼭 method를 지정해줘야 합니다. 
    • 폼은 /board/upate로 전송해서 수정 기능으로 보냅니다.

 2-4. 개발 완료된 HTML 화면입니다.
글쓰기 버튼을 클릭시 로 '/board/update'로 post를 전송합니다. 


상세 페이지를 조회 하는 예제 입니다. 개발하기 가장 쉬운 페이지입니다. 




마무리


처음 제안처럼 혼자 개발 해보셨나요?
역시 해내셨군요!




아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.



댓글을 달아 주세요


게시판 만들기 write 


안녕하세요.
고코더 입니다.


이전 시간에 게시판 리스트를 개발하였습니다.
이제는 이 리스트에 내용을 추가 할 수 있는
글쓰기 기능을 만들어보려고 합니다.

데이터베이스에 insert 하는 구문도 노드에서는
보기 쉽고 간단하게 구현이 가능합니다.



 1. '/wirte' board.js 글쓰기 코딩 추가 


 1-1. 저희가 이전 시간부터 만들어놓은
board.js에 코딩을 추가합니다. 


 1-2. 글쓰기 입력을 받을 폼을 표현할 라우터를 추가합니다. 
1
2
3
router.get('/write'function(req,res,next){
    res.render('write',{title : "게시판 글 쓰기"});
});
cs

 1-2. 소스 설명 
  • 21번 라인 
    • 글쓰기  write.ejs 를 랜더링 합니다. 




 2. write.ejs 파일 추가


 2-1. 글쓰기 뷰 파일을 생성합니다. 
ejs파일로 wirte란 이름으로 생성합니다. 
이곳은 프론트에 글쓰기 데이터를 입력 받을 페이지입니다.


 2-2. 글쓰기 내용 입력
입력할 HTML 내용은 기본 글쓰기 포맷입니다.
그대로 복사해서 페이지를 만들어 주세요. 
노드 소스가 없는 단순 HTML 페이지 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
 
 
<form action="/board/write" method="post">
    <table border="1">
        <tr>
            <td>작성자</td>
            <td><input type="text" name="name" id="name" required/></td>
        </tr>
        <tr>
            <td>제목</td>
            <td><input type="text" name="title" id="title" required/></td>
        </tr>
        <tr>
            <td>내용</td>
            <td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td>
        </tr>
        <tr>
            <td>패스워드</td>
            <td><input type="password" name="passwd" id="passwd" required/></td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">글쓰기</button>
            </td>
        </tr>
    </table>
</form>
 
 
</body>
</html>
 
cs

 2-3. 소스 설명
  • 10번 라인
    • post로 꼭 method를 지정해줘야 합니다. 
    • 폼은 /board/write 로 전송합니다. 


 2-4. 개발 완료된 HTML 화면입니다.
글쓰기 버튼을 클릭시 로 '/board/write' post로 전송합니다. 




 3. '/write' post로 입력 받아 데이터를 DB에 입력 


 3-1. 게시판 글쓰기 화면에서'글쓰기' 버튼을 누른 후에 post로 
전송 받은 데이터를 데이터베이스에 입력하는 부분을 코딩할 것입니다.

 3-2. board.js에 소스를 추가 코딩 해주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
router.post('/write'function(req,res,next){
    var name = req.body.name;
    var title = req.body.title;
    var content = req.body.content;
    var passwd = req.body.passwd;
    var datas = [name,title,content,passwd];
 
 
    var sql = "insert into board(name, title, content, regdate, modidate, passwd,hit) values(?,?,?,now(),now(),?,0)";
    conn.query(sql,datas, function (err, rows) {
        if (err) console.error("err : " + err);
        res.redirect('/board/list');
    });
});
cs
 3-3. 소스설명
  • 25번 라인 
    • post로 /write로 들어올때 진입하게 됩니다.
  • 26~29번 라인
    • req 객체로 body 속성에서 input name 파라미터를 가져올 수 있습니다. 
  • 30번 라인
    • 모든 데이터를 배열로 묶습니다. 
  • 32번 라인
    • insert 쿼리문을 작성합니다. '?' 매개변수로 배열에 있는 데이터와 순서대로 맵핑되어 입력 됩니다.
  • 33번 라인 
    • query 함수로 sql를 실행하고 datas로 매개변수로 데이터를 입력합니다. 
  • 35번 라인
    • 오류 없이 데이터가 입력되면 다시 list 페이지로 이동 합니다. 




 4. 결과 화면 


 4-1. 리스트 에서 글쓰기를 클릭 합니다.


 4-2. 글쓰기에서 내용을 입력하고 글쓰기 버튼을 누릅니다.


 4-3. 글쓰기가 완료되면 다시 리스트 페이지로 돌아와서 입력된 데이터를 확인 가능합니다.


가장 기초적인 데이터로 만드는 예제 입니다.
컬럼을 추가하거나 유효성 체크를 추가해서 개인실습을 해보세요.


마무리


어느덧 글쓰기까지 완료 되었네요


아메리카노 한잔으로 배우는 Node.js Express 기본편



해당 내용은 제가 집필한 책에 일부를 발취한 내용입니다.
도움이 되셨으면 후원에 마음으로 제 책을 전국 온라인 서점에서 구매해보세요.





댓글을 달아 주세요