Explore 페이지 만들기

📁 Explore 페이지 미리보기

 

 

 

Explore 페이지 기능에 대해서 간단하게 정리해보자면 다음과 같다.

 

 

SeacrchBar : 키워드 검색 누르면 해당 키워드를 포함한 데이터를 보여줌. 

Top : 키워드가 포함된 트윗 데이터들을 하트 수가 많은순으로 보여줌

Latest : 키워드가 포함된 트윗 데이터들을 최신순으로 배열

People : 계정정보에 키워드가 포함된 유저 데이터들을 보여줌

 

실제 구현한 코드

---

대부분 백엔드 코드는 getTweet API와 거의 동일하게 사용한다. 다른 점은 트윗 데이터를 가져올때 search 데이터를 가져와서 해당 글자를 포함한 데이터를 가져온다는 점이다.

 

Top부분 마지막에  like 숫자에 따라 많은 순으로 데이터를 다시 정렬하여 프론트 보여주게 된다. 

 data: topUser.sort((a: any, b: any) => b.like.length - a.like.length)

 

 

Latest 부분은 트윗데이터를 가져올때 order를 사용해 tweet_id를 기준으로  내림차순 정렬으로 가져오게 만들었다. 더 큰 tweet_id값에서 더 작은 값으로 정렬해서 최신 데이터부터 보여준다. 

  const latestData = await Tweets.findAll({
      include: [Likes, Bookmark, Users],
      offset: offset,
      limit: 10,
      where: {
        [Op.or]: [
          { content: { [Op.like]: [`%${search}%`] } },
          { tag: { [Op.like]: [`%${search}%`] } },
        ],
      },
      order: [["tweet_id", "DESC"]],

 

 

People부분은 유저 아이디에 search 글자를 포함한 유저 데이터를 가져오는 코드로 작성했다.

router.get(
  "/people",
  verifyRefreshToken,
  async (req: any, res: Response, next: NextFunction) => {
    let pageNum = Number(res.req.query.pageCount); // 요청 페이지 넘버
    let offset = 0;
    if (pageNum > 1) {
      offset = 10 * (pageNum - 1);
    }
    const { search } = res.req.query;
    let count = await Users.count({
      where: {
        email: { [Op.like]: [`%${search}%`] },
      },
    });
    const currentUser: Users[] = await Users.findOne({
      where: {
        email: req.email,
      },
    }).then((r: any) => {
      return r.user_id;
    });
    const peopleData = await Users.findAll({
      where: {
        email: { [Op.like]: [`%${search}%`] },
      },
      include: [Follow],
      offset: offset,
      limit: 10,
    }).then((d: any) => {
      return d.map((d: any) => {
        let is_follow = false;
        if (
          d.follow.some((i: any) => {
            return i.follower_id === currentUser;
          })
        ) {
          is_follow = true;
        }

        return {
          user_id: d.user_id,
          following: is_follow,
          email: d.email,
          profile: d.profile,
        };
      });
    });

    res.status(200).json({
      data: peopleData,
      count: count,
    });
  }
);

 

참고 사이트

---

Tailwind CSS Search Input - Flowbite

[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className)

Sequelize 공식 Document - (1) Model Usage

Sequelize 공식 Document - (2) Querying

top

[JavaScript]객체 배열 정렬하는 방법

latest

Sequelize:: 페이지네이션 기능 (limit, order, Op.lt)

Adding ORDER BY clause to Sequelize ORM query

[ORM][Sequelize] include 모델에 order by 하기