221130 프론트엔드6 수업 정리

1 로그인/로그아웃
2 회원가입
3 아이디, 비밀번호 찾기
4 회원 정보 수정
5 모임 생성/수정/삭제
6 모임원 등록 - 아이디로 초대
7 여행 계획에 필요한 기능 사용(구현하다가 더 필요한 항목 있으면 기능 추가 예정)

• todolist
• 투표
• 여행타임라인
• 달력
• 공지

순서
1. 프로젝트 주저 정하기
2. 디자인 템플릿 정하기
3. 내가 구현 할 기능 정의하기
4. DB 테이블 생성하기
위 4가지를 다하곳ㄴ 기능 구현하시면 됩니다.

참고 사이트

공공데이터포털
공공데이터포털 사용 방법

투어플랜비 - 지금은 서비스 운영 안하는듯?
마이로
위시빈
굿노트 속지인데 컨텐츠 참고
어떤 사람이 만든 포트폴리오 - 주제 비슷함 참고

흐음 일단 헤더는 고정
아래는 서비스 설명을 반응형으로 하고
기능은 로그인해야 사용 할 수 있게~
디자인 느낌은 어떻게 해야할꽈....
다음주부터는 대면으로 나갈건데....준비 해놔야겟음.....ㅠ

뭘 할까요..

main.js 생성
메인화면에서 로그인/로그아웃 토글 -> 얼레벌레 구현하긴했는데 이게 맞나 싶음..?

App.js

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

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

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

axios.defaults.withCredentials = true;

export const StoreContext = React.createContext({});
export let 세션정보가져오기 = () => {};
export let 세션삭제하기 = () => {};

function App() {
  const [loginUser, setLoginUser] = React.useState({});

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

  세션삭제하기 = async () => {
    await axios({
      url: "http://localhost:5000/userdelete",
    }).then((res) => {
      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;

Login.js

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

import { 세션정보가져오기 } from "../App";
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;
        }
        // console.log("세션정보가져오기실행");
        세션정보가져오기();
        navigation("/", { replace: true }); //{ 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;

Main.js

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

import { StoreContext, 세션삭제하기 } from "../App";
import { useNavigate } from "react-router-dom";

function Main() {
  const navigation = useNavigate();
  //App에서 StoreContext 받아온 후 로그인세션 사용
  const { loginUser } = React.useContext(StoreContext);
  //   console.log(loginUser.id);
  const [State, setState] = React.useState({
    session: "로그인",
  });

  React.useEffect(() => {
    // console.log("loginUser 바뀜");
    if (loginUser.id !== undefined) {
      setState({ session: "로그아웃" });
    }
  }, [loginUser]);

  const loginNout = () => {
    if (State.session === "로그인") {
      navigation("/login");
      setState({ session: "로그아웃" });
    } else if (State.session === "로그아웃") {
      //세션 해제
      세션삭제하기();
      setState({ session: "로그인" });
    }
  };
  return (
    <div>
      <div>메인페이지입니다.</div>
      <button className="loginbtn" onClick={loginNout}>
        {State.session}
      </button>
      <div>{loginUser.nickname}님 안녕하세요!</div>
    </div>
  );
}

export default Main;

로그인 후 navigation("/")으로 메인으로 넘어감
근데 새로고침을 해야 로그인세션 정보를 받아옴 useEffect때문에
로그인 후 메인페이지로 넘어갔을 때 로그인 세션을 받아오고싶어서 이동전에 세션받아오는 함수를 login.js에서 실행함
그리고 로그인 상태 useState를 만들어서 로그인/로그아웃 버튼 value 바꿔줌
로그인 -> 로그인 페이지로 이동
로그아웃 -> 세션 삭제 (세션 정보 {}로 초기화)

본격적으로

• 메인화면 디자인 구상
• DB 설계
• 필요한 기능 구현

D🦀 D🦀 하기싫다~(초코하나 말투..)