MySQL 연동

# npm init
# npm i express

# npm i node-mysql

# npm i mysql2

mysql 접근권한 에러 발생 시 mysql2 드라이버 설치해보기

---

서버

server.js

const mysql = require('mysql');
const conn = mysql.createConnection({
    host: 'localhost',
    user: 'jwbook',
    password:'1234',
    database: 'myboard',
}); // 연결 설정
conn.connect(); // MySQL 연결 완료

//require: import 같은 의미 (라이브러리 가져오기)
const express=require('express');
const app=express();

app.use(express.static('public'));  // 미들웨어 설정 static resource를 다이렉트로 찾음

app.listen(8080, function(){
    console.log("8080 server ready...");
});

// app.get("/", function (req, res) {
//     res.sendFile(__dirname + "/public/index.html");
// });  // 미들웨어 설정하면 라우터가 필요 없어짐

app.get('/list', function(req,res) {
    const rows=conn.query('select * from post', function(err, rows, fields){ // err 있으면 1 없으면 rows 가져옴
        if(err) {
            console.log(err);
        } else {
            console.log(rows); // rows를 블럭 안에서만 사용하도록 해야됨
            res.send(rows);
        }
    });   

    // res.send(rows); // 이렇게 받아오면 안됨
});

---

클라이언트

my.js

testBtn.addEventListener('click', async function(){ // await을 사용하기 위해 async
    // 직접 사용 코드
    // var xhttp = new XMLHttpRequest();
    // xhttp.onreadystatechange = function() {
    //     if (this.readyState == 4 && this.status == 200) {
    //     // Typical action to be performed when the document is ready:
    //     //document.getElementById("demo").innerHTML = xhttp.responseText;
    //     console.log(xhttp.responseText);
    //     }
    // };
    // xhttp.open("GET", "/list", true);
    // xhttp.send();

    // 간접 사용
    let resObj = await fetch('/list');
    let data = await resObj.json();
    //console.log(data);
    let displayData = 
    `<thead>
        <td>ID</td>
        <td>Title</td>
        <td>writer</td>
        <td>created</td>
    </tead>
    <tbody>`;
    data.forEach((item, index) => { // item이 있을 때 까지 반복 (동기함수)
        displayData +=
        `<tr>
            <td>${item.id}</td>
            <td>${item.title}</td>
            <td>${item.profile_id}</td>
            <td>${item.created}</td>
        </tr>`
    });

    displayData += `</tbody>`;

    document.getElementById("datatablesSimple").innerHTML = displayData;    // displayData를 datatablesSimple에 HTML로 넣어줌 (innerText는 Text로 넣어줌)
});

XMLHttpRequest 사용 시 readyState == 4 의미

fetch: 내장되어 있는 XHR을 사용할 수 있게 해주는 내장 함수(동기함수)
제대로 수행 됐을 때 단계적으로 .then 실행

.then을 여러개 쓰는 것 보다 await 써서 fetch 수행되어 나온 결과를 변수에 담을 때 까지 기다림
반드시 await는 async 블럭 안에서만 사용 가능

아직 결과 값이 안담김 (비동기) -> await 사용해야됨

과제

동적인 내용에 modal 띄우려면 script 사용하는게 적당함
클릭되었을 때 실행될 function 작성

id를 기준으로 modal이 뜨기 전에 fetch 호출로 id에 대한 content 값을 가져오기
route 안에서 select content from post where id=1

---

에러 처리

function(err, rows){
  try{

  }catch(err){
  	 
  }
}

SQL로 db에 에러 발생 시

1. err를 send(err)로 보내기
2. err로 다시 err를 발생(throw err)시켜 웹 서버가 에러코드를 브라우저에 보냄

throw 문으로 에러 지정