[Node.js] CRUD 만들어 보기

 

프론트는 리액트로

백앤드는 Node.js로 해서 

사용자가 입력한 두 개의 값을 출력하는 CURD 시스템

 

포트는 총 3000과 3001 2개를 사용했다.

 

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

import React from "react";
import './App.css';
// import Axios from 'axios'

// 백앤드에 있는 걸 호출하기 위해
// movieName: movieName 작성

function App() {

  // const [movieName, setMovieName] = useState('');
  // const [review, setReview] = useState('');

  // const submitReview = () =>{
  //   Axios.post("http://localhost:3001/api/insert")
  // };
  return (
    <div className="App">
      <h1>CRUD APPLICATION</h1>

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

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

export default App;

 

 

const express = require('express');
const bodyParser = require('body-parser');

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

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


app.get("/", (req, res) => {
    res.send("heelo world");
});

// app.use(bodyParser.urlencoded({extended: true}));

// app.post("/api/insert", (req, res) =>{ 
    
//     const sqlInsert = "INSERT INTO movie_reviews (movieName, movieReview) VALUES (?,?)"
//     db.query(sqlInsert, [movieName, movieReview], (err, result)=>{

//     })
//     db.query()
// });

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