Blazor에서 카카오 맵을 쓰려면

* 이 글까지 찾아온 당신은 상당히 열 받아있을 것 같다.
 
정신건강을 위해서 Blazor에서 카카오맵을 안쓰는 것이 좋겠지만, 어쩔 수 없이 쓰려면 본 글을 참고하면 되겠다.
 
먼저 카카오 디벨로퍼 
https://developers.kakao.com/

Kakao Developers

여기 들어가서 개발자 등록을 하고 앱 등록을 한다.
그리고 나서 앱 키를 발급받으면 된다. 
 
1. 진입점 중 하나인 App.razor에서 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer,drawing&autoload=false"></script>

를 추가한다.
 
2. 당연히 자바스크립트를 쓰는 거기 때문에 우리는 IJSRuntime을 가지고 자바스크립트 함수를 호출하는 것이다.
모든 과정은 첫 렌더링 이후에 일어나야 한다.
 
- 따로 wwwroot에 자바스크립트 정적 파일을 만들어도 되고
- 아니면 귀찮다면 그냥 App.razor 바디에다가

<script>
    function initializeKakaoMap() {
        kakao.maps.load(function () {
            console.log('Kakao Maps loaded');
            let container = document.getElementById('map'); // 지도를 담을 영역의 DOM 레퍼런스
            if (container) { // 컨테이너가 제대로 로드되었는지 확인
                let options = { // 지도를 생성할 때 필요한 기본 옵션
                    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
                    level: 3 // 지도의 레벨(확대, 축소 정도)
                };

                var map = new kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
            } else {
                console.error('Map container not found');
            }
        });
    }
</script>

넣어준다.
 
3. 해당 카카오맵을 사용할 페이지에 넣어주는데 중요한 것은
첫 렌더링 이후에 해당 함수를 실행해야한다는 것이다. 

@page "/Kakaomaptest"
@inject IJSRuntime JSRuntime

<PageTitle>kakao map test</PageTitle>

<div id="map" style="width:800px;height:800px;"></div>

@code {
    // 첫 렌더 이후에 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initializeKakaoMap");
        }
    }
}

 
 
 
* 결론 : 프론트는 js 쓰는게 정신건강에 이로울지도... 커뮤니티가 너무 없다.