SMS처리 도우미
제목
  [RE] Node.Js로 네이버 약국 지도 만들기 #2 (express & axios 모듈, 비동기 문제 해결) 영상 에러 질문 (From. 소스놀이터)

소스 상에는 문제가 없어 보입니다.

(소스 복사하여 제컴퓨터로 테스트하니 잘 됩니다)

맨 처음 localhost 들어갔을 때는... 지도가 제대로 떴나요?
(그리고 console.log로 찍은 결과 데이터가 있던데.. 이것도 제대로 나왔나요?)


새로고침할 때... index.js 터미널 창이 닫혔고... 그래서 index.html에서 해당 파일을 찾지 못한 에러가 뜬 거 같습니다.

문제는 "node index.js" 터미널 창이 닫힌 것인데... 

어쩌면 data.go.kr의 일시적 문제일 수도 있습니다. (공공데이터포털이 간헐적으로 제역할을 하지 못할 수 있음)

혹은 nodejs 문제를 생각해 볼 수 있는데... 해당 컴퓨터로 디버깅 없이는 정확한 원인을 짚기는 힘드네요.

그리고 비쥬얼스튜디오코드 터미널에서 "node index.js"실행하셨을 텐데...

혹시 모르니 vscode 터미널 말고 명령프롬프트(cmd)창에서 "node index.js"실행하여.. 진행해 보세요.

 

 

[Node.Js로 네이버 약국 지도 만들기 #2 (express & axios 모듈, 비동기 문제 해결) 영상 에러 질문의 답글] ----------------------------------------------------------------

Node.Js로 네이버 약국 지도 만들기 #2 (express & axios 모듈, 비동기 문제 해결) 영상 기준 42분45초경 로컬호스트에 들어가 새로고침을 하면 비주얼스튜디오코드에 터미널이 갑자기 혼자 꺼집니다. f12를 눌러보면 처음엔 오류가 없지만 새로고침이 완료하는 순간 터미널에서 node index.js 가 꺼지면서 Failed to load resource: net::ERR_CONNECTION_REFUSED 는 왼쪽에 뜨고 오른쪽에는 /pharmach_list?Q0=%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C&Q1=%EA%B0%95%EB%82%A8%EA%B5%AC&QT=&QN=&ORD=&pageNO=1&numOfRows=1000&_=1669988702241:1라는것만 뜨네요. 혹시 이유를 아시는지 여쭈어 봅니다. 또한 터미널에서 종료됨과 동시에 C:\nodejs_pharmacy\index.js:38 res.json(response.data.response.body); ^ TypeError: Cannot read properties of undefined (reading 'body') at C:\nodejs_pharmacy\index.js:38:41 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 라는 메시지가 뜹니다.

댓글에에도 저와 비슷한 분의 답변을 보고 고쳐보았는데도 똑같은 결과가 뜹니다 혹시 필요하실지 몰라 코드도 복사해서 보내겠습니다.

node.js가 앞부분이고 <html>로 시작하는 부분부터가 index.html 입니다.

 

let express = require("express");
let axios = require("axios");
 
let app = express();
let port = process.env.PORT || 80;
 
app.use(express.static("public_html"));
app.listen(port, function(){
    console.log("HTML 서버 시작됨");
});
 
// https://apis.data.go.kr/B552657/ErmctInsttInfoInqireService/getParmacyListInfoInqire?serviceKey=yuuAIagVrMk4nnZy2%2Fy47WSlSR6qihjxhcjfgbeNq5%2BeNCpfO%2FvoIwRuplGaBHclEUKpYaAmKL6aoxBKPfZqSw%3D%3D&Q0=%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C&Q1=%EA%B0%95%EB%82%A8%EA%B5%AC&QT=1&QN=%EC%82%BC%EC%84%B1%EC%95%BD%EA%B5%AD&ORD=NAME&pageNo=1&numOfRows=10
 
app.get("/pharmach_list", (req, res) => {
    let api = async() => {
        let response = null;
        try {            
            response = await axios.get("http://apis.data.go.kr/B552657/ErmctInsttInfoInqireService/getParmacyListInfoInqire", {
                params: {
                    "serviceKey": "yuuAIagVrMk4nnZy2/y47WSlSR6qihjxhcjfgbeNq5+eNCpfO/voIwRuplGaBHclEUKpYaAmKL6aoxBKPfZqSw==",
                    "Q0": req.query.Q0,
                    "Q1": req.query.Q1,                
                    "QT": req.query.QT,                
                    "QN": req.query.QN,                
                    "ORD": req.query.ORD,                
                    "pageNo": req.query.pageNo,                
                    "numOfRows": req.query.numOfRows                
                }
            })
        }
        catch(e) {
            console.log(e);
        }
        return response;            
    }
    api().then((response) => {
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.json(response.data.response.body);
    });
});
 
 
<html>
    <head>
        <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=7s9en5sdqp&submodules=geocoder"></script>
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
            약국 지도
        </div>
        <div id ="map" style="width: 100%; height: 80%;">
       
        </div>
    </body>
    <script>
        $(document).ready(async function(){
            let XY = await getLocation();
            //alert("위도" + XY.lat);
            //alert("경도" + XY.lng);
 
            //지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
            var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일
            //옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
            var map = new naver.maps.Map(mapDiv);
 
            $.ajax({
                url: "/pharmach_list",
                type: "GET",
                cache: false,
                dataType: "json",
                data: {"Q0": "서울특별시", "Q1": "강남구", "QT": "", "QN": "", "ORD": "", "pageNO": "1", "numOfRows": "1000"},
                success: function(data) {
                    console.log(data);
                },
                error: function(requset, status, error){
 
                }
            });
        });
 
        async function getLocation() {
            let XY = new Object();
            if(navigator.geolocation){
 
                let promise = new Promise((resolve, rejected) => {
                    navigator.geolocation.getCurrentPosition((position) => {
                        resolve(position);
                    });
                });
 
                let position = await promise;
                //position.coords.latitude 위도
                //position.coords.longitude 경도
                XY.lat = position.coords.latitude
                XY.lng = position.coords.longitude
            }
            return XY;
        }
    </script>
</html>

----------------------------------------------------------------
트위터, 페이스북 공유 부탁드립니다~!
트위터   페이스북


  • 패스워드
           
X