geocoder.coord2Address 콜백 함수에서 전역 변수에 접근할수있는 방법이 궁금합니다

카카오맵 API (지도/로컬)
1
  1. 업무에 사용되는 여러 키값을 가진 자바스크립트 배열들을 하나씩 읽어온후 마커를 뿌려주고 있습니다.
  2. 동시에 좌표값을 이용해 주소를 가져오고 있습니다. 이 주소를 전역변수에 저장하거나, 인포윈도에 그려주려 하는데
  3. 마커와 인포윈도에는 주소외에도 업무 데이터에 따라 마커 이미지, 타이틀과 인포윈도우의 컨텐츠가 모두 다르게 보여져야 합니다.
  4. 게다가 주소값은 비동기 처리후 콜백함수에서 처리되므로 전역변수의 값을 가져오거나 할당이 안되더라구요.
  5. 카카오 api 에서 처리되므로 업무 데이터를 추가 인자로 넘겨줄수도없고…
  6. 인터넷을 찾아가며 프로미스 패턴으로 처리해보려 했지만 geocoder.coord2Address함수에는 프로미스 패턴이 적용되지 않았는지 .then()으로 처리 되지않고
  7. 콜백함수를 넘겨주는 인자부분에 new Promise(functino(a,b)) 이런식으로 넘겨주려니 c is not function 에러가 뜨네요

무슨 방법이 없을까요?

2

고전적인 비동기 패턴 처리 방식은
콜백함수입니다.
카카오 지도 JS API는 Promise를 비동기 함수의 리턴값으로 지원하지 않습니다.

하지만 사용자가 직접 Promise로 wrapping은 가능하죠. 간단합니다.

http://apis.map.kakao.com/web/sample/addr2coord/
이 예제를 Promise를 사용하는 코드로 만들어 보면,

const mapContainer = document.getElementById('map');
const mapOption = {
	center: new kakao.maps.LatLng(33.450701, 126.570667),
	level: 3
};  

const map = new kakao.maps.Map(mapContainer, mapOption); 

const geocoder = new kakao.maps.services.Geocoder();

const createOverlay = result => {
	const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
	const marker = new kakao.maps.Marker({
		map: map,
		position: coords
	});
	const infowindow = new kakao.maps.InfoWindow({
		content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
	});
	infowindow.open(map, marker);
	map.setCenter(coords);
};

const addressSearch = address => {
	return new Promise((resolve, reject) => {
		geocoder.addressSearch(address, function(result, status) {
			if (status === kakao.maps.services.Status.OK) {
				resolve(result);
			} else {
				reject(status);
			}
		});
	});
};

// async-await
(async () => {
	try {
		const result = await addressSearch('제주특별자치도 제주시 첨단로 242');
		createOverlay(result); 
	} catch (e) {
		console.log(e);
	}
})();

// or chaining using then
//addressSearch('제주특별자치도 제주시 첨단로 242')
//	.then(createOverlay)
//	.catch(console.log);
3

그리고…
전역변수는 말그대로 모든 영역에서 접근 가능한 변수일 것인데,
값을 할당하거나 가져오지 못한다는건 말이 안 됩니다.

질문자 분이 처한 상황은
비동기 로직이 여러 개 있고
특정 코드가 비동기 완료 전에 실행되어 전역 변수에 값을 할당하기 전에
전역 변수의 값을 참조하려 하고 있다고 추정할 수 있습니다.

해결책은 이 비동기 로직들이 원하는 순서대로 실행되도록 동기화 하는 것입니다.

콜백을 만들어 비동기 로직이 시작되는 함수에 넘겨서 콜백에서 콜백을 호출하는 방식으로 진행하시면
굳이 Promise를 사용하지 않아도 구현이 가능할거에요.

5

많이 배워갑니다 감사합니다!
다시보니 제가 for문에서 전역변수와 지역변수를 혼용해서 사용하다가 에러가 난거였네요. 죄송합니다.