221128 프론트엔드6 수업 정리

포트폴리오에 쓰이는 기능 정리 먼저~

ex) 게시판

• 로그인
• 회원가입
• 아이디,비밀번호 찾기
• 글 작성
• 수정
• 삭제
• 댓글 작성
• 수정
• 삭제

음 내가 할 기능은? 정리해서 강사한테 알려주셈
1 로그인/로그아웃
2 회원가입
3 아이디, 비밀번호 찾기
4 회원 정보 수정
5 모임 생성/수정/삭제
6 모임원 등록 - 아이디로 초대
7 여행 계획에 필요한 기능 사용(구현하다가 더 필요한 항목 있으면 기능 추가 예정)
- todolist
- 투표
- 여행타임라인
- 달력
- 공지

일단 이렇게 보냄~ 채팅도 넣으려다가 어려울것같아서 일단 뺌ㅋ
아으 아무것도 하기 싫다........
포트폴리오고머고
대구리에 아무것도 안들어오네 ㅋㅎ

내일 할게욘....ㅎr

로그인 기능 구현

login.js

import React from "react";
import axios from "axios";

import { useNavigate } from "react-router-dom";

function Login() {
  const navigation = useNavigate();

  const [data, setData] = React.useState({
    id: "",
    pw: "",
  });

  const valuechange = (event) => {
    const name = event.target.name;
    const cloneData = { ...data };
    cloneData[name] = event.target.value;
    setData(cloneData);
  };

  const userlogin = async () => {
    await axios({
      url: "http://localhost:5000/login",
      method: "POST",
      data: data,
    })
      .then((res) => {
        const { code, message } = res.data;
        if (code === "error") {
          alert(message);
          return;
        }
        navigation("/", { replace: true });
      })
      .catch((e) => {
        console.log("로그인 오류!", e);
      });
  };

  return (
    <div>
      <h2>로그인페이지입니다</h2>
      <h3>ID 입력</h3>
      <input type="text" name="id" onChange={valuechange} />
      <h3>PW 입력</h3>
      <input type="password" name="pw" onChange={valuechange} />
      <button className="btn" onClick={userlogin}>
        확인
      </button>
    </div>
  );
}

export default Login;

server.js

const express = require("express");
const cors = require("cors");
const session = require("express-session");
const mysql = require("mysql2");

const db = mysql.createPoolCluster();
const app = express();
const port = 5000;

app.use(express.json());

