질문드립니다 ㅠㅠ

GET http://dapi.kakao.com/v2/maps/sdk.js?appkey=3d10a5fa204e2ceb054436e1ce4e1c2a&libraries=services net::ERR_ABORTED 401 (Unauthorized) 오류가 뜹니다 ㅠㅠ 앱키 플랫폼에 로컬호스트 URL을 넣어봤는데도 정상적으로 카카오API를 불러오질 못하네요 ㅠㅠ 뭐가 문제일까요... 도와주시면 감사하겠습니다!!
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>myfirstmap</title>
    <link rel="stylesheet" href="stylesheets/style.css"/>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nk3nty8fz7"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3d10a5fa204e2ceb054436e1ce4e1c2a&libraries=services"></script>
</head>
<body>
<!--코로나맵 원페이지뷰로 만들기.-->
<div id="navbar">myfirstmap</div>
<div id="infoBox">
    <div id="infoTitle">현재날짜</div>
    <div id="infoContent">2021.05.09</div>
</div>
<div id="search">
    <input id="search_input" placeholder="목적지를 입력해주세요"/>
    <button id="search_button">검색</button>
</div>
<div id="current">현재위치</div>
<div id="map" style="width:100%;height:100vh;"></div>
<script type="text/javascript" src="/data/data.js"></script><script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);

var markerList = [];

var infowindowList = [];

for (var i in data) {
    var target = data[i];
    var latlng = new naver.maps.LatLng(target.lat, target.lng);
    marker = new naver.maps.Marker({
        map : map,
        position : latlng,
        icon : {
            content : "<div class='marker'></div>",
            anchor : new naver.maps.Point(12,12)
        },
    });
/* 자바스크립트에서 작은따옴표 큰따옴표와 비슷한 기능, String값 넣을수있음*/
/* 인포안에 넣을 코드 작성*/
var content = `<div class='infowindow_wrap'>
        <div class='infowindow_title'>${target.title}</div>
        <div class='infowindow_content'>${target.content}</div>
        <div class='infowindow_date'>${target.date}</div>
    </div>`
/* 말풍선 설정 값*/
var infowindow = new naver.maps.InfoWindow({
    content : content, 
    backgroundColor : "#00ff0000",
    borderColor : "#00ff0000",
    anchorSize : new naver.maps.Size(0,0)
})

    markerList.push(marker);
    infowindowList.push(infowindow);
}
/*클릭이벤트 설정, 클릭했을때 getclickhandler함수가 실행되도록*/ 
/*즉 클릭하게되면 i번째 마커가 변수에 담기게됨.*/
/*ClickHandler클릭하면 인포윈도우가 열리고 다른 곳 클릭했을때 닫겨야함..*/
/*ClickMap()함수는 인포박스에서 맵을 클릭했을때 자동으로 닫아주는 함수*/
for (var i = 0, ii = markerList.length; i< ii; i++){
    naver.maps.Event.addListener(map, "click", ClickMap(i));
    naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i));

}

    function ClickMap(i) {
        return function() {
            var infowindow = infowindowList[i];
            infowindow.close()
        }
    }

    function getClickHandler(i) {
        return function() {
            var marker = markerList[i];
            var infowindow = infowindowList[i];
            if (infowindow.getMap()){
                infowindow.close();
            } else {
                infowindow.open(map, marker)
            }
        }
    }

    let currentUse = true;

    $('#current').click(() => {
        if('geolocation' in navigator){
            navigator.geolocation.getCurrentPosition(function(position){
                const lat = position.coords.latitude;
                const lng = position.coords.longitude;
                const latlng = new naver.maps.LatLng(lat,lng);
                if (currentUse) {
                    marker = new naver.maps.Marker({
                    map: map,
                    position: latlng,
                    icon: {
                        content: '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png">',
                        anchor: new naver.maps.Point(11,11),
                    },
                });
                currentUse = false;
                }
                map.setZoom(14, false);
                map.panTo(latlng);
            });
        } else {
            alert("위치정보 사용 불가능");
        }
    });

    let ps = new kakao.maps.services.Places();
    let serach_arr=[]

    $("#search_input").on("keydown", function(e) {
        if(e.keyCode === 13){
            let content = $(this).val();
            ps.keywordSearch(content,placeSearchCB);
        }
    })

$("#search_button").on("click", function(e){
    let content = $("#search_input").val();
    ps.keywordSearch(content, placeSearchCB);
})


    function placeSearchCB(data,status,pagination) {
        if(status === kakao.maps.services.Status.OK){
            let target = data;
            const lat = target.y;
            const lng = target.x;
            const latlng = new naver.maps.LatLng(lat, lng);
            marker = new naver.maps.Marker({
                position: latlng,
                map: map,
            })
            if (search_arr.length ==0){
                search_arr.push(marker)
            } else {
                search_arr.push(marker)
                let pre_marker = search_arr.splice(0,1);
                pre_marker[0].setMap(null);
            }
            map.setZoom(14, false);
            map.panTo(latlng);
        }else{
            alert("검색결과가 없습니다.")
        }
    }

</script>
</body>
</html>
인프런 커뮤니티 질문&답변
