[미니 프로젝트] Jelog 만들기 #7

박제현·2023년 8월 1일

jelog 만들기

목록 보기

7/15

🏗️ 파편화된 값들을 하나로 모아서 관리하자.

지금까지 작성한 코드는 게시글 리스트 따로, 계정 따로, 모든 걸 따로따로 작성했었다.
이유는 처음부터 유저 정보를 생각하지 않고 코드를 짰기 때문에, 관리하는 스테이트들이 너무 많아졌다.
이런 식으로 스테이트들이 파편화 되면, 프롭스로 넘겨줄때도 불편하고, 필요한 값을 찾는데도 너무 불편했다.
그래서 파편화된 값들을 USER 스테이트로 관리하려고 한다.

		{
            userID: userID.split("@")[0],
            account: userID,
            userIcon: userIcon,
            postIndex: 0,
            posts: [],
            saveIndex: 0,
            savedPost: [],
         }

USER 스테이트의 구조는 위와 같다. 사용자의 아이디와 이메일 계정, 아이콘 값, 포스트 정보들을 가지고 있다.
이제는 전체 포스트리스트에서 사용자 아이디를 비교하여 포스트를 불러오는 불필요한 로직이 USER 스테이트로 관리하면 필요 없다.

지금까지 구현한 모든 기능들을 USER 스테이트를 사용하여 동작하도록 대공사를 진행했다.

//APP.js
  const [postList, setPostList] = useState(
    JSON.parse(localStorage.getItem("postList")) || []
  );
  const [isLogin, setIsLogin] = useState(false);
  const [USER, setUSER] = useState();
  const [accountList, setAccountList] = useState(
    JSON.parse(localStorage.getItem("accountList")) || []
  );

앱의 가장 최상단에서 관리하는 스테이트 수가 확 줄었다.
이제는 모든 게시글의 정보를 담고 있는 postList, 로그인 상태 isLogin, 현재 사용자 정보 USER, 모든 계정 정보를 담고 있는 accountList만 필요하다.

지나치게 많은 스테이트를 관리하고, 불필요하게 많은 스테이트가 있던 지난 코드를 보면 머리가 어지럽다. 😵‍💫

모든 기능들을 USER 와 연동하여 동작하도록 수정하였다.

//writePage.js
  const handleAddPost = () => {
    if (!isError) {
      const today = new Date();
      const title = titleTextareaRef.current.value;
      const content = previewContentRef.current.outerHTML;
      const newPost = {
        userID: USER.userID,
        id: USER.postIndex,
        title: title,
        content: content,
        date: today.toLocaleDateString(),
        likesCount: 0,
      };

      const newPostList = [...postList, newPost];
      setPostList(newPostList);
      localStorage.setItem("postList", JSON.stringify(newPostList));

      USER.posts.push(newPost);
      USER.postIndex += 1;

      const headerContainer = document.querySelector(".headerContainer");
      headerContainer.classList.remove("hide");
      updateAccountList();
      localStorage.setItem("USER", JSON.stringify(USER));
      navigate("/");
    }
  };

이제는 새로운 게시글을 작성하면 USER.posts 안으로 새로운 게시글 정보가 추가되고, 이 안에서 특정 게시글을 찾아서 수정하고 삭제하도록 구현하였다.

💽 localStorage로 브라우저에 데이터 저장하기.

지금까지는 브라우저를 새로고침 하면 지금까지 작성했던 게시글 정보, 로그인 정보, 계정 정보들이 전부 사라졌다.
당연한 현상이다. 그냥 js 의 변수로 설정한 것이기 때문에, js가 재시작 되면 변수값은 초기화되는 것이다.

나는 이제 기능 구현을 더 이상 그만하고 백엔드를 공부할 지, 아니면 좀 더 프론트 쪽으로 Jelog를 완성시킬지 고민했다.

그래도, 서버와 연동하고 배포까지 마친 프로젝트가 더 완성도 있는 프로젝트라고 생각하여 백엔드를 공부하려고 한다.

그전에 일단은 브라우저에서 기본으로 제공하는 localStorage를 이용하여 작업 과정을 브라우저 내에 저장해두고 코드를 짜려고 했다.

localStorage

localStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해준다.

쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.

저장한 데이터는 세션간에 공유되며, 세션이 변경되어도 저장된 데이터가 유실되지 않는다.

위 이미지와 같이 브라우저 안에 데이터들이 저장된다.
리액트를 재실행하여도 해당 데이터들은 남아있다.

  const [postList, setPostList] = useState(
    JSON.parse(localStorage.getItem("postList")) || []
  );
  const [accountList, setAccountList] = useState(
    JSON.parse(localStorage.getItem("accountList")) || []
  );

  localStorage.setItem("USER", JSON.stringify(USER));