일단 하나를 해보자

따라하면서

순서, 필요한 내용 적기 

<이 순간, 최고의 강의_별점 백개 드립니다_>

https://www.youtube.com/watch?v=re3OIOr9dJI 

client -react 프론트

server -express, 백단

client/ npx create-react-app .

(.은 현재 위치를 의미함)

server/ npm init 

해서 package.json 생성하고

필요한 

mysql express 

설치

client/

Login.js

import { useState } from "react";
import "./login.css";

function Login() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [country, setCountry] = useState("");
  const [position, setPosition] = useState("");
  const [wage, setWage] = useState(0);

  const onChangefun = (event) => {
    setName(event.target.value);
    console.log(event.target.value);
  };
  return (
    <div className="login">
      <div className="information">
        <label>Name : </label>
        <input type="text" onChange={onChangefun}></input>
        <label>Age : </label>
        <input
          type="number"
          onChange={(event) => {
            setAge(event.target.value);
          }}
        ></input>
        <label>Country : </label>
        <input
          type="text"
          onChange={(event) => {
            setCountry(event.target.value);
          }}
        ></input>
        <label>Position : </label>
        <input
          type="text"
          onChange={(event) => {
            setPosition(event.target.value);
          }}
        ></input>
        <label>Wage: </label>
        <input
          type="number"
          onChange={(event) => {
            setWage(event.target.value);
          }}
        ></input>
        <button>직원 등록</button>
      </div>
    </div>
  );
}

export default Login;

server/

index.js

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

app.listen(3001, () => {
  console.log("your server is running on 3001~! yeah");
});

이제 mysql 설정해줄거임

mysql 워크벤치에서 

스키마 생성

테이블 생성

server/

디비저장 코드 입력

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

const db = mysql.createConnection({
  user: "root",
  host: "localhost",
  password: "비밀번호",
  database: "crudtest",
});

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

  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("your server is running on 3001~! yeah");
});

client/

import { useState } from "react";
import "./login.css";
import Axios from "axios";

function Login() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [country, setCountry] = useState("");
  const [position, setPosition] = useState("");
  const [wage, setWage] = useState(0);

  const addEmployee = () => {
    Axios.post("http://localhost:3001/create", {
      frontname: name,
      frontage: age,
      frontcountry: country,
      frontposition: position,
      frontwage: wage,
    }).then(() => {
      console.log("success");
    });
  };

  const onChangefun = (event) => {
    setName(event.target.value);
    console.log(event.target.value);
  };
  return (
    <div className="login">
      <div className="information">
        <label>Name : </label>
        <input type="text" onChange={onChangefun}></input>
        <label>Age : </label>
        <input
          type="number"
          onChange={(event) => {
            setAge(event.target.value);
          }}
        ></input>
        <label>Country : </label>
        <input
          type="text"
          onChange={(event) => {
            setCountry(event.target.value);
          }}
        ></input>
        <label>Position : </label>
        <input
          type="text"
          onChange={(event) => {
            setPosition(event.target.value);
          }}
        ></input>
        <label>Wage: </label>
        <input
          type="number"
          onChange={(event) => {
            setWage(event.target.value);
          }}
        ></input>
        <button onClick={addEmployee}>직원 등록</button>
      </div>
    </div>
  );
}

export default Login;

프런트에서 백 전달할때 

우리는 api허용해주기 위해서 cors 라이브러리 사용할거임

npm i cors

server/ index.js 파일에

const cors = require("cors");
app.use(cors());

추가

근데 여전히 막상보면 백으로 못넘어옴

이렇게 req.body 콘솔 찍어보면 

undefined 뜸 

json 미들웨어를 제공안해서였음

프런트에서 보낼때 

index.js/

app.use(express.json());

이거 추가

유튜브영상에서는 이거 추가하면 db넣기 성공했는데 난 안됨. ㅎ

 db에 안들어가고 

에러 뜸

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

이거 mysql에 외부접근안돼서 그런거라고 함  

그래서 이걸로 해결가능하다고 함( 비번 사용해서 db계정사용하게끔 하는 설정인듯!)

+해결방법중에 mysql2쓰는 것도 있음 이번에는 안해봄 

 ALTER user '[유저]'@'localhost' IDENTIFIED WITH mysql_native_password by '[비번]';

 바꿔주기 위해서 mysql로 ㄱㄱ

mysql에 바로 use mysql하면 접속이 안됨

mysql -u root -p도 당연히 안됨

'use'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다

워크벤치 경로로 들어가서 해야함~~~

C:\Program Files\MySQL\MySQL Server 8.0\bin

cd C:\Program Files\MySQL\MySQL Server 8.0\bin

​

mysql -u root -p

이제 mysql켜짐

mysql>

