일단 하나를 해보자

https://stepby-yun.tistory.com/181

지난시간,,,

바디파서 해봐도 (express로 사용) 안되고 무한히 헤매었다

한번에 저장안하고 따로 할까 싶어서 마이페이지 만들어서 뺐다가 

생각해보니 해당 id에 프로필을 저장하는거라서 더 복잡해지겠다 싶었다(프로필 수정도 만들 때 그거 해야겠지만..)

어쨌든 같은 데이터 행에 넣어줘야하니까.

방법은 여러가지 있겠지만 내가 찾은 거는 

formdata.append로 아이디랑 유저도 저장하는 방법이었다.

(method) FormData.append(name: string, value: string | Blob, fileName?: string): void

append(키, 값) 

이란 거는 알았는데 multer쓰면서 

upload.single(키) 값과 같아야된대서 

이미지 아닌 아이디와 비번은 좀 다른 줄 알았다. (multer사용한 이미지는 req.body로 가져오는 것도 아니어서 좀 실제로 다르기도 함)

해당하는 키값을 

req.body.키값

으로 찍어보니 나왔다. 

req.body가 잘나오는게 append로 넣어줘서 그런건가..?

(바디파서 빼봐도 잘나옴)

req만 콘솔로 찍어보니 엄청 길게 나오는데 그중에 body랑 file이 보이네

react 프론트 코드

import React, { useState } from "react";
import Axios from "axios";
import "./signup.css";

