8월 10일 TIL - 노드 사용기 ,,

글 날라가서.. 아 다시적음

 

위와 같은 gpx 파일을 xml로 변환해서 lat과 lon 값을 받아와 지도에 뿌려주는 기능 구현 중 맞닥뜨린 난관 .. , 

gpx 파서 관련 라이브러리를 여러개 사용했지만 오래된 라이브러리라 타입스크립트를 지원안해주는 것도 있었고 타입스크립트를 지원해주는 라이브러리를 사용해도 해당 api가 서버 헤더 요청을 막아서..? 였나 접근 자체가 안되고 cors 에러가 계속 났다.  

 

결국 서버에서 서버로 요청을 보내야 하는 방향으로 결론이 나서 결국 노드 서버를 사용하기로!

 

1. 노드 서버를 만들고 아래 명령어 터미널에 입력

npm init -y

 

 

2. detailMap.tsx에서 위 노드 서버에게 gpx 파일을 axios.get으로 날린다

const DetailMap = () => {
  const GPX_URL = `https://www.durunubi.kr/editImgUp.do?filePath=/data/koreamobility/file/2021/09/46e0055b28ac46ea9420106c8939fa61.gpx`;
  console.log(GPX_URL);

  useEffect(() => {
    const fetchGPX = async () => {
      const res = await axios.get(`https://florentine-rustic-open.glitch.me/gpx?data=${GPX_URL}`);
      console.log(res);
    };
    fetchGPX();
  }, []);

 

 

 

 

const express = require("express");
const fetch = require("node-fetch"); 
const app = express();
const cors = require("cors");
const xml2js = require("xml2js");

app.use(cors());

// req 요청에 관한 정보를 담음
// res 응답에 관한 정보를 담음
app.get("/gpx", (req, res) => {
  const GPX_URL = req.query.data;
  console.log(req);
  // req.body
  async function get(url) {
    try {
      const fetchUrl = await fetch(url);
      const file = await fetchUrl.text();
      const parser = new xml2js.Parser();

      parser.parseString(file, (err, result) => {
        if (err) {
          console.log(err);
          return;
        }

        const coordinates = [];
        const trkpts = result.gpx.trk[0].trkseg[0].trkpt;
        for (const trkpt of trkpts) {
          const lat = parseFloat(trkpt.$.lat);
          const lon = parseFloat(trkpt.$.lon);

          coordinates.push({ lat, lon });
        }
        res.send(coordinates);
      });
    } catch (error) {
      console.log(error);
      res.status(500).send(error.message);
    }
  }

  get(GPX_URL);
});

const port = 5000;
app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

블로그 뒤지고 도움받아가면서 작성된.. 

노드는 import 대신 require로 작성한대요 

뭐가 되게 많았는데 진짜 너무 이슈가 많아서 뒤죽박죽이었다 ㅎ ㅜ