클라이밍하는 개발자

기존에 뜨는 맛집리스트라는 기능구현을 했다.

TypeORM으로 기능 구현했는데 그룹화하고, 평균값 구하는 등 많은 일을 하려다보니

find문을 사용한후로 다양한 로직을 구현했다.

 /*
    ### 23.03.20
    ### 표정훈
    ### [Main] 요즘 뜨는 맛집리스트🔥
    */
  async HotMyList() {
    try {
      // 1달 전 날짜를 구한다
      const oneMonthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

      // 컬렉션과 게시물, 좋아요 정보를 가져온다
      const myListSumLikes = await this.collectionItemRepository.find({
        relations: {
          post: {
            postLikes: true,
            user: true,
            images: true,
          },
          collection: {
            user: true,
          },
        },
        where: {
          // 컬렉션 타입이 myList 이면서 삭제되지 않은 것을 가져온다
          collection: {
            type: 'myList',
            deletedAt: null,
          },
          post: {
            // 좋아요가 삭제되지 않았고, 1달 이내에 좋아요 업데이트된 게시물만 가져온다
            postLikes: {
              deleted_at: null,
              updated_at: MoreThan(oneMonthAgo),
            },
          },
        },
        select: {
          id: true,
          post: {
            id: true,
            images: { id: true, file_url: true },
            postLikes: {
              id: true,
            },
            user: {
              id: true,
              nickname: true,
            },
          },
          collection: {
            id: true,
            name: true,
            user: {
              id: true,
              nickname: true,
            },
          },
        },
        take: 2,
      });

      // 컬렉션별 좋아요 수를 합산하여 그룹화한다
      const groupedData = myListSumLikes.reduce((groups: any, item: any) => {
        const collectionId = item.collection.id;
        if (!groups[collectionId]) {
          groups[collectionId] = {
            collection: item.collection,
            user: item.collection.user,
            sumLikes: 0,
          };
        }
        groups[collectionId].sumLikes += item.post?.postLikes?.length ?? 0;

        // 게시물에 포함된 이미지 URL 정보를 가져온다
        const images = item.post?.images ?? [];
        const fileUrls = images.map((image: any) => image.file_url);
        groups[collectionId].images = fileUrls;

        return groups;
      }, {});

      // 컬렉션별 좋아요 합산값에 따라 내림차순으로 정렬한다
      const collectionSumLikes: any = Object.values(groupedData);
      collectionSumLikes.sort((a: any, b: any) => b.sumLikes - a.sumLikes);

      // 상위 10개 컬렉션 정보를 구성하여 반환한다
      const top3Collections = collectionSumLikes
        // .slice(0, 10)
        .map(({ collection, user, sumLikes, images }: any) => {
          return {
            id: collection.id,
            name: collection.name,
            user: {
              id: user.id,
              nickname: user.nickname,
            },
            sumLikes,
            images,
          };
        });

      return top3Collections;
    }

그런데 위의 코드는 문제가 있었다. 정보를 가져올때 이미 take로 한정지어서 가져왔기에

뒤에 코드에서 몇개를 분리하든 의미가 없던 것이었다.

결국 쿼리빌더로 작성해봤는데 코드의 양이 엄청나게 줄어들었다.

/*
    ### 23.03.20
    ### 표정훈
    ### [Main] 요즘 뜨는 맛집리스트🔥
    */
  async HotMyList() {
    try {
      // 1달 전 날짜를 구한다
      const oneMonthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

      // 컬렉션별로 포스트의 좋아요를 모두 합쳐서 가장 좋아요수가 많은 컬렉션 5개를 순서대로 가져온다
      const top5Collections = await this.collectionItemRepository
        .createQueryBuilder('collectionItem')
        .leftJoinAndSelect('collectionItem.collection', 'collection')
        .leftJoinAndSelect('collection.user', 'user')
        .leftJoinAndSelect('collectionItem.post', 'post')
        .leftJoinAndSelect('post.postLikes', 'postLikes')
        .where('collection.type = :type', { type: 'myList' })
        .andWhere('postLikes.updated_at > :oneMonthAgo', { oneMonthAgo })
        .select([
          'collection.id',
          'collection.name',
          'user.id',
          'user.nickname',
          'user.profile_image',
          'COUNT(postLikes.id) as sumLikes',
        ])
        .groupBy('collection.id')
        .orderBy('sumLikes', 'DESC')
        .limit(5)
        .getRawMany();

      // 상위 5개 컬렉션 정보를 구성하여 반환한다
      const topCollections = top5Collections.map((item: any) => {
        return {
          id: item.collection_id,
          name: item.collection_name,
          user: {
            id: item.user_id,
            nickname: item.user_nickname,
            profile_image: item.user_profile_image,
          },
          sumLikes: item.sumLikes,
        };
      });

      return topCollections;
    }

TypeORM으로만 작성해왔는데

TypeORM 쿼리빌더가 복잡한 로직에는 훨씬 유용한것 같다.

따로 쿼리빌더를 공부해야겠다는 생각이 들었다.

1. 요즘 뜨는맛집 - 유저프로필이미지가 없다 => post에 있는 user 정보가 아니라 collection에 있는 user정보였다.
2. 요즘 뜨는맛집 - 리스트 5개 나오게 하기 => take 수량변경
3. 맛집리스트 수정에서 이미지가 안된다 => 참고해야할 변수명이 image가 아닌 file 이었다.
4. 맛집리스트 상세보기 - 카테고리 그룹네임-> 카테고리 네임 변경

프론트 연결중에 문제가 생긴 부분을 수정했고,

내일 배포할때 사용할 구글폼을 팀원들과 함께 작성하였다.

테스트코드 공부를 좀 하였으나 역시나 어려워서 머리가 아픈 하루였다.

컬렉션 안에 있는 맛집별로 평균 평점을 구하는 작업을 했다.

처음엔 아무 생각없이 모든 평점을 모아서 평균을 냈는데, 생각해보니

1가지 맛집에 대한 평점만 낸것이어서, 다른 맛집도 추가하여 분리해보았다.

맛집ID가 같은 것끼리 분리해야하니, 그룹화가 필요했고,

그룹화 이후 각 포스트 정보는 1개씩만 대표로 가져오게 했다.

  async getMyListDetail(collectionId: number, page: string) {
    try {
      let pageNum = Number(page) - 1;
      const myListInOnePage = 1;

      if (isNaN(pageNum) || pageNum < 0) {
        pageNum = 0;
      }

      // 컬렉션 이름과 포스트 정보 가져오기
      const myList = await this.collectionRepository.find({
        relations: {
          collectionItems: {
            post: { images: true, restaurant: true },
          },
        },
        where: {
          id: collectionId,
          // user_id: userId,
          deletedAt: null,
          type: 'myList',
        },
        select: {
          id: true,
          name: true,
          description: true,
          visibility: true,
          collectionItems: {
            id: true,
            post: {
              id: true,
              content: true,
              rating: true,
              images: true,
              restaurant: {
                id: true,
                x: true,
                y: true,
                place_name: true,
                category_group_name: true,
              },
            },
          },
        },
        skip: pageNum * myListInOnePage,
        take: myListInOnePage,
      });

      const [myListDetail] = myList.map((myList) => {
        const groupedPosts = {};
        for (const item of myList.collectionItems) {
          
          const restaurantId = item.post.restaurant.id;
          if (!groupedPosts[restaurantId]) {
            groupedPosts[restaurantId] = { posts: [], sum: 0, count: 0 };
          }
          groupedPosts[restaurantId].posts.push({
            ...item.post,
            restaurant: item.post.restaurant,
            images: item.post.images,
          });
          
          const rating = item.post.rating;
          if (typeof rating === 'number') {
            groupedPosts[restaurantId].sum += rating;
            groupedPosts[restaurantId].count++;
          }
        }

        
        const formattedPosts = [];
        for (const groupId in groupedPosts) {
          const group = groupedPosts[groupId];
          const avgRating =
            group.count > 0 ? (group.sum / group.count).toFixed(1) : null;

          if (group.posts.length > 0) {
            formattedPosts.push({
              id: group.posts[0].id,
              content: group.posts[0].content,
              rating: group.posts[0].rating,
              AvgRating: avgRating,
              images: group.posts[0].images,
              restaurant: group.posts[0].restaurant,
            });
          }
        }

        return {
          id: myList.id,
          name: myList.name,
          description: myList.description,
          visibility: myList.visibility,
          post: formattedPosts,
        };
      });

      return myListDetail;
    } catch (err) {
      console.error(err);
      throw new InternalServerErrorException(
        'Something went wrong while processing your request. Please try again later.',
      );
    }
  }

요즘 뜨는 맛집리스트와 내 친구의 맛집리스트 기능구현을 했다.

요즘 뜨는 맛집리스트는 쿼리문을 작성하는 것까진 쉬웠으나 원하는 값을 뽑아오는건 힘들었다.

추가적으로 내 친구의 맛집리스트는 어떤식으로 데이터를 가져올지 고민을 했다.

우선 user에서 정보를 가져와야 할 것 같았다.

내 userId를 통해 내가 팔로잉하고 있는 유저아이디를 찾았다.

해당 유저아이디를 where에 넣어서 유저게시물 정보를 찾아오는 방식으로 구현했다.

(유저아이디 먼저 찾고, 유저아이디를 토대로 게시물 정보 찾기)

const followerId = await this.followRepository.find({
        where: {
          follower: { id: userId },
        },
        select: {
          following: { id: true },
        },
        relations: {
          following: true,
        },
      });

      const followingIds = followerId
        .map((f) => f.following.id)
        .filter((id) => !isNaN(id));

      const myListFollwers = await this.collectionItemRepository.find({
        relations: {
          post: {
            user: true,
            images: true,
          },
          collection: {
            user: true,
          },
        },
        where: {
          collection: {
            type: 'myList',
            deletedAt: null,
            user_id: In(followingIds), //팔로워들의 아이디
          },
        },
        select: {
          post: {
            id: true,
            images: { id: true, file_url: true },
            user: {
              id: true,
              nickname: true,
            },
          },
          collection: {
            id: true,
            name: true,
            user: {
              id: true,
              nickname: true,
            },
          },
        },
      });

이번 주 알게 된 점

백앤드는 쿼리문에 익숙해지는게 매우 중요하다.

그리고 결과값을 받기 위해선 map에 익숙해져야 한다.

const myListSumLikes = await this.collectionItemRepository.find({
        relations: {
          post: {
            postLikes: true,
            user: true,
            images: true,
          },
          collection: {
            user: true,
          },
        },
        where: {
          // 컬렉션 타입이 myList 이면서 삭제되지 않은 것을 가져온다
          collection: {
            type: 'myList',
            deletedAt: null,
          },
          post: {
            // 좋아요가 삭제되지 않았고, 1달 이내에 좋아요 업데이트된 게시물만 가져온다
            postLikes: {
              deleted_at: null,
              updated_at: MoreThan(oneMonthAgo),
            },
          },
        },
        select: {
          id: true,
          post: {
            id: true,
            images: { id: true, file_url: true },
            postLikes: {
              id: true,
            },
            user: {
              id: true,
              nickname: true,
            },
          },
          collection: {
            id: true,
            name: true,
          },
        },
      });

내가 이런 쿼리문을 쉽게 작성할 날이 올줄이야.

너무 만족스럽다. 이제 쿼리문을 찾은 정보를 예쁘게 골라서 전달하기 위해

map함수에 익숙해지는것만 남았다.

이번주 목표 달성 여부

마이리스트 세부기능 모두 완성

다음주 목표 세우기

북마크 세부기능 모두 완성

오늘 해야할 일은 메인에 관한 정보이다.

이 부분에 대한 정보를 가져와야하는데 우선 어떤 저장소에서 정보를 가져와야할지 고민했다.

고민한 결과 컬렉션아이템이라는 테이블을 사용하는 것이 가장 좋을 것 같았다.

  /* 로직 설명
요즘 뜨는 맛집 리스트 ⇒ 
★ 마이리스트에 있는 게시물 좋아요 총합순. 좋아요총합 설정★
1) 모든 마이리스트를 조회한다.
2) 모든 마이리스트의 게시물의 좋아요 수를 더한다
3) 좋아요 총합이 가장 좋은 마이리스트순으로
    마이리스트 이름과 닉네임과 포스트 이미지를 반환한다.
4) 현재(최신)유행하는 날짜 둘다 받는거로 한다. 날짜설정★
*/

다음은 어떤 방식으로 결과값을 가져와야할지 고민했다.

초기에는 위처럼 작성하면서 쿼리문을 작성해봤다.

const myListSumLikes = await this.collectionItemRepository.find({
        relations: {
          post: {
            postLikes: true,
            user: true,
            images: true,
          },
          collection: {
            user: true,
          },
        },
        where: {
          // 컬렉션 타입이 myList 이면서 삭제되지 않은 것을 가져온다
          collection: {
            type: 'myList',
            deletedAt: null,
          },
          post: {
            // 좋아요가 삭제되지 않았고, 1달 이내에 좋아요 업데이트된 게시물만 가져온다
            postLikes: {
              deleted_at: null,
              updated_at: MoreThan(oneMonthAgo),
            },
          },
        },
        select: {
          id: true,
          post: {
            id: true,
            images: { id: true, file_url: true },
            postLikes: {
              id: true,
            },
            user: {
              id: true,
              nickname: true,
            },
          },
          collection: {
            id: true,
            name: true,
          },
        },
      });

예전 같았으면 하루종일 매달려도 완성하지 못했을 코드다.

그런데 테이블간의 관계도 익숙해지고, 쿼리문도 익숙해지다보니 몇십분만에 뚝딱 만들었다.

이후 찾은 값을 어떠한 조건속에서 값을 반환해야하는지 많은 고민을 하고 기능을 구현했다.

[Feature] 마이리스트 상세보기

 async getMyListDetail(collectionId: number) {
    try {
      // 컬렉션 이름과 포스트 정보 가져오기
      const myList = await this.collectionRepository.find({
        relations: {
          collectionItems: {
            post: { images: true, restaurant: true },
          },
        },
        where: {
          id: collectionId,
          // user_id: userId,
          deletedAt: null,
          type: 'myList',
        },
        select: {
          id: true,
          name: true,
          visibility: true,
          collectionItems: {
            id: true,
            post: {
              id: true,
              content: true,
              rating: true,
              images: true,
              restaurant: {
                id: true,
                x: true,
                y: true,
                place_name: true,
              },
            },
          },
        },
      });

      return myList.map((myList) => ({
        id: myList.id,
        name: myList.name,
        visibility: myList.visibility,
        post: myList.collectionItems.map((item) => ({
          ...item.post,
          restaurant: item.post.restaurant,
          images: item.post.images,
        })),
      }));
    }

위 기능을 만들기 위해선 쿼리문이 가장 문제였다.

테이블과 테이블간의 관계가 너무 복잡했다.

잘하는 팀원의 도움을 받아서 컬렉션 아이템에 있는 post정보,

또 post안에 있는 restaurant 정보는 어떻게 가져오는지 많이 배웠다. 

쿼리문은 많이 익숙해졌으나, 가져오는 값이 대부분 객체 형식이다보니

map함수를 통해 값을 찾아야하는데 익숙해지기 어렵다.

[FIX] : 포스트 수정시에 마이리스트를 변경할 경우 
원래있던 마이리스트에 포스팅은 삭제되는 기능 #76

위 문제를 대해서 몇시간동안 고민했다.

원하는 방법은 입력값을 넣을때 기존값이랑 중복되면 기존값을 유지하고, 새로운 값은 추가한다.

하지만 그렇게 하려니 너무 머리아팠다.

나는 아직 초보기 때문에 어쨌든 기능을 만들고 싶었던 결과,

	// 1. 입력받은 값으로 컬렉션아이템에 있는 포스트아이디를 모두 찾는다.
      const findPostId = await this.collectionItemRepository.find({
        relations: ['post', 'collection'],
        where: {
          post: { id: postId },
          collection: { type: 'myList' }, //마이리스트 일때만!
        },
      });

      // 2. 컬렉션아이템에서 해당 포스트 아이디로 검색되는거 다지운다.
      await this.collectionItemRepository.remove(findPostId);
      // 3. 입력받은 정보로 모두 넣어준다.
      await this.myListPlusPosting(postId, collectionId);
      return;

무식하지만 간단하게 만들었다.