리액트로 Daum 지도에 Marker 생성할 때 오류[CORS] 가 발생합니다. (TypeError: a.wf is not a function)

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.

componentWillReceiveProps(props) {
    this.Temp(props);
}

Temp = (props) => {
    const Plots = props.Plots;

    for (let i = 0; i < Plots.length; i++) {
        let marketPosition = new daum.maps.LatLng(Plots[i][1], Plots[ㅑ][2]);
        let marker = new daum.maps.Marker({
            position: marketPosition
        });
    marker.setMap(map);
    }
}

props.Plots 는 아래와 같습니다. (확실하다고 봅니ㅏㄷ.)

[["ASDF", 36.2683, 127.6358], ["SDFA", 36.2555, 127.6228]]

보시다시피 marketPosition으로 사용하는 Plots[i][1] 과 Plots[i][2] 는 위도, 경도 값입니다.

하려는 일은 Plots로 넘어온 좌표들을 Global로 선언된 map에다가 marking 하는 것입니다.

문제는 market.setMap(map) 이 실행되었을 때인데, a.wf is not a function 라는 괴상한 오류가 발생합니다.

아래는 실제 오류 코드입니다.

Uncaught TypeError: a.wf is not a function
at m.$.A (kakao.js:116)
at Map._this.Temp (Map.js:51)
at Map.componentWillReceiveProps (Map.js:35)
at callComponentWillReceiveProps (react-dom.development.js:11527)
at updateClassInstance (react-dom.development.js:11719)
at updateClassComponent (react-dom.development.js:13153)
at beginWork (react-dom.development.js:13824)
at performUnitOfWork (react-dom.development.js:15863)
at workLoop (react-dom.development.js:15902)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15310)
at renderRoot (react-dom.development.js:15962)
at performWorkOnRoot (react-dom.development.js:16560)
at performWork (react-dom.development.js:16482)
at performSyncWork (react-dom.development.js:16454)
at interactiveUpdates$1 (react-dom.development.js:16719)
at interactiveUpdates (react-dom.development.js:2150)
at dispatchInteractiveEvent (react-dom.development.js:4532)
$.A @ kakao.js:116

Fetch API cannot load http://t1.daumcdn.net/mapjsapi/js/main/4.0.7/kakao.js. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://react-app2le.c9users.io:8080' is therefore not allowed access. 
If an opaque response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled.

검색을 해봤지만 문제점 파악 & 해결법을 찾는 것이 불가능 해서 글 올려봅니다.

CORS 관련해서 검색해봤지만 얻을 수 있는 것은 없네요.

지도가 온전히 뜨는 것을 보아 api 호출은 제대로 된 듯 합니다…

#2

자문자답합니다.

이부분이 중요했네요.

Global로 선언된 map

constructor 등에서 init한다고 선언된 객체 map과, Temp함수에서 사용되는 변수 map과는 다르더군요. (상단에 /global map/ 표기 되어있었습니다.)

init된 객체 map은 진짜 map Object 였고, Temp함수에서의 map은 id가 map인 Div였습니다.

삽질 30분만에 답을 찾아버렸네요. 읽어주셔서 감사합니ㅏㄷ.

1개의 좋아요