TIL. React. <22.04.07>

오늘 해야 할 것

개인 과제 마무리
리덕스 공식문서 읽기

오늘 공부 한 것

immer와 draft

https://immerjs.github.io/immer/

오늘 배운 것

이미지는 수정이 될 수도 있고 수정이 안될 수도 있다고.
이미지를 수정한다는 건 결국에는 이미지를 새로 올린다는 것.
그렇다면 이미지를 업로드를 했다 안했다를 어떻게 체크해야 할까?

이미지 수정 프로세스

현재 수정으로 들어와 게시글 작성을 누르면 수정이 안되고 새로 만들어진다. 그리하여 여러 프로세스를 거쳐가야 한다.

기존에 있던 이미지와 비교

이미지를 새로 업로드를 한 경우, 인풋에 파일이 들어가 있다가
파일리더로 읽어서 preview에다 넣어줬었다는 걸 생각하여 (data_url)

그런데 만약 사용자가 파일을 업로드 안했으면 포스트 하나에 들어가 있던
그 이미지 링크가 들어가 있음.

그렇다면 우리는 하나의 링크, 포스트에 이미 있었던 그 링크 그리고
preview에 저장되어있는 값과 비교 해야 함. 같으면 새로 이미지 업로드
안한 것이고, 다르면 이미 preview에 업로드를 한 것임.

이미지가 같은 경우(새로 이미지 업로드를 하지 않는 경우).

...

if (_image === _post.image_url) {
      postDB
        .doc(post_id)
        .update(post)
        .then((doc) => {
          dispatch(editPost(post_id, { ...post }));
          history.replace('/');
        });
    }

윗 부분은 파이어베이스 doc을 쓴 것이고 .then부터는 리덕스의 dispatch 사용. 구분을 잘 해두자.

무한스크롤

• 게시글을 가져올 때(파이어스토어 통신할 때), 어디까지 가져왔는 지, 다음엔 뭐부터 가져올 지 페이징 정보!
• 게시글을 가져오는 중인 지, 아닌 지 구분해야겠다!(스크롤마다 계속 다시 불러오면 안되니까!)
• 게시글을 가져오는 중이구나~ 알 수 있도록 스피너 컴포넌트를 만들자!