Today, I Learned

• Crop vs Resize
• formData를 보낼 때는 multipart라고 헤더에 명시해줘야한다.

        const response = await axios({
          method: 'post',
          url: 'https://server.codestates-project.tk/post',
          data: formData,
          headers: {
            'Content-Type': `multipart/form-data`,
          },
        });

• infinite scroll 구현완료

  const target = createRef();
  // const [isLoaded, setIsLoaded] = useState(false);
  const fetchItems = async () => {
      // setIsLoaded(true);
      await addPost();
      // setIsLoaded(false);
    };
  const onIntersect = async ([entry], observer) => {
      if (entry.isIntersecting) {
        console.log('intersecting');
        observer.unobserve(entry.target);
        await fetchItems();
        observer.observe(entry.target);
      }
    };
  useEffect(() => {
      const observer = new IntersectionObserver(onIntersect, { threshold: 0.5 });
      observer.observe(target.current);
      return () => observer.disconnect();
    }, []);
    return (
    <div className={styles.grid_border}>
    <div className={styles.grid_container}>
  {posts.map((post, idx) => (
  <Post dummyData={post.title} key={idx} viewPost={viewPost} />
          ))}
          <div ref={target} className={styles.observer}>
            isLoading...
          </div>
        </div>
      </div>
    );
  };

  레퍼런스 : link

Planning to Study(In Project)

• infinite scroll 로직 자체는 구현했는데, 현재 grid를 써서 포스트를 받아오고 있어서, intersecting을 체크하는 데에 문제가 생겼다. 따라서, 내일 grid를 flex로 구현하는 방향으로 리팩토링을 해놔야겠다.

Day 9

천천히.. 감당할 수 있을 정도만 벌이자. 힘내자!