23년 4월 17일

• 밀린 TIL 적어서 18일 화요일에 작성합니다.

배운 것과 알게 된 점

저번에 feedCount, isScrap를 구현하려고 했다가 토큰 유무에 따라서 문제점들이 있어서 이날 프론트분들과 상의해서 로그인 있을때와 없을 때 기점으로 구현하기로 하였다.
우선 로그인 유무와 상관없이 feedCount 구현은 현재 해당 맛집의 피드 작성한 개수를 구하는 것이라 어렵지 않았다. Feeds의 findAll로 조건으로 ShopId를 가져오면 되었다.
하지만 가장 손에 갔던 것은 해당 카페 맛집마다 isScrap을 유무를 구현을 하는 것이였는데 이것을 로그인 했을 때와 안했을 때 기준으로 나눠야 했고, 우선은 임시적으로 코드를 2배로 작성해서 토큰 유무만 확인 후 처리 하는 방식으로 우선은 임시 조치를 했다. 이로써 코드작성은 2배가 되버렸지만 어떻게든 구현은 성공은 하였다. 이 부분은 나중에 추후 코드 가독성을 위해서 개선을 해야 하는 부분이다.
하단에는 로그인이 되었을때 Scrap의 findOne으로 해당 유저와 맛집을 찾고 조회 하는 방식으로 구현을 하였다.
아래 코드는 로그인 했을 때에 그 당시의 for문으로 돌리는 코드이다.

for (let i = 0; i < shops.length; i++) {
          const userLocate = { latitude: lng, longitude: lat };

          const shopLocate = {
            latitude: shops[i].lng,
            longitude: shops[i].lat,
          };

          const totalDistance = haversine(userLocate, shopLocate, {
            unit: "meter",
          });

          let isScrap = await Scrap.findOne({
            where: { ShopId: shops[i].shopId, UserId: userId },
          });

          let findFeedAll = await Feeds.findAll({
            where: { ShopId : shops[i].shopId }
          })

          let feedCount = findFeedAll.length

          console.log(totalDistance.toFixed(2) + " m");
          const shopInfo = {
            shopId: shops[i].shopId,
            address: shops[i].address,
            lng: Number(shops[i].lng),
            lat: Number(shops[i].lat),
            shopName: shops[i].shopName,
            thumbnail: shops[i].thumbnail,
            menuName: shops[i].menuName,
            maxPrice: Number(shops[i].maxPrice),
            minPrice: Number(shops[i].minPrice),
            category: shops[i].category,
            distance: Number(totalDistance.toFixed(0)),
            feedCount: feedCount,
            isScrap: isScrap ? true : false,
          };

          if (totalDistance <= Number(range)) {
            result.push(shopInfo);
          }
        }

이렇게 해서 구현은 마무리 하였고, 비로그인 상태에서는 그냥 false로 고정을 하였다. 처음에는 어떻게 해야 할지 막막하였는데 그래도 같이 하는 팀원 한테 도움을 받아서 구현을 마무리 하였다.
이로써 기능 구현은 모두 마무리 하였고 자기 전에 수정된 사항으로 배포를 마무리 하였다.

앞으로 할 일

내일부터는 백앤드에서는 기능 구현은 모두 끝났기 때문에 프론트에서 문제가 되는 부분을 수정하는 작업을 시작할 것 같다.