22.10.31
📕 node.js 와 mysql연동
그동안 DB에 사용자가 입력한 정보를 넣는 작업을 해서,
DB에 있느 정보를 불러오는 연습을 하였다.
node.js 와 mysql연동
📌 backend 부분
📄 db.js
const mysql = require('mysql');
// mysql을 사용하기위해 모듈을 불러온다.
// mysql 연결위해 필요한 정보들을 불러온다.
const dbconfig = {
host: 'localhost',
user: 'root',
password: 'nongdam1234',
database: 'nongdam',
multipleStatements: true,
};
connection.connect((err) => {
if (err) console.error('error connecting :', err);
console.log('데이터베이스 연결 성공');
});
// 이제 연결하려면 쓰는거 같다.
// 원래 app.js에 있었는데, 여기에 있어도 상관없을거 같아서
여기로 데려왔다.
const connection = mysql.createConnection(dbconfig);
// mysql.createConnection()을 이용하면 DB와 서버를 연결하는 객체를 만들 수 있으며 이를 이용하여 각종 쿼리(Query)를 실행시킬 수 있다.
module.exports = connection;· host : 사용할 DB가 설치된 호스트의 IP
· port : DB를 설치할 때 사용자가 지정한 포트번호. 따로 지정해주지 않았다면 기본값은 3306이다.
· user : DB의 user 이름
· password : DB를 설치할 때 사용자가 지정한 비밀번호
· database : 사용할 데이터베이스의 이름
그동안 조원들이 연결해놓은것을 쓰기만 했는데, 작동원리를 익혀야 할 거 같아서 node.js와 mysql의 연동법을 찾아봤다.
사용자가 입력한 값을 받기위해 post요청을 했었는데,
mysql에서 원하는 데이터를 불러오기 위해 먼저 get요청을 하였다.
📄 app.js
const express = require('express');
const path = require('path');
const connection = require('./db/db');
const admin = require('./Server/Router/Admin/index');
const app = express();
const PORT = process.env.PORT || 8080;
app.use('/admin', admin);
app.listen(PORT, () => {
console.log(`EXPRESS SERVER START ${PORT} `);
});
app.js에 많은 내용들이 들어있었지만, 당장 내가 공부할 부분에 필요한 내용만 가져왔다.
워낙 연결할 페이지가 많다보니, app.js에서 하지 않고,
각각 필요한 파일에서 DB를 연동하기로했다.
내가 맡은 부분은 관리자페이지라
admin.js에서 관리하기로 했고, app.js에서 라우터로 /admin으로 연결하기로 했다.
📄admin.js
router.get('/storeOpen', (req, res) => {
connection.query(`select * from admin_store;`, (error, row, field) => {
if (error) throw error;
res.send(row);
});
});
// admin주소에서 admin/storeOpen 주소로 설정을 해서,
해당 페이지에 db에 저장한 admin_store의 테이블을 불러오도록 했다.-> http://localhost:8080/admin/storeOpen
정보를 해당페이지에 요청해서 불러왔다.
📌 frontend부분
📄 StoreOpenForm.js
useEffect(() => {
const getData = async () => {
let response = await axios.get('http://localhost:8080/admin/storeOpen');
setData(response.data);
console.log(response);
};
getData();
}, []); 🚫 코드 작성 후, console에 response를 찍었을 때,
이런식으로 나와서,
console.log(Data[0].store_name); 이걸 콘솔로 찍었는데, 찍고 기다리면 값이 나왔는데,
새로고침만 하면 오류가 뜨는 것이다.
한참을 찾아보다, 조원에게 물어본 결과
새로고침되면서, 값이 조회되기전에 console을 찍으려고해서 값이 없어섯 오류가 나는 것이라고 했다.
+아 그리고 hooks는 무조건 맨 위로 올려야 한다고 한다.
if (Data === undefined) {
return null;
}
useEffect 코드 아래에 위 코드를 입력하니까 오류가 사라졌다,
새로고침을 하면 데이터가 undefined되니까 그때는 null로 리턴을 하고
getData함수가 실행되면서 값을 받아오면 그때 값을 받아온다.
console.log(Data[0].store_name);
=> 연주네 사과농장
데이터가 잘 출력되고, 원하는 곳에 데이터도 받을 수 있었다.
💬 프로젝트에서 DB에 저장하는것만 구현해서, DB에서 불러오는 연습을 해보았다.
중간에 에러가 났지만, 팀원의 도움으로 해결을 하고 무사히 데이터를 불러왔다.