function Signup() {
  //회원가입 값
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  // const [imageUpload, setImageUpload] = useState(null);

  const [image, setImage] = useState({
    preview:
      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAM1BMVEXk5ueutLfn6eqrsbTp6+zg4uOwtrnJzc/j5earsbW0uby4vcDQ09XGyszU19jd3+G/xMamCvwDAAAFLklEQVR4nO2d2bLbIAxAbYE3sDH//7WFbPfexG4MiCAcnWmnrzkjIRaD2jQMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMw5wQkHJczewxZh2lhNK/CBOQo1n0JIT74/H/qMV0Z7GU3aCcVPuEE1XDCtVLAhgtpme7H0s1N1U7QjO0L8F7llzGeh1hEG/8Lo7TUmmuSrOfns9xnGXpXxsONPpA/B6OqqstjC6Ax/0ujkNdYQQbKNi2k64qiiEZ+ohi35X+2YcZw/WujmslYewiAliVYrxgJYrdwUmwXsU+RdApUi83oNIE27YvrfB/ZPg8+BJETXnqh9CVzBbTQHgojgiCvtqU9thFJg/CKz3VIMKMEkIXxIWqIpIg2SkjYj+xC816mrJae2aiWGykxRNsW0UwiJghJDljYI5CD8GRiCtIsJxizYUPQ2pzItZy5pcisTRdk/a9m4amtNNfBuQkdVhSaYqfpNTSFGfb9GRIakrE2Pm+GFLaCQPqiu0OpWP+HMPQQcgQMiQprWXNmsVwIjQjYi/ZrhAqNTCgr2gu0Jnz85RSSjso0HkMFZ0YZjKkc26a/jlmh9JiDyDxi9oeorTYAzZkwwoMz19pzj9bnH/GP/+qbchjSGflneWYhtTuKdMOmNKZcJ5TjInQKcYXnESd/jQxy0ENpULTNGOGgxpap/oyw9pbUAqhfx2Dbkhovvfgz4iUzoM9+GlK6/Mh4q29hyC1mwro30hpVVLPF9wYQr71RazOeM5/cw81iBRD+A03aM9/C/obbrKjbYSpCmIVG3qT/Q8oeUo3Rz0IL7vI1tEbCB9pSiu8I/aV8x3Kg/BGWrWp4ZVs0nZfmAoEG4h/61yHYIJiFSl6Q0Vk6tTW1N8kYp8hdOkfHYYMXd2Qft+8CYwqYDSKvqIh+MCF8Wgca2u/cwdgeW3TtuVn6+1oBs3yLo5C2JpK6CvQzGpfUkz9UG/87gCsi5o2LIXolxN0FbwAsjOLEr+YJmXn7iR6N0BCt5p5cMxm7eAsfS+/CACQf4CTpKjzgkvr2cVarVTf96372yut7XLJ1sa7lv6VcfgYrWaxqr3Wlo1S6pvStr22sxOtTNPLzdY3nj20bPP+ejFdJYkLsjGLdtPBEbe/mr2bQKiXWJDroA+vtzc0p9aahuwqHMDYrQEXHEw9jwQl3drMpts9JBU1SdktPe5FBRdJQ6bwXBpa57ib2A8kukQDzMjh++Uo7Fo6Wd02Pkf4fknqoo4HtvAIjsqUcjx6DIPgWCaOML9rKI/oqD9/lgNrn+eF+p7j8tnzHBiR7+kdUGw/+V1Kzkc75mMy6U+FMaxjPibiM1U1uGM+puInHpmALZCgP4pt7i840MV8+0R1zPsRB6UTcqpizncYwZ89syDydfyWCwXB1l8/zRNGWbTG/GHKUm9AkxHMc/EGSk3z2+ArEhPEV5TUBLEvUGFcjEUH80J/jveTGOAJEljJbILWGQT3zRYiwuKsUXN1EEJAzBhRJFll7mBUG7KD8EqPkKekBREaL8hMDZLQSG6AQjtHPYmvTQnX0TtpC1SYCe2YdkkyLP3jj5BSbKiuR585eQhTgoje6yIb0Yb0C+mV6EYvebqw5SDy2WmubogZiF2AVxPC2FpDf8H2Q9QWo6IkjUxTWVEI3WY/wrCeSuqJ+eRWzXR/JXwgVjUMozbCOfoEZiSiKVGepqv5CJ8RyR4D7xBeamqa7z3BJ/z17JxuBPdv93d/a2Ki878MMAzDMAzDMAzDMAzDMF/KP09VUmxBAiI3AAAAAElFTkSuQmCC",
    data: "",
    // Headers: " 'Content-Type': 'multipart/form-data'",
  });

  //다 userlist에 담아서 db저장하기
  // const [userList, setUserList] = useState([]);

  const onChangeId = (event) => {
    setId(event.target.value);
  };

  const onChagePassword = (event) => {
    setPassword(event.target.value);
  };

  const Submit = (e) => {
    e.preventDefault();

    let formData = new FormData();
    formData.append("file", image.data);

    formData.append("iddd", id);
    formData.append("password", password);

    console.log(image.data, "선택한이미지! ");
    console.log(formData, "들어가기전폼데이터");

    Axios.post(
      "http://localhost:3001/submit",

      // {
      //   id: id,
      //   password: password,
      // },

      formData,

      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    ).then(() =>
      console.log(
        formData,
        "then이후 폼데이터",
        image,
        "이건뭐",
        image.data,
        "이미지데이터"
      )
    );
  };

  const handleFileChange = (e) => {
    const img = {
      preview: URL.createObjectURL(e.target.files[0]),
      data: e.target.files[0],
    };

    setImage(img);
  };

  return (
    <div className="formBox">
      <div className="signup_id">
        <input placeholder="아이디" onChange={onChangeId}></input>
      </div>
      <div className="signup_password">
        <input placeholder="비밀번호" onChange={onChagePassword}></input>
      </div>
      <div>
        <input placeholder="비밀번호 확인"></input>
      </div>
      {image.preview && <img src={image.preview} width="100" height="100" />}
      <input
        type="file"
        onChange={handleFileChange}
        name="Images"
        accept="Images/*"
      />

      <button onClick={Submit}>제출</button>
    </div>
  );
}

export default Signup;

백 코드

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

const mysql = require("mysql");
const cors = require("cors");
const multer = require("multer");
const path = require("path");
app.use(cors());

//이거 필요한거임?
// app.use(express.static("Images"));

const db = mysql.createConnection({
  user: "*",
  host: "*",
  password: "*",
  database: "*",
});

///////

const upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, "Images/");
    },
    filename: function (req, file, cb) {
      cb(null, new Date().valueOf() + path.extname(file.originalname));
    },
  }),
});

app.post("/submit", upload.single("file"), (req, res) => {
  // console.log(req.body.posts, "레큐바디");
  console.log(JSON.stringify(req.body), "JSON.stringify(req.body)");
  console.log(req.body, "바디");

  const profile = req.file.path;
  const id = req.body.iddd;
  const password = req.body.password;

  console.log(id, password, "아이디랑 패스워드");

  console.log(req.file, "파일");
  console.log(profile, "프로파일");

  console.log(profile, "프로필 들어갈 정보");

  db.query(
    "INSERT INTO userlist (userId,userPassword,userProfile) VALUES (?,?,?) ",
    [id, password, profile],

    (err, result) => {
      if (err) {
        console.log(err, "실패ㅠㅠㅠ");
      } else {
        res.send("userlist values inserted");
        // console.log("성공~");
      }
    }
  );
});

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

이제 

