CRUD PART 2

1. 터미널에서 mysql.server start 로 서버를 켜주고

workbench에서 호스트를 byeonghun_app_2021 하나 만들고 들어가서

2. Schema를 만들어준다.

3. Apply를 해준다.

4. 테이블을 만들어준다.

5. 이렇게 테이블을 생성하고 , apply를 해준다.

6. 만든 테이블에 row를 확인해보면 위에 사진처럼 결과가 나온다.

7. 이제 VSCode로 가서 server파일에 index.js로 mysql에 연결한다.

const express = require('express');
const app = express();
const mysql = require('mysql');

const db = mysql.createPool({
 host: 'localhost',
 user: 'root',
 password: 'password',
 database: 'CRUDDataBase',
});

app.get('/', (req, res) => {
 const sqlInsert =
   "INSERT INTO movie_reviews (movieName, movieReview) VALUES ('inception', 'good movie');";
 db.query(sqlInsert, (err, result) => {
   res.send('hello Hun');
 });
});

app.listen(3001, () => {
 console.log('running on port 3001');
});

• 코드를 수정하고 mysql에서 query문을 다시 실행시켜서 테스트 데이터 값이 들어왔는지 확인해봤는데 나는 들어오지 않았다.
• 아쉬움은 뒤로하고 front에서 입력한 값이 db에 저장되도록 코드를 짜보자

8. FRONTEND - Client App.js 수정하기

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [movieName, setMovieName] = useState('');
  const [Review, setReview] = useState('');

  
  return (
    <div className="App">
      <h1>CRUD APPLICATION</h1>
      <div className="form">
        <label>Movie Name:</label>
        <input
          type="text"
          name="movieName"
          onChange={e => {
            setMovieName(e.target.value);
          }}
        />
        <label>Movie Name:</label>
        <input
          type="text"
          name="review"
          onChange={e => {
            setReview(e.target.value);
          }}
        />

        <button>Summit</button>
      </div>
    </div>
  );
}

export default App;

9. axios 설치해주기

• server file에서 나와서 client로 들어간 후 npm i axios

에러에 대한 생각

code: 'ER_NOT_SUPPORTED_AUTH_MODE',
  errno: 1251,
  sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client',
  sqlState: '08004',
  fatal: true
}

• index.js in server folder 에 app.use(express.json()); 추가
  • 내 생각엔 json화 시키지 않아서 제대로 읽지 못한 것 같다.