app.use(
  session({
    secret: "SECRET",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(
  cors({
    origin: true,
    credentials: true,
  })
);

db.add("project", {
  host: "127.0.0.1",
  user: "root",
  password: "",
  database: "aritlce_project",
  port: 3306,
});

function runDB(query) {
  return new Promise(function (resolve, reject) {
    db.getConnection("project", function (error, connection) {
      if (error) {
        console.log("DB Connection Error!", error);
        reject(true);
      }

      connection.query(query, function (error, data) {
        if (error) {
          console.log("query error", error);
          reject(true);
        }

        resolve(data);
      });
      connection.release();
    });
  });
}

app.get("/", (req, res) => {
  res.send("여기로 옵니다!");
});

app.post("/idcheck", async (req, res) => {
  /**
   * 아이디 중복체크
   */
  // console.log(req.body);
  const id = req.body.id;

  const result = {
    code: "success",
    message: "아이디 중복체크 완료",
  };

  if (id === "") {
    result.code = "error";
    result.message = "아이디를 입력하세요!";
    res.send(result);
    return;
  }

  const user = await runDB(`SELECT * FROM user WHERE id = '${id}'`);
  // console.log(user);

  if (user.length > 0) {
    result.code = "error";
    result.message = "이미 사용중인 아이디입니다!";
    res.send(result);
    return;
  }

  res.send(result);
});

app.post("/join", async (req, res) => {
  /**
   * 닉네임 비번 확인
   * DB에 id,nickname,pw insert
   */
  console.log(req.body);
  const { id, nickname, pw } = req.body;

  const result = {
    code: "success",
    message: "회원가입 완료",
  };

  if (nickname === "") {
    result.code = "error";
    result.message = "닉네임을 입력하세요";
    res.send(result);
    return;
  }

  if (pw === "") {
    result.code = "error";
    result.message = "비밀번호를 입력하세요";
    res.send(result);
    return;
  }

  const query = `INSERT INTO user(id,password,nickname) VALUES('${id}','${pw}','${nickname}')`;
  await runDB(query);

  res.send(result);
});

app.post("/login", async (req, res) => {
  // console.log(req.body);
  const id = req.body.id;
  const pw = req.body.pw;

  const result = {
    code: "success",
    message: "로그인 성공",
  };

  if (id === "") {
    result.code = "error";
    result.message = "아이디를 입력하세요!";
    res.send(result);
    return;
  }
  if (pw === "") {
    result.code = "error";
    result.message = "비밀번호를 입력하세요!";
    res.send(result);
    return;
  }

  const user = await runDB(
    `SELECT * FROM user WHERE id = '${id}' and password = '${pw}'`
  );

  if (user.length === 0) {
    result.code = "error";
    result.message = "로그인에 실패하였습니다!";
    res.send(result);
    return;
  }

  res.send(result);
});
app.listen(port, () => {
  console.log("서버가 시작되었습니다");
});

로그인에 성공하면 /(메인) 페이지로 이동

로그인 세션 기능 구현

로그인 성공 시 로그인 세션 부여

App.js

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

import Join from "./pages/Join";
import Login from "./pages/Login";

import { Route, Routes } from "react-router-dom";

axios.defaults.withCredentials = true;

const StoreContext = React.createContext({});

function Main() {
  const { loginUser } = React.useContext(StoreContext);
  // console.log(loginUser);

  return (
    <div>
      <div>메인페이지입니다.</div>
      <div>{loginUser.nickname}님 안녕하세요!</div>
    </div>
  );
}
function App() {
  const [loginUser, setLoginUser] = React.useState({});

  const 세션정보가져오기 = async () => {
    await axios({
      url: "http://localhost:5000/user",
    }).then((res) => {
      // console.log(res.data);
      setLoginUser(res.data);
    });
  };

  React.useEffect(() => {
    세션정보가져오기();
  }, []);

  return (
    <StoreContext.Provider
      value={{
        loginUser: loginUser,
      }}
    >
      <Routes>
        <Route exact path="/" element={<Main />} />
        <Route exact path="/join" element={<Join />} />
        <Route exact path="/login" element={<Login />} />
      </Routes>
    </StoreContext.Provider>
  );
}

export default App;

server.js

const express = require("express");
const cors = require("cors");
const session = require("express-session");
const mysql = require("mysql2");

const db = mysql.createPoolCluster();
const app = express();
const port = 5000;

app.use(express.json());

app.use(
  session({
    secret: "SECRET",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(
  cors({
    origin: true,
    credentials: true,
  })
);

db.add("project", {
  host: "127.0.0.1",
  user: "root",
  password: "",
  database: "aritlce_project",
  port: 3306,
});

function runDB(query) {
  return new Promise(function (resolve, reject) {
    db.getConnection("project", function (error, connection) {
      if (error) {
        console.log("DB Connection Error!", error);
        reject(true);
      }

      connection.query(query, function (error, data) {
        if (error) {
          console.log("query error", error);
          reject(true);
        }

        resolve(data);
      });
      connection.release();
    });
  });
}

app.get("/", (req, res) => {
  res.send("여기로 옵니다!");
});

app.post("/idcheck", async (req, res) => {
  /**
   * 아이디 중복체크
   */
  // console.log(req.body);
  const id = req.body.id;

  const result = {
    code: "success",
    message: "아이디 중복체크 완료",
  };

  if (id === "") {
    result.code = "error";
    result.message = "아이디를 입력하세요!";
    res.send(result);
    return;
  }

  const user = await runDB(`SELECT * FROM user WHERE id = '${id}'`);
  // console.log(user);

  if (user.length > 0) {
    result.code = "error";
    result.message = "이미 사용중인 아이디입니다!";
    res.send(result);
    return;
  }

  res.send(result);
});

app.post("/join", async (req, res) => {
  /**
   * 닉네임 비번 확인
   * DB에 id,nickname,pw insert
   */
  console.log(req.body);
  const { id, nickname, pw } = req.body;

  const result = {
    code: "success",
    message: "회원가입 완료",
  };

  if (nickname === "") {
    result.code = "error";
    result.message = "닉네임을 입력하세요";
    res.send(result);
    return;
  }

  if (pw === "") {
    result.code = "error";
    result.message = "비밀번호를 입력하세요";
    res.send(result);
    return;
  }

  const query = `INSERT INTO user(id,password,nickname) VALUES('${id}','${pw}','${nickname}')`;
  await runDB(query);

  res.send(result);
});

app.post("/login", async (req, res) => {
  /**
   * 디비에서 아이디&비번 확인
   */
  // console.log(req.body);
  const id = req.body.id;
  const pw = req.body.pw;

  const result = {
    code: "success",
    message: "로그인 성공",
  };

  if (id === "") {
    result.code = "error";
    result.message = "아이디를 입력하세요!";
    res.send(result);
    return;
  }
  if (pw === "") {
    result.code = "error";
    result.message = "비밀번호를 입력하세요!";
    res.send(result);
    return;
  }

  const user = await runDB(
    `SELECT * FROM user WHERE id = '${id}' and password = '${pw}'`
  );

  if (user.length === 0) {
    result.code = "error";
    result.message = "로그인에 실패하였습니다!";
    res.send(result);
    return;
  }

  /**
   * 로그인 세션 회원정보 저장
   */
  req.session.loginUser = user[0];
  req.session.save();

  res.send(result);
});

app.get("/user", (req, res) => {
  res.send(req.session.loginUser);
});

app.listen(port, () => {
  console.log("서버가 시작되었습니다");
});

내일 포트폴리오 화면 구상할것~

• 디스플레이 디자인
• 구현 할 기능 정리