[프로젝트] 비동기에관한 깨닳음

에러라기보단 단순한 원리에대하여 발견? 

useEffect안에서 아래와 같은 작업을 해줬다.

let a를 찌고 

a= "a"라고했으며

마지막 console.log에 a를 찍으면?

 

useEffect(() => {
    const container = place.current;
    //인포윈도우
    // const infowindow = new window.kakao.maps.InfoWindow({ zindex: 1 });

    let a;
    navigator.geolocation.getCurrentPosition(function (position) {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      a = "a";

      let locPosition = new window.kakao.maps.LatLng(lat, lon);
      let kakaoMap = new window.kakao.maps.Map(container, {
        center: locPosition,
      });

      window.kakao.maps.event.addListener(kakaoMap, "tilesloaded", () => {
        setMapLoaded(true);
      });

      kakaoMap.setCenter(locPosition);
      displayMarker(locPosition);

      //현재위치 설정하는것

      function displayMarker(locPosition: any) {
        // 마커를 생성합니다
        let marker = new window.kakao.maps.Marker({
          map: kakaoMap,
          position: locPosition,
          image: makerImage,
        });
        setMarker(marker);

        searchDetailAddrFromCoords(locPosition, function (result: any, status: any) {
          console.log("결과", result);
          storeaddress(
            result[0].address.region_1depth_name +
              " " +
              result[0].address.region_2depth_name +
              " " +
              result[0].address.region_3depth_name
          );

          let detailAddr = !!result[0].road_address
            ? "<div>도로명주소 : " + result[0].road_address.address_name + "</div>"
            : "";
          detailAddr += "<div>지번 주소 : " + result[0].address.address_name + "</div>";

          let content = '<div class="bAddr" style="width:250px; padding:5px">' + detailAddr + "</div>";

          marker.setPosition(locPosition);
          marker.setMap(kakaoMap);

          infowindow.setContent(content);
          infowindow.open(kakaoMap, marker);
        });

        window.kakao.maps.event.addListener(kakaoMap, "click", function (mouseEvent: any) {
          console.log("마우스이벤트정보", mouseEvent);
          // 클릭한 위도, 경도 정보를 가져옵니다
          searchDetailAddrFromCoords(mouseEvent.latLng, function (result: any, status: any) {
            storeaddress(
              result[0].address.region_1depth_name +
                " " +
                result[0].address.region_2depth_name +
                " " +
                result[0].address.region_3depth_name
            );
            let detailAddr = !!result[0].road_address
              ? "<div>도로명주소 : " + result[0].road_address.address_name + "</div>"
              : "";
            detailAddr += "<div>지번 주소 : " + result[0].address.address_name + "</div>";

            let content = '<div class="bAddr" style="width:250px; padding:5px">' + detailAddr + "</div>";

            map?.setCenter(mouseEvent.latLng);
            marker.setPosition(mouseEvent.latLng);
            marker.setMap(kakaoMap);

            console.log("위도", mouseEvent.latLng?.getLat());
            console.log("경도", mouseEvent.latLng?.getLng());

            latitude(mouseEvent.latLng?.getLat());
            longtitude(mouseEvent.latLng?.getLng());

            infowindow.setContent(content);
            infowindow.open(kakaoMap, marker);
          });
        });
      }

      console.log("위도2", lat, "type", typeof lat);
      console.log("경도2", lon);
      setMap(kakaoMap);
      latitude(lat);
      longtitude(lon);
    });

    console.log("A는?", a); // "a"

    // 지도 중심좌표를 접속위치로 변경합니다
  }, []);

 

 

나는  a가 찍힐거라고 생각했으나.. UNDEFINED가 찍힌다

이것이 바로 비동기..ㅠㅠ...

이러한 이유때문에 현재 위치를 불러오는 함수내에서 모든걸 해결해야했구나...

 

이번프로젝트는 비동기에대해서 참 많이배운다.