계정 뭐있는지 확인 먼저 함

SELECT user,authentication_string,plugin,host FROM mysql.user;

내가 쓸 root계정 있는거 확인함

 ALTER user '[유저]'@'localhost' IDENTIFIED WITH mysql_native_password by '[비번]';

flush privileges;

index.js 

서버 끄고 다시 실행

node index.js

로 실행

직원등록 눌러서 보내보면 

잘 들어왔다~!~!~!~!~!

이제 우리가 할거는

백-> 프런트로 

정보 가져오는걸 할거임

우리는 필요할 때 정보를 봐야하니까 

client/

//초기에는 빈배열이니까 []로 넣어줌 
 const [employeesList, setEmployeesList] = useState([]);
 //가져올 함수// 백가져온 응답반은걸 콘솔로 보여주겠음 response가져온거의 data로
   const getEmployee = () => {
    Axios.get("http://localhost:3001/employees").then((response) => {
      setEmployeesList(response.data);
    });
  };
  
  
 //버튼
   <div className="showDB">
      //버튼눌렀을 때 가져올 함수 실행
        <button className="showDB-button" onClick={getEmployee}>
          show employees
        </button>
      </div>

server/

app.get("/employees", (req, res) => {
//db에서 employess테이블 다 가져와
  db.query("SELECT * FROM employees", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(result);
    }
  });
});

버튼 누르면

짠

이건 response임 

object 객체로 가져옴

(status 200 -> 작동한거임)

이안에 우리가 원하는 정보가 잘 담겨져있음

이제 백에서 가져온 것들을 화면에 띄워줄거임

맵함수 사용해서

배열에서 하나씩 꺼내오기 

        <div>
          {employeesList.map((val, index) => {
            return (
              <div className="employee">
                <h3>{val.name}</h3>
                <h3>{val.age}</h3>
                <h3>{val.country}</h3>
                <h3>{val.position}</h3>
                <h3>{val.wage}</h3>
              </div>
            );
          })}
        </div>

성공~~~

근데 다른 방법도 있대 

post에 넣고 바로 화면에 띄우게 하는법

const addEmployee = () => {
    console.log(name, "dfdfd");
    Axios.post("http://localhost:3001/create", {
      frontname: name,
      frontage: age,
      frontcountry: country,
      frontposition: position,
      frontwage: wage,
    }).then(
      //   () => {
      //   console.log("success");
      // }
      () => {
        //기존 배열에 방금 입력한 걸 추가하고 그걸 setEmployessList함수에 넣음! 배경은 뜨는데 값이 안띄워지네..흠
        //암튼 여러 방법이 있다고 함 있다가 해보자
        setEmployeesList([
          ...employeesList,
          {
            frontname: name,
            frontage: age,
            frontcountry: country,
            frontposition: position,
            frontwage: wage,
          },
        ]);
      }
    );
  };

나는 왜인지 빈값만 뜸

db에는 잘들어갔는데...

왜 안뜨는 것인가...

이부분은 다른 날에 해보겟음

이제 

삭제 하고 수정하고 다음에 해봐야지

db에서 가져온 목록 선택해서 나열하게 하고

이런 것도 해보고 싶네 

아 그리고 지금은 새로고침하면 db에서 블러온 애들이 화면에서 사라지거든

그것도 막아야겠다.

값이 undefined라서 찾을 수 없을 때 많이 뜸

값이 타입이 달라서 가져올 수 없다거나.

배열이라서 가져올라면 map함수를 써야한다거나

[]를 묶어줘야하거나 빼줘야하거나. 등의 이유..

나는 기존의 server갈아엎고 naivecoin6의 서버 코드를 쓰고 있어서 

block header없고 block만 있어서 a.header.index가 인식 못하는 것!

이렇게 해서 블록의 정보들은 뜨게 되었는데

트랜잭션은 안보임

블록체인 구조를 보면 

이렇게 생겼단 말임

그래서 data부터는 배열로 안에 들어간 값이라 보여줄라면 map함수를 써야함!

채굴된 Block으로 보면 이러함.

해결한 코드

  {chainBlocks &&
        chainBlocks.map((a) => (
          <div style={marginBottom} key={a.index}>
            {/* <div>바디 : {a.body}</div> */}
            {a.data.map((b) => (
              <>
                <div>txId : {b.id}</div>

                {b.txIns.map((c) => (
                  <>
                    <div>signature : {c.signature}</div>
                    <div>txOutId: {c.txOutId}</div>
                    <div>txOutIndex: {c.txOutIndex}</div>
                  </>
                ))}
                {b.txOuts.map((c) => (
                  <>
                    <div>address : {c.address}</div>
                    <div>amount: {c.amount}</div>
                  </>
                ))}
              </>
            ))}

            <div>인덱스 : {a.index}</div>
            <div>넌스 : {a.nonce}</div>
            {/* <div>버전 : {a.version}</div> */}
            <div>시간 : {a.timestamp}</div>
            <div>난이도 : {a.difficulty}</div>
            {/* <div>머클 루트 : {a.merkleRoot}</div> */}
            <div>이전 해쉬 : {a.previousHash}</div>
          </div>
        ))}

