23년 4월 18일

배운 것과 알게 된 점

어제 배포까지 마무리 되고 아침에 프론트 분들이 몇몇 부분을 수정할 필요가 있었다. 현재 위도, 경도는 물론, 맛집의 가격 등등이 String로 나오고 있어서 이것을 모두 number 숫자 형태로 바꿔서 전달하면 좋겠다고 해서 해당 코드들은 Number() 함수를 씌워서 해결을 하였다.

현재 맛집 데이터가 2~30개밖에 없었는데 이참에 3000개 모두 다 넣어보라고 해서 3000개를 모두 넣었는데 전체 데이터 조회에서 심각한 문제가 발견하였다.

맛집이 2~30개 시절때에는 문제 없었지만, 이렇게 맛집이 3000개 가량을 넣고 실행하면 저렇게 쿼리문만 3000개가 넘게 떴고 이로 인해서 출력되는 시간이 무려 40~50초는 넘어가는 사태를 겪고 말았다.

그래서 이대로는 처음 사이트 들어가면 40초가 넘는 시간이 발생하였고, 이 부분을 해결하기 위해서 팀원 한분과 라이브 코딩을 하면서 기존 코드를 보면서 해결하기 위해서 구현을 시도하였다. 여담으로 프론트에서 위도, 경도, 반경길이를 body로 보내고 있기 때문에, 요청방식을 GET에서 POST로 변경하였다.

// 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

지금은 주석 처리되었지만 어제 해당 for문 안에 await문이 들어가서 문제였던것이였다. 그래서 쿼리문이 3000개가 전부 실행되서 오래 걸렸던 것이였다. 그래서 기존에 어제 구현했던 isScrap과 feedCount 부분을 다시 없애고 result로 반환을 해주었다.
그리고 result2를 새로 만들어서 반경 거리 내에 해당 되는 것들만 쿼리가 실행될 수 있게 구현하는 방법으로 바꾸었다. 이 부분이 몇시간 걸려서 겨우 구현하였고, 아래는 우리가 새로 작성한 추가 코드인데 로그인 한 상태만 구현한 코드는 다음과 같다.

 let result2 = []
        let cn = result.length


        shops.sort((a, b) => {
          const userLocate = { latitude: lng, longitude: lat };
          const shopALocate = { latitude: a.lng, longitude: a.lat };
          const shopBLocate = { latitude: b.lng, longitude: b.lat };
          
          const distanceA = haversine(userLocate, shopALocate, {
            unit: "meter",
          });
          
          const distanceB = haversine(userLocate, shopBLocate, {
            unit: "meter",
          });
          
          return distanceA - distanceB;
        });

        


        for(let i = 0 ;i < cn; i++) {
     
          let isScrap =  await Scrap.findOne({
            where: { ShopId: shops[i].shopId, UserId: userId },
          });
  
          let findFeedAll = await Feeds.findAll({
            where: { ShopId : shops[i].shopId }
          })
          const userLocate = { latitude: lng, longitude: lat };

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

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

          let feedCount = findFeedAll.length
          
          result = { 
            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,
          }

          result2.push(result);
        }

변수 cn countnumber라는 뜻으로 카페들을 조회할때 이때 나오는 총 개수를 변수로 선언을 하였고, 그 부분만 for문으로 바꿔서 쿼리를 수행 할 수 있게 구현을 하였다.

이렇게 구현을 하니까 거의 40~50초 걸렸던 것이 단 0.3초로 단축을 하였다. 다만 해당 부분이 같은 코드로 겹치는 부분이 많아서 아마 이 부분도 코드 가독성을 위해서 다음주부터 최적화를 해야 하는 부분이다. 아무튼 이 부분을 구현을 하였고 남은시간에는 지금까지 코드 작성한 부분을 보면서 복습을 하였다.

앞으로 할 일

내일부터는 계속해서 프론트앤드분들과 테스트 하면서 문제 있으면 계속해서 수정하는 방안으로 갈 것같고, 토요일에 발표 하기 위한 트러블 슈팅 작성 할 부분과 에러핸들링 작업을 조금 더 진행을 해야 할 것 같다.