addressSearch 함수를 결과를 담은 이후에 맵 렌더링 방법에 관해 문의드립니다

지도/로컬 API
1

안녕하세요! 현재 스벨트에 카카오 맵 api 를 적용해서 작업중에 있습니다.
저는 현재 geocoder.addressSearch() 함수를 통해 통해 좌표값을 받아서 데이터를 가공한 후, 전역상태변수에 값을 할당하고 있습니다. 전역상태에 담기 위해서 예전에 작성해주신 counter 변수를 활용해 비동기가 끝나게 되면 값을 할당하고 있는데요, 여기서 문제가
값이 할당이 되기 전에 전역상태변수를 불러오다보니 지도에 마커가 그려지지가 않습니다.
그래서 임시방편으로 setTimeout 을 걸어놓았는데요, 혹시 이 문제를 해결할 좋은 방법이 있을까요?

기존에 잘 동작하고 있던 코드가 있긴 하지만 forEach 를 통해 좌표를 받아오고 그 안에서 또 for 문을 돌려서 마커를 그려주는 작업을 하고 있어서 이 부분을 분리하고자 위와 같이 수정을 했습니다.

언어적인 특성이 더 강한 질문이긴 하지만 방법이 안떠올라 질문드립니다 ㅜ

onMount(async () => {
    try {
      const { kakao } = window;

      await fetchCompanyInfo();

      setTimeout(() => {
        kakao.maps.load(function () {
          const container = document.getElementById("map");
          const options = {
            // 중심좌표 - 고양시청
            center: new window.kakao.maps.LatLng(37.6583599, 126.8320201),
            level: 8,
          };

          const map = new kakao.maps.Map(container, options);

          const imageSrc =
            "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

          for (let i = 0; i <= $companyInfos.length; i++) {
            const imageSize = new kakao.maps.Size(24, 35);
            const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
            const marker = new kakao.maps.Marker({
              map: map,
              position: $companyInfos[i]?.coords,
              title: $companyInfos[i]?.name,
              image: markerImage,
            });

            (function (marker) {
              kakao.maps.event.addListener(marker, "click", function () {
                console.log(marker);
                const selectedMarker = $companyInfos.map((company) => {
                  if (company.name === marker.Gb) {
                    return {
                      ...company,
                      isSelected: true,
                    };
                  } else {
                    return {
                      ...company,
                      isSelected: false,
                    };
                  }
                });
                companyInfos.set(selectedMarker);
                isShowSideMenu.set(true);
              });
            })(marker);
          }
        });
      }, 400);
    } catch (error) {
      console.log(error);
    }
  });

export const fetchCompanyInfo = () => {
  let formattedData: SelectedCompany[];
  const { kakao } = window;
  kakao.maps.load(async function () {
    try {
      let resultData = [];
      let counter: number = 0;

      const fetchData: CompanyInfos[] = await fetch(
        "http://localhost:3100/json"
      ).then((res) => res.json());

      formattedData = fetchData.map((data) => {
        return {
          ...data,
          isSelected: false,
        };
      });
      const geocoder = new kakao.maps.services.Geocoder();
      console.log(geocoder);

      formattedData.forEach((data, i) => {
        geocoder.addressSearch(data.address, function (result, status) {
          const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
          resultData.push({
            ...data,
            coords: coords,
          });

          counter++;
          if (counter === formattedData.length) {
            const sortedData = resultData.sort(function (a, b) {
              return a.id - b.id;
            });
            companyInfos.set(sortedData);
          }
        });
      });
    } catch (error) {
      console.log(error);
    }
  });
};
2

아래 코드 참고해서 적용해주세요.
해당 코드는 참고로만 봐주시고 로직에 맞게 코드를 수정해주세요.

onMount(async () => {
    window.kakao.maps.load(async function () {
        //비동기 주소검색 호출, 반복문 끝나면 true를 리턴합니다.
        const status = await fetchCompanyInfo(data);

        //완료가 되었으면 지도 생성
        if(status) {
            //지도 생성
        }
    });
}

export const fetchCompanyInfo = async () => {
    try {
        //fetchData, formattedData 설정 후 아래 링크 참고해서
        //for~of 반복문에서 promise로 감싼 함수 호출 및 응답받은 데이터로 필요한 로직 추가해주세요.
        //반복문이 끝나면 true값을 반환
        return true;
    } catch(e) {
        console.log(error);
    }
});

https://devtalk.kakao.com/t/topic/115312/2?u=lea.ju

1개의 좋아요
3

답변 감사드립니다! 덕분에 잘 해결됐습니다! 오늘도 좋은 하루 보내세요!

1개의 좋아요