유효성검사

비밀번호 암호화 해봐야지..

아 그전에 데이터 삭제부터하자

https://limdef.tistory.com/m/7

https://youtu.be/r1_G9ayX980

동적배열 종류

c++ STL에 vector / java에는  array list/ c#에는 list / golang에는 slice

동적배열은?  <--------------------------> 정적배열(fixed size array 길이 정해진 배열 [10]int)

[]int

길이 변하는 배열

실제 고정 길이의 배열이 따로 있고 그 고정 길이 배열을 가르키고, 포인트하고 있다!!

배열의 길이가 늘어나면 새로운 더 긴 배열을 만든 다음에 거기로 모든 값을 복사시키고 그 배열로 포인트 바꿈

"동적 배열은 실제 배열을 포인트하고 있다."

동적배열선언 만드는 여러 방법들

var a [] int

a:=[]int{초기값}

a:=make([]int,3)

a:=make([ ]int,  length, capacity)

length 길이

내가 쓰고 있는 길이

capacity 확보해놓은 공간

(동적배열, 값을 추가할 때 배열 늘리는데 2배씩 확보해놓음 그래서 길이와 cap다를 수 있음)

항목 추가 명령어 append

a:= []int {}

a= append(a,1)

a에 다시 대입

슬라이스 = append(슬라이스,항목)

a[start Index : End Index]

   (start ~ end]  마지막은 포함안됨

a[10]int{1,2,3,4,5,6,7,8,9,10}

a[4:6]

a[시작인덱스 5번째 : 6번째]

즉 5번째~6번째까지 슬라이스 의미

a[4: ]

5번째부터~ 끝까지

a[ :4]

처음부터 ~4번째까지

슬라이스는 원래 배열이 있고 그 배열을 가르키는 포인터

슬라이스는 잘라내는 게 아니라 그 일부분을 가르키는 배열! 

//추가된 값이 원래길이,확보된 공간 벗어나게 되면

새 메모리 만들어서 거기에 복사됨. 그럼 메모리 주소 바뀜!

코드로 보기

package main

import "fmt"

func main() {

//////////////////////////////////len cap 메모리를 새로 확보해야돼서 주소도 달라짐  새로운 메모리에 담아서
	// a:= []int{1,2}
	// b:= append(a,3)
	// fmt.Printf("%p %p\n",a,b)
	// for i := 0; i<len(a); i++{
	// 	fmt.Printf("%d,",a[i])

	// }
	// fmt.Println()
	// for i := 0; i<len(b); i++{
	// 	fmt.Printf("%d,",b[i])
	// }
	// fmt.Println()

	// fmt.Println(cap(a)," ", cap(b))

	///////make로 넣기//메모리 같아서 b값 바꾸니까 a도 바뀜

	// a:= make([]int, 2,4)
	// a[0]=1
	// a[1]=2
	// b:= append(a,3)

	// fmt.Printf("%p %p\n",a,b)
	// fmt.Println(a)
	// fmt.Println(b)
	// b[0]=4
	// b[1]=5

	// fmt.Println(a)
	// fmt.Println(b)
	//////처음부터 아예 공간을 다르게 확보하게 싶다면
	// a:= []int{1,2}
	//
	// a := make([]int, 2, 4)
	// a[0] = 1
	// a[1] = 2
	// //슬라이스 새로 만듦
	// b := make([]int, len(a))
	// for i := 0; i < len(a); i++ {
	// 	b[i] = a[i]
	// }
	// b = append(b, 3)
	// fmt.Printf("%p %p\n",a,b)

}

3가지 경우임

1. 값넘쳐서 새 메모리에 담아짐

2. 값안넘쳐서 메모리 a랑 b같음 b변경될때 그대로인 메모리안에서 바뀌어서 a도 바뀜

3. 아예 슬라이스 새로 만들어서 공간 따로 확보함

//배열 뒤에서 하나씩 지우기

package main

import "fmt"

//뒤에 하나씩 지워나가는 함수//배열 반환,int 맨뒤에 값도 반환
func RemoveBack(a []int) ([]int, int){
	//처음부터 a배열길이에서 1뺀것, 즉 맨뒤에를 하나 없앤다
	return a[ :len(a)-1], a[len(a)-1]

}

func main() {


a:=[]int{1,2,3,4,5,6,7,8,9,10}

	for i :=0; i<5; i++{
		var lastlostone int
		a, lastlostone= RemoveBack(a)
       fmt.Printf("%d,",lastlostone)
	}
	fmt.Println()
	fmt.Println(a)


}