#008

통신 틀

기본 틀

fetch로 가져올 때는 JSON.stringify사용해서 JSON으로 변환해야된다.

완성된 요청 폼! e.preventDefault 으로 새로고침 막아야됨!

일단 들어가서 날아오는거 확인하고

어떻게 꺼내야 되는지 테스트

jwt 타입 알아보기

이거 타입을 알 수 있을까??

알아보는 방법은 typeof 로 알아볼수 있다.

스트링이네, 그리고 이걸 일반적으로는 로컬 스토리지에 저장된다.

쿠키는 브라우저가 저장하는 것이 아니라, 서버가 저장해라고 하니까 저장하는 것임., 일반적으로는 로컬 스토리지에 저장한다.

로컬 스토리지는 여기에 있다.

이렇게 로컬스토리지를 불러와서 jwt저장 가능하고 IO가 발생한다.

LoginForm 코드

로컬 스토리지 저장된 것을 확인

로그인이 되면 isLogin값 true로 바뀌어야 됨

navigate

navigate로 리다이렉트

이렇게 메인페이지로 가면 된다.

useSelect 로 스토어 값을 가져오고 useDispatch는 스토어 는 값을 바꾸는 것. useDispatch

순서는 1. dispatch 먼저하고 2. jwt저장하고 3. login을 진행하면 된다. (상태변경)

setItem이 동기적으로 실행되는지 아닌지 정도는 알고 넘어가야지.

jwt넣는거 해보기

reducer

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Pagination } from "react-bootstrap";
import { useSelector } from "react-redux";
import PostItem from "./../../components/PostItem";

const Home = () => {
  const [posts, setPosts] = useState([]);

  const jwt = useSelector((state) => state.jwt);

  useEffect(() => {
    apiHome();
  }, []);

  async function apiHome() {
    let response = await axios({
      url: "http://localhost:8080",
      method: "get",
    });

    console.log("posts", response.data);
    setPosts(response.data.body);
  }

  function prev() {}
  function next() {}

  return (
    <div>
      <h1>{jwt}</h1>
      {posts.map((post) => (
        <PostItem key={post.id} id={post.id} title={post.title} />
      ))}

      {/* {<PostItem id={1} title={"제목1"} />} */}
      <br />
      <div className="d-flex justify-content-center">
        <Pagination>
          <Pagination.Item onClick={prev} disabled>
            Prev
          </Pagination.Item>
          <Pagination.Item onClick={next}>Next</Pagination.Item>
        </Pagination>
      </div>
    </div>
  );
};

export default Home;
Java
복사