Node.js 이용해서 간단한 글쓰기

박천규·2021년 3월 11일
0

웹 공부

목록 보기
6/6

학습 목표

  • Node.js 를 이용해서 MySQL를 연동하여
    간단하게 글을 쓰고 글 목록을 보여줄 수 있다.

어려웠던 점

  • html css js 만 공부하고 node.js를 해보려고하니 정말 처음 서버 키는거 부터 어려웠다. js의 문법과 같지만 쓰는 법이 생소하여 한문장 쓰는 것도 어려웠지만 조금씩 이해가 되었다.

공부 순서

  • 우선 Node.js를 이용하기 위해선 npm 개념을 알아한다. node.js를 좀더 편하게 이용하기 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.
  1. 우선 웹사이트를 구현할 프로젝트 폴더를 만든다. 본인은 vscode로 진행하였다 . 그 후 crtl + shift + ` 누른 후 진행할 프로젝트를 눌러 터미널 창을 띄운다.

그 후 터미널 창에 npm init를 한다.
이는 node.js 기본 환경 셋팅을 해준다,.
그 후 npm install express를 해준다.
express는 Express 는 NodeJS 를 이용하여 웹 서비스를 쉽게 개발하게 할 수 있는 프레임워크중 하나이다.

그 후 view 엔진 ejs를 설치해준다
npm install ejs node.js에서는 html를 띄울 수도 있지만 변수를 넘기고 Express에서 dynamic website를 만들기 위해 template이다.

나도 맨 처음에는 기존에 있던 홈페이지 js에 추가만 하면 되는줄 알았는데 전혀 아니였다. 검색을 통해 템플릿을 써야 함을 알고 그 중 가장 인기가 많고 간편한 ejs를 선택했다. 기존 html 문법을 그래도 사용 할 수있고 동적인 경우 html코드에 <%= ~ %> 를 사용하면 자바스크립트 코드를 이용 할 수 있다.

이제 코드를 알아보자

우선 node.js를 실행시킬 메인 js가 있어야한다.

이를 app.js로 하였다.

const express = require('express'); //  설치한 express를 불러온다
const app = express(); //express를 활성화 시킨다.
const db_config = require(__dirname + '/config/database.js'); //config/database.js 에 저장해놓은 mysql 정보를 불러온다.
const conn = db_config.init(); // db의 커넥터를 활성화 시킨다.
const bodyParser = require('body-parser'); //bobyPaser : API 요청에서 받은 body 값을 파싱하는 역할을 수행하는 것을 불러온다,
const moment = require('moment'); // 날짜 포멧을 위한 모듈
const path = require('path'); 
db_config.connect(conn); //db에 커넥터를 연결해준다.


app.use(express.static(path.join(__dirname,'/'))); //정적 파일을 쉽게 접근 할 수 있도록 경로를 바꿔준다. __dirname은 현재 폴더를 이야기 한다. 
//지금 현재 폴더 밑에 있는 파일들을 로드하여 사용 하겠다는 뜻 다수의 폴더를 선언 해줄 수도 있다.

app.set('views', __dirname + '/views'); // views 파일들을 현재 폴더 밑에 있는 views라는 폴더안에 있는 것을 사용하겠다는 뜻
app.set('view engine', 'ejs'); // view engine 으로 ejs를 사용한다.

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false})); // 어플리케이션에 연결 

app.get('/', function (req, res) { // '/'  즉 기본 index 경로로 요청이 되면 응답객체 res로 보낸다 . inedx페이지 입니다 라는 스트링을 응답한다.
    res.send('index 페이지 입니다!');
});

app.get('/list', function (req, res) { // /list 주소로 요청하게 될때 발생되는 이벤트 sql문을 실행시켜  rows에 담는다.
    var sql = 'SELECT * FROM board';    
    conn.query(sql, function (err, rows, fields) { // sql문을 서버를 통해 요청하면 콜백함수로 에러 유무 err와 sql문으로 얻어진 테이블 값들이
        //rows에 담긴다.

        for(let i =0; i<rows.length; i++){
            console.log('rows'+JSON.stringify(rows[i])); // 객체안의 값들을 보기위해 log로 찍어보았다.
            rows[i].date = moment( rows[i].date).format('YYYY-MM-DD'); //db에서 date 타입을 Date로 했기에 필요없는 부분은 날리려구 포멧해주어서 다시 넣어준다.
        }
        console.log("rows : "+rows[1].date);
        if(err) console.log('query is not excuted. select fail...\n' + err); // 만일 오류가 있으면 로그 띄우기
        else  res.render('board.ejs', {list : rows}); //오류가 안뜬다면 board.ejs 로 rows값들을 list에 넣어 보낸다.
    
    });
});

app.get('/write', function (req, res) { // /write로 요청시  write.ejs로 이동한다.
    res.render('write.ejs');
});

app.post('/writeAf', function (req, res) { //write.ejs에서 버튼 누를시 wirteAf 포스트가 발생하여 insert sql문을 실행한다.
    let body = req.body; //왜인지는 모르겠지만 body말고 다른 변수 쓰면 안됨..ㅎ 여기서 바디란 요청 객체인 write.ejs의 body를 말한다.
    console.log(body);

    let sql = 'INSERT INTO board VALUES(?,?,curdate())'
    let params = [body.title, body.content];  // body child ,form안에 있는 title ,content 이름을 가진 엘리멘트의 값을 가져온다.
    console.log(sql);
    console.log('params' +params);
    
    conn.query(sql, params, function(err) { // sql를 실행하고 VALUES 으로 params를 보낸다.
        if(err) console.log('query is not excuted. insert fail...\n' + err);
        else res.redirect('/list'); //오류 미 발생시 /list 돌아간다.

    });
});

app.listen(3000, () => console.log('Server is running on port 3000...')); //3000포트로 응답한다.

/config/database.js -> mysql 설정 파일이다

let mysql = require('mysql');
let db_info = {
    host: 'localhost',
    port: '3306',
    user: 'root',
    password: '자신의 패스워드',
    database: 'board' // db이름
}

module.exports = {
    init: function () {
        return mysql.createConnection(db_info);
    },
    connect: function(conn) {
        conn.connect(function(err) {
            if(err) console.error('mysql connection error : ' + err);
            else console.log('mysql is connected successfully!');
        });
    }
}

board.ejs -> 글 목록을 보여주는 페이지이다.

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/style/board.css">
        <title>문의 게시판</title>
    </head>
    <body>
        <div class="head">
            <h2>문의 게시판</h2>
            <p>문의 하실 사항이 있으시면 편하게 글 등록해주세요.</p>
        </div>
        
        <div class="content">
            <table border='1'>
                <colgroup>
                    <col width='80'><col width='150'><col width='400'><col width='100'>
                </colgroup>
                <thead>
                    <tr>
                        <th>글순번</th>
                        <th>글제목</th>
                        <th>글내용</th>
                        <th>날짜</th>
                    </tr>
                </thead>
                <tbody>
                    <% for(i = 0; i < list.length; i++) { %>
                    <tr>
                        <td><%=i+1 %></td>
                        <td><%=list[i].title%></td>
                        <td><%=list[i].content %></td>
                        <td><%=list[i].date%> </td>
                    </tr>
                    <% } %>
                </tbody>
            </table boader='1'>
            
          <button id="btn_write" onclick="location.href='../write'">글쓰기</button>
        </div>
        
        <script src="/js/board.js"></script>
    </body>
</html>

write.ejs -> 글을 쓰는 페이지이다.


<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/style/write.css">
        <title>글쓰기</title>
    </head>
    <body>
      //form 태그로 post방식을 이용하여 버튼 클릭시writeAf로 요청하는 태그
        <form action='/writeAf' method='post'>
            <div class="content">
                <h2>게시글 작성</h2>
            
                    <div class="input_title">  
                        <label > 제목</label>
                        <input type='text' name="title">
                    </div>

                    <div class="input_content">  
                        <textarea name="content" id="" cols="100" rows="30"></textarea>
                    
                    </div>
                
                    <button id='btn_submit' type='submit'>글쓰기</button>
                
            </div>
        </form>
        
      
    </body>
</html>

form에 대해서

method 속성 - get, post

태그의 method 속성은 사용자가 입력한 내용을 어떤 방식(get, post)으로 넘길 것인지를 지정하는 역할을 하며 속성값으로 get과 post가 있다. 여기서 get 방식은 주소 표시줄에 입력한 내용이 나타나며 256byte~4096byte까지의 데이터만을 서버로 전송할 수 있고 주소 표시줄에 입력한 내용이 노출되기 때문에 보안상의 문제가 민감한 경우에는 사용하지 않는다. post 방식은 입력된 내용의 크기에 제한을 받지 않고 입력한 내용이 노출되지 않기 때문에 회원가입, 로그인 시 등에 많이 사용된다.

추가 공부

form 속 input 타입 속성

  • submit form action에 해당되는 서버 URI로 전송시킬 버튼 생성

  • text : 한 줄짜리 텍스트

  • search 검색 필드 생성

  • 그외 tel , url eamil number , rage , ...

    mysql update, delete

  • update

let sql = 'UPDATE topic SET title=?, content=?, day=? WHERE id=?';
var params = ["","","",""];
 
conn.query(sql,params, function(err, rows, fields){
  if(err){
    console.log(err);
  }
  else{
    console.log(rows);
  }
})
  • delete
    var sql = 'DELETE FROM topic WHERE id = ?';
var params = [id값];
conn.query(sql,params, function(err, rows, fields){
if(err){
  console.log(err);
}
else{
  console.log(rows);
}
})
profile
박천규
자바 공부중
이전 포스트

Hello world 급 예제 Todolist 만들기.

0개의 댓글