[Assignment]React Hooks

json-server - json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리

설치 npm i -g json-server

cd data
json-server --watch data.json --port 3001

기본 포트 3000, 어느 포트에서 서버를 열지 설정

오류 발생

json-server : C:\Users\choi\AppData\Roaming\npm\json-server.ps1 파일을 로드할 수 없습니다.

powershell 관리자로 실행

executionpolicy -> Restricted

를 풀어줘야함

set-executionpolicy unrestricted

근데 나는 AllSigned를 반환 하지만 같은 방식으로 해결 가능했음

---

App.js

react.lazy() & suspense

import { Suspense, lazy } from "react";

const Home = lazy(() => import('./Home'));
const Loading = lazy(() => import('./component/Loading'));
[...]

  return (
    <BrowserRouter>
      <Suspense fallback={<Loading/>}>
      [...]
      </Suspense>
    </BrowserRouter>

---

BlogDetail.js

useParams()

개별 id를 받아와 개별 블로그의 내용이 보일 수 있도록

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

const BlogDetails = () => {
  [...]
  const {id} = useParams();
}

  useEffect(() => {
    setTimeout(() => {
      fetch(`http://localhost:3001/blogs/${id}`)
      [...]
    })
  })

---

useNavigate

delete 버튼을 누르면 다시 home으로 리다이렉트

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

const navigate = useNavigate();

const handleDeleteClick = () => {
  fetch(`http://localhost:3001/blogs/${id}`, {
    method: "DELETE",
  })
  .then(() => {
    navigate('/')
  })
  .catch((error) => {
    console.error('Error', error);
  })

리다이랙트도 되고 삭제도 된다. 하지만 홈으로 돌아왔을 때 한번 더 새로고침을 해야 해당 글이 없어짐 따라서

  .then(() => {
    window.location.href = '/'
  })

을 사용해서 해결

---

useState() & 조건부 렌더링

const [isLike, setIsLike] = useState(true);

const handleLikeClick = () => {
  setIsLike(!isLike);
};

<button onClick={handleLikeClick}>{isLike ? "🤍" : "❤️"}</button>

---

• 하트를 누르면 home에서 새로고침을 했을 때 숫자가 변해야함

const handleLikeClick = () => {
  setIsLike(!isLike);
  let patchData = { likes: blog.likes + 1 };

  fetch(`http://localhost:3001/blogs/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "Application/json" },
    body: JSON.stringify(patchData),
  })
    .then(() => {
      window.location.href = `/blogs/${id}`;
    })
    .catch((error) => {
      console.error("Error", error);
    });
};

• “Content-Type” : “Application/json”

https://caileb.tistory.com/192

---

CreateBlog.js

등록, home으로 리다이렉트

const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const [author, setAuthor] = useState("김코딩");

const handleSubmit = (e) => {
  e.preventDefault();
  const data = { title, body, author, like: 0 };
  fetch(`http://localhost:3001/blogs/`, {
    method: "POST",
    headers: { "Content-Type": "Application/json" },
    body: JSON.stringify(data),
  })
    .then(() => {
      window.location.href = `/`;
    })
    .catch((error) => {
      console.error("Error", error);
    });
};

  <form onSubmit={handleSubmit}>
    <label>제목</label>
    <input
      type="text"
      required
      value={title}
      onChange={(e) => setTitle(e.target.value)}        placeholder="제목을 입력해주세요."
    />
    [...]