프로젝트는 설계가 중요....

프로젝트 설계의 중요성을 또다시 느낌

괜스레 디자인 바꿔보겠다고 건드렸더니 엄청 엉켜서 할 일도 못하게 만드는 내 개인프로젝트

router들도 다 엉망진창이 되버려서 다시 원상복구시키고 

파이어베이스를 이용한 것보다 Restful API 사용이 확실히 쉽고

프로젝트 적용시키기 전에 공부는 확실히 해놓고 설계도 힘들게 해야 하고,

찜하기를 구현하는데 로컬스토리지에 저장하고 로컬스토리지에 있는 것을 불러와서 

리스트를  아래 그림과 같이 나열 했는데 삭제가 다 잘되다가 마지막 하나가 로컬스토리지에서는 지워지고 

화면에는 그대로 남아있어서 해결하느라 조금 애먹었다.

 

 

  const [items, setItems] = useState<itemProps[]>([]);
  const [wish, setWish] = useRecoilState(WishState);
  const userId = JSON.parse(localStorage.getItem("user")).email;
  const baskets = JSON.parse(localStorage.getItem(userId));

  const onDelBtnClick = (boardEl: string) => {
    if (confirm("삭제 하시겠습니까?") === true) {
      baskets.splice(baskets.indexOf(boardEl), 1);
      setWish(false);
    }
    localStorage.setItem(userId, JSON.stringify(baskets));
  };
  useEffect(() => {
    setItems(itemData);
  }, [wish]);

 

여기에 localStorage에서 바로 받아오면 계속 인식을 안 하는 것 같아서

wishList 하나 더 넣어주니까 해결됐다.

 

  const [items, setItems] = useState<itemProps[]>([]);
  const [wish, setWish] = useRecoilState(WishState);
  const [wishList, setWishList] = useState(null);
  const userId = JSON.parse(localStorage.getItem("user")).email;
  const baskets = JSON.parse(localStorage.getItem(userId));

  const onDelBtnClick = (boardEl: string) => {
    if (confirm("삭제 하시겠습니까?") === true) {
      baskets.splice(baskets.indexOf(boardEl), 1);
      setWish(false);
      setWishList(baskets);
    }
    localStorage.setItem(userId, JSON.stringify(baskets));
  };
  useEffect(() => {
    setItems(itemData);
    setWishList(baskets);
  }, [wish]);

 

여기서 무슨 설계가 중요하냐 하겠지만 원래는 잘 작동하던 동작이 내가 뭔가 하나를 바꾸니 작동을 안 하는 거라서 

처음부터 설계를 잘 짜고 코드를 작성했다면 그 부분들을 쉽게 잘 찾아서 고쳤지 않을까해서 설계가 중요하다는 말....