24.08.27 Day35

이름 제출

• NameForm.jsx

import React, { useState } from "react";

function NameForm(props) {
  //    값을 읽을때, 값을 바꿀때
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    //value = event.target.value; //반드시 set함수를 이용해야 된다!
    setValue(event.target.value); //입력태그의 값(value)을 상태변수에 적용
  };

  const handleSubmit = (event) => {
    console.log("입력한 이름:" + value);
    event.preventDefault(); //기본기능을 막음. submit기능-통신을 보내는 기능
  };

  return (
    <form action="#" onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange}></input>
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default NameForm;

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import NameForm from './11-form/NameForm';

const root = ReactDOM.createRoot(document.getElementById('root'));

// 11-form/NameForm
root.render(<NameForm />);

요청사항

• RequestForm.jsx

import React, {useState} from "react";

function RequestForm(props){
    const [value, setValue] = useState("요청사항을 입력하세요.");

    const handleChange = (e) => {
        setValue(e.target.value);
    };

    const handleSubmit = (e) => {
        console.log("입력한 요청사항 : " + value);
        e.preventDefault();
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                요청사항 :
                <textarea value={value} onChange={handleChange}></textarea>
            </label>
            <button type="submit">제출</button>
        </form>
    );
}

export default RequestForm;

회원가입

• 노드서버 회원가입처리.js

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

//CORS 허용
//cors 모듈 설치
//npm i cors
//cors 미들웨어 등록
app.use(
  cors({
    origin: "*", // 모든 출처 허용 옵션. true 를 써도 된다.
  })
);

const port = 3030; //리액트 3000, 노드서버 3030

app.use(express.json()); // For JSON payloads
app.use(express.urlencoded({ extended: true })); // For URL-encoded payloads

app.post("/signup", (req, res) => {
  console.log("req.body:" + req.body);

  const { username, password, gender } = req.body;

  res.status(201).json({ username, password, gender });
});

app.listen(port, () => {
  console.log(`${port}번 포트에서 서버 실행 중`);
});

• 라우터 SignUpForm.jsx

import React, { useState } from "react";
import axios from "axios"; // axios import

function SignUpForm(props) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [gender, setGender] = useState("male");

  const handleChangeUsername = (event) => {
    setUsername(event.target.value);
  };

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

  const handleChangeGender = (event) => {
    setGender(event.target.value);
  };
  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!username || !password || !gender) {
      alert("Please fill in all fields.");
      return;
    }

    try {
      const response = await axios.post(
        "http://localhost:3030/signup",
        {
          username,
          password,
          gender,
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log("Success:", response.data);
      alert("Sign-up successful!");
    } catch (error) {
      console.error("Error:", error);
      alert("An error occurred during sign-up.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        사용자명:
        <input type="text" value={username} onChange={handleChangeUsername} />
      </label>
      <br />
      <label>
        비밀번호:
        <input
          type="password"
          value={password}
          onChange={handleChangePassword}
        />
      </label>
      <br />
      <label>
        성별:
        <select value={gender} onChange={handleChangeGender}>
          <option value="male">남자</option>
          <option value="female">여자</option>
        </select>
      </label>
      <br />
      <button type="submit">제출</button>
    </form>
  );
}

export default SignUpForm;

파일업로드

• 노드

const express = require("express");
const multer = require("multer");
const path = require("path");
const fs = require("fs");

// 사용자 정의 스토리지 엔진 생성
const storage = multer.diskStorage({
  // 파일이 저장되는 위치를 설정 (file: 업로드된 파일의 정보, cb: 콜백 함수)
  destination: (req, file, cb) => {
    // 업로드 폴더 경로 지정
    const uploadPath = "uploads/";

    // 폴더가 없으면 폴더를 생성
    if (!fs.existsSync(uploadPath)) {
      fs.mkdirSync(uploadPath);
    }

    // 콜백 함수를 호출하여 업로드 경로를 전달
    cb(null, uploadPath);
  },

  // 저장할 파일 이름 지정
  filename: (req, file, cb) => {
    // 콜백 함수를 호출하여 변경된 파일 이름을 전달
    // file.fieldname: 폼 필드의 이름, Date.now(): 현재 시간 (밀리초), path.extname(file.originalname): 원본 파일의 확장자
    // 파일 이름 예: file-1633959266884.jpg
    // uuid4 모듈을 이용하여 유니크한 파일이름을 지정할 수도 있다.
    // 파일 이름 예: 18ac939-def19cs-***.jpg
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});

// 파일 확장자 필터 정의
const fileFilter = (req, file, cb) => {
  // 허용되는 파일 확장자 (허용위험: bat, sh, exe, bin)
  const allowedFileTypes = [".jpg", ".jpeg", ".png"];

  // 파일의 확장자와 허용된 확장자를 비교
  if (allowedFileTypes.includes(path.extname(file.originalname))) {
    cb(null, true);
  } else {
    cb(new Error("Invalid file type")); // 유효하지 않은 파일 형식
  }
};

// Multer 설정: 사용자 정의 스토리지를 설정하고 파일 크기 제한 및 파일 필터링 적용
const upload = multer({
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 5 }, // 5MB 크기 제한
  fileFilter: fileFilter,
});

/* 3단계 코드와 동일 */
const app = express();
const port = 3030;

const cors = require("cors");

app.use(
  cors({
    origin: "*", // 모든 출처 허용 옵션. true 를 써도 된다.
  })
);

app.use(express.static("public"));

app.post("/upload", upload.single("file"), (req, res) => {
  console.log(`File uploaded: ${req.file.filename}`);
  res.status(200).send("File uploaded successfully.");
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

• 라우터

import React from "react";
import { useState } from "react";
import axios from "axios";

function FileUpload(props) {
  const [files, setFiles] = useState([]);

  const handleFilesChange = (e) => {
    setFiles(Array.from(e.target.files));
  };

  const uploadFiles = (e) => {
    e.preventDefault();
    const formData = new FormData();

    files.map((file) => {
      formData.append("file", file);
    });

    console.log(Array.from(formData));

    axios
      .post("http://localhost:3030/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <form>
      <input
        className="file-input"
        type="file"
        mulitple
        onChange={handleFilesChange}
      />
      <button onClick={uploadFiles}>upload</button>
    </form>
  );
}

export default FileUpload;