20231122 TIL 팀프로젝트 뉴스피드 2일차

목표

• UI구성
• 파이어베이스 연결 
• READ 구현

새로 알게 된것/ 오늘의 코드

overflow : scroll 시  스크롤바 지우기 

나는 옆으로는 필요없고 위아래로만 필요해서 overflow-y 로 했는데 옆에 생기는 스크롤바가 너무 못생겨서 없애기 위해서 구글링을 해봤다.

overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

 styled components 에서는 css안에 중첩해서 사용할 수 있기 때문에 필요한 부분에 추가하면 된다. 그리고 전역에 하려면 body  스타일에 넣으면 된다.

파이어베이스에서 READ 구현

코드

import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";
import { db } from "../../../firebase";


useEffect(() => {
    const fetchData = async () => {
      const querySnapshot = await getDocs(collection(db, "news_feed"));

      const initialNews = [];

      querySnapshot.forEach((doc) => {
        const data = {
          id: doc.id,
          ...doc.data(),
        };

        initialNews.push(data);
      });
      setNews(initialNews);
    };
    fetchData();
  }, []);

=> redux로 바꾸는 작업 중인데 전 과제에선 toolkit을 안쓰고 해서 toolkit으로 하려니 하나도 모르겠다.

넘 힘들어서 내일 일어나서 마저 설명 추가해야겠다.

분류 구현 세팅

우리조는 tag를 이용한 분류를 구현하기로했는데 tag 같은경우 여러개가 들어갈 수 있어서 조건이 조금 더 생기게 된다. 

단순하게 includes를 하는 것은 tag가 배열로 이루어져있기 때문에 적용되지 않는다. 

 

그래서 계속 없다는 표시만 뜨다가 문득 알고리즘에서 풀었던 배열의 유사도 문제가 떠올랐다.  그렇게 만들어진 코드

  const tagFiltered = news.filter((n) => {
    const filter = n.tag_name_list.filter((item) => tag.includes(item));
    return tag.includes(...filter);
  });

 앗 완전 천재라고 생각했는데 생각해보니 그렇게 되면 데이터의 배열이 가지고 있는 요소 둘 다를 가지고 있어야 filter가 되는 것이라서 오류가 생기겟네요. 

ㅠ

 

 

 

 

 

 

 

목표 달성여부

 

내일 목표

•