Beginners CRUD Tutorial - ReactJS, MySQL, NodeJS

Beginners CRUD Tutorial - ReactJS, MySQL, NodeJS

 

쇼핑몰 장바구니 페이지 클론 코딩은 잘 구현되었는데 직접 새로운 프로젝트를 구현하려고 하니 어려워서, Beginners CRUD Tutorial 내용부터 클론코딩 하였습니다. 다음 목표인 쇼핑몰 상품리스트에 데이터 연동 해보고 싶어 전체적인 내용 기록 합니다.

npx create-react-app new 프로젝트 생성 후 client, server 폴더 각각 생성

1. client
2. servernpm install mysql express
3. npm init

client - 웹페이지 시작시 npm start

server - 서버 시작 시 node index.js

연결되지 않은 것 같으나 터미널 내용 보시면 3001로 포트가 진행 중

Mysql - 폴더와 테이블을 생성

PK : Primary Key ( PK )

테이블에서 특정 row 하나를 식별하는 역할, 특정 row를 고유하게 나타낼 수 있는 값

NN : Not Null (NN)

pk와 함께 반드시 하나의 값을 가지고 있어야 하고 빈 값을 가지면 안 될 때 사용

AI : Auto Increment ( AI )

Auto Increment 컬럼에 관해서는 DBMS가 '자동으로 증가'하는 값을 넣어준다.

연결 오류

npm install cors

해결 방안

app.use(express.json());

클론 했던 유투버가 이 부분이 빠져있어서 발생했다고 원인을 찾았다.

express.json() v4.16.0부터 Express에 내장된 미들웨어 기능

위 내용을 입력 해도 해결되지 않아, 확인한 결과 mysql에 실제 패스워드 입력으로 정상 연결

password: "password" => password: "실제패스워드"

const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  user: "root",
  host: "localhost",
  password: "실제패스워드",
  database: "employeeSystem",
});

app.post("/create", (req, res) => {
  const name = req.body.name;
  const age = req.body.age;
  const country = req.body.country;
  const position = req.body.position;
  const wage = req.body.wage;

  db.query(
    "INSERT INTO employees (name, age, country, position, wage) VALUES(?,?,?,?,?)",
    [name, age, country, position, wage],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send("Values Inserted");
      }
    }
  );
});

app.listen(3001, () => {
  console.log("Yey, your sever is running on port 3001");
});