10/14 TIL : MySQL 적용

🔎 SQL(Structured Query Language)

• 관계형, Relational DBMS(RDBMS)
• 키와 값의 관계를 테이블화 시킨 원칙을 토대로 DB를 구성
• 장점: 구조화가 명확하여 예외가 없음, 데이터 입출력 속도가 매우 빠름, 신뢰성이 높음
• 단점: DB 구조 변경이 매우 어렵기 때문에 빅데이터 등 새로운 키가 추가될 수 있는 것에는 사용이 어려움
• 구문 연습: https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all 

 

🚩 DB에서 데이터 가져오기

SELECT * FROM 이름;

SELECT * FROM Customers;

 

🚩 원하는 컬럼의 값만 가져오기

SELECT 컬럼명 FROM table;

SELECT City, Country FROM Customers;

 

🚩 DB에는 영향없이 원하는 데이터 추가해서 가져오기

SELECT 컬럼명, 원하는 데이터 FROM table;

SELECT City, 1, 'test', NULL FROM Customers

 

🚩 원하는 조건을 충족하는 Row만 가져오기

SELECT * FROM table WHERE 조건

SELECT * FROM OrderDetails WHERE Quantity>5;

 

🚩 Row를 정렬해서 가져오기

ORDER BY

SELECT * FROM Customers ORDER BY ContactName;

SELECT * FROM Customers ORDER BY ContactName DESC;

SELECT * FROM Customers ORDER BY CustomerName ASC, ContactName DESC; 

 

🚩 Row의 개수 지정하기

LIMIT 원하는 Row 순번, 자르는 개수

SELECT * FROM Customers LIMIT 10;

SELECT * FROM Customers LIMIT 30 10;

 

🚩 Column 명을 변경해서 가져오기

AS

SELECT CustomerId AS id, CustomerName AS name FROM Customers;

 

🚩 테이블 합치기

JOIN ON

SELECT * FROM Products P JOIN Categories C ON P.CategoryID = P.CategoryID;

 

🔎 Local에 mysql DB 구축하기

• [터미널] mysql -u root -p
• [터미널] show databases;
• [터미널] use sakila;
• [터미널] show tables;

 

🚩 MySQL workbench

DB 생성: create schema `MyDB` default character set utf8mb4 collate utf8mb4_general_ci;

TABLE 생성: create table visitor ( id int primary key, counts int );

DATA 삽입하기: insert into visitor ( id, counts ) values ( 1, 0 );

DATA 삭제: delete from visitor where id = 2;

DATA 수정: update visitor set counts = counts + 1 where id = 1;

TABLE 수정 및 삭제

 

🔎 DB 통신용 서버 구축하기

• 리액트 프로젝트 최상단에 data-server 폴더 만들기
• [터미널] npm i express cors mysql

 

🚩 express 서버 코드 작성

// data-server/server.js
const express = require('express');
const cors = require('cors');
const PORT = 4000;

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors());

const dataRouter = require('./routes/data');
app.use('/data', dataRouter);

app.listen(PORT, () => {
  console.log(`데이터 통신 서버가 ${PORT}에서 작동 중`);
});

 

🚩 MySQL 서버 통신용 모듈 작성

// data-server/dbConnect.js
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: ' ',
  port: '3306',
  database: 'MyDB',
});

connection.connect();

module.exports = connection;

 

🚩 DB 통신용 컨트롤러 작성

// data-server/controllers/dataController.js
const connection = require('../dbConnect');

const db = {
  getCounts: (cb) => {
    connection.query('SELECT counts FROM MyDB.visitor;', (err, data) => {
      if (err) throw err;
      cb(data);
    });
  },
  incCounts: (cb) => {
    connection.query('UPDATE visitor SET counts = counts + 1 WHERE id = 1;', (err) => {
      if (err) throw err;
      cb(JSON.stringify('업데이트 성공'));
    });
  },
};

module.exports = db;

 

🚩 주소별 routing 처리

// data-server/routes/data.js
const express = require('express');
const router = express.Router();

const db = require('../controllers/dataController');

router.get('/count', (req, res) => {
  db.getCounts((data) => {
    res.send(data);
  });
});

router.post('/inccount', (req, res) => {
  db.incCounts((msg) => {
    res.send(msg);
  });
});

module.exports = router;

 

🚩 React 앱에서 데이터 요청

import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import OrangeButton from './OrangeButton';
import { next } from '../store/modules/mbti';
import { useEffect, useState } from 'react';

export default function Start() {
  const [counts, setCounts] = useState(0);
  const dispatch = useDispatch();

  useEffect(() => {
    async function fetchData() {
      const resCount = await fetch('http://localhost:4000/data/count');
      if (resCount.status === 200) {
        const num = await resCount.json();
        if (num[0].counts !== 0) setCounts(num[0].counts);
      } else throw new Error('통신 이상');
    }
    fetchData();
  }, [counts]);

  return (
    <>
      <Header>개발자 MBTI 조사</Header>
      <MainImg src="/images/main.jpg" alt="메인 이미지" />
      <SubHeader>
        개발자가 흔히 접하는 상황에 따라서 MBTI를 알아봅시다! 지금까지{'\n\n'}
        {counts} 명이 참여해주셨습니다.
      </SubHeader>
      <OrangeButton text="테스트 시작" clickEvent={() => dispatch(next())} />
    </>
  );
}

const MainImg = styled.img`
  width: inherit;
`;

const Header = styled.p`
  font-size: 3em;
`;

const SubHeader = styled.p`
  font-size: 1.5em;
  color: #777;
`;

 

* 통신에러 시 대처

alter user 'root'@'localhost' identified with mysql_native_password BY ' 비밀번호 ';

 

🚩 마지막 페이지에서 count + 1 요청

// src/components/Show.js
export default function Show() {
  const result = useSelector((state) => state.mbti.mbtiResult);
  const explanation = useSelector((state) => state.mbti.explanation[result]);
  const dispatch = useDispatch();

  const incCount = async () => {
    const resInc = await fetch('http://localhost:4000/data/inccount', {
      method: 'POST',
    });
    if (resInc.status === 200) console.log(await resInc.json());
    else throw new Error('통신 이상');
  };

  return (
    <>
      <Header>당신의 개발자 MBTI 결과는?</Header>
      <Explanation>{explanation.text}</Explanation>
      <Result>{result}</Result>
      <Additional>이건 재미로 읽어 보세요!</Additional>
      <AdditionalImg src={explanation.img} alt="팩폭" />
      <OrangeButton
        text="다시 검사하기"
        clickEvent={() => {
          incCount();
          dispatch(reset());
        }}
      />
    </>
  );
}