내용출처: https://youtu.be/Q8g0tULRWn0

설명 굿!

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

반복문 돌면서 배열안의 요소들을 짝지어서 실행시켜주는 것.

기존객체를 건들지 않고 새 배열을 만든다. 

map함수는 배열에서 사용가능하다  //for문이랑 비슷

//map 함수 배열에서 사용가능
const arr = [1, 2, 3];
console.log(arr);
//배열안에 있는 값을 2씩 더해보려고 함
//for문쓰는 법
// const res = [];
// for (let i = 0; i < arr.length; i++) {
//   res.push(arr[i] * 2);
// }

// console.log(res);
//map함수 쓰기
//map함수 안에 callback함수 들어감
const res1 = arr.map((값) => {
  return 값 * 2;
});
console.log(res1);

(안에 들어가는 인자 내마음대로 '값'이라고 지정해서 씀)

화살표 간단하게 짧게 줄여서 쓸 수도 있다. 

//화살표 간단하게 짧게 줄여서 쓸 수 도 있음
const res2 = arr.map((값) => 값 * 3);
console.log(res2);

만약에 인덱스에도 접근하고 싶으면 다음에 적으면 됨 

(값, 인덱스) 두번째에 들어가는게  인덱스자리야

//만약에 인덱스에도 접근하고 싶으면
const res3 = arr.map((값, 인덱스) => 인덱스);
console.log(res3);

지금은 배열안에 있는 게 숫자인데

객체여도 가능하다

/지금은 배열안에 있는게 숫자인데 객체여도 가능하다!
const items = [
  { id: 1, name: "kaka" },
  { id: 2, name: "coco" },
];
const result = items.map((아이템) => {
  id: 아이템.id;
});

console.log(result);

객체를 return할 때는 중괄호를 해주고 리턴해야한다!!

//객체를 return할때는 중괄호를 해주고 리턴해야되지요
const result1 = items.map((아이템) => {
  return { id: 아이템.id };
});

console.log(result1);

추가 설명 여기 보기 ▼

map 사용법

map을 사용하는 방법은 callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 새로운 값을 만드는 함수를 등록하는 것이다.

const numbers = [1];

numbers.map((number, index, source) => {

    // number: 요소값
    // index: source에서 요소의 index
    // source: 순회하는 대상

    console.log(number);
    // 1

    console.log(index);
    // 0

    console.log(source);
    // [1]

    return number * number;
});

map을 사용하는 경우 주로 number에 해당하는 요소 값을 많이 활용하지만 index와 array도 함께 사용할 수 있다.

출처: https://7942yongdae.tistory.com/48 [프로그래머 YD]

reduce함수 

반복되는 모든 것에 쓸 수 있음. 초기값활용해서 쓸 수 있다. 

reduce메서드 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

누적값을 쓴다는 것에 명심!!!

출처: https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

(코드따라치면 이해할 수 있음요.)

//reduce 함수/////////////////////////////////////////////////
//배열.reduce((누적값, 현잿값, 인덱스, 요소)
//=> { return 결과 }, 초깃값);
const abc = [1, 2, 3];
const result2 = abc.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 0);

console.log(result2);

//a가 초기값인 0부터시작해서 return하는 대로 누적되는거임
//0,1,0
//1,2,1
//3,3,2

//초기값이 없을경우!
//abc=1,2,3
const resultNoInit = abc.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
});

console.log("초기값없는경우", resultNoInit);
//0,1,0
//1,2,1
//3,3,2
//6

const abc2 = [0, 2, 4];
const result3 = abc2.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 0);

console.log(result3);
//0,0,0
//0,2,1
//2,4,2
//6

const result4 = abc2.reduce((누적값, 현재값, 인덱스) => {
  console.log(누적값, 현재값, 인덱스);
  return 누적값 + 현재값;
}, 5);

console.log(result4);
//5,0,0
//5,2,1
//7,4,2
//11

그래서 map함수예시도 reduce써서 가능하다

//map함수 예제를 reduce로 만들어보겠다
const 원투쓰 = [1, 2, 3];
결과 = 원투쓰.reduce((누적값, 현재값) => {
  누적값.push(현재값 % 2 ? "홀수" : "짝수");
  return 누적값;
}, []);

//초기값 빈배열......
//홀수, 짝수,홀수