17. Vue3 + Node.js 코로나 감염 데이터 가져오기

 공공데이터에서 코로나 감염 데이터를 가져와 로컬 데이터베이스에 저장하였다.

그럼 다음은 우리가 해야할 일은 Vue3 + Node.js 연동이다.

 

 

Vue3 + Nodejs 데이터 요청

 

Vue3에서 요청하는 데이터 셋은 하나가 아니고, 두 가지 데이터를 가져와야 한다.

 

1.  최근(어제) 코로나 감염 전국 시도별 데이터

2. 어제부터 10일전 트랜드를 보여줄 수 있는 데이터

 

따라서 Vue3 페이지가 시작될때 두번의 요청이 Nodejs로 전달되어야 한다.

 

두개의 데이터 셋은 아래의 그림과 같이 사용된다. 

 

Vue3 에서 요청 후 응답 받은 데이터는 아래와 같다.

 

 

이제 요청한 데이터가 제대로 전달되었다는 것을 확인하였다.

 

Nodejs에 작성한 코드는 다음과 같다.

router.get('/covidarea/:id', (req,res)=>{
    let mydb = new Mydb(pool);

    let aid = req.params.id;

    let d = new Date();
    var tmpDay = d.getDate();
    d.setDate(tmpDay - 10);

    let year =  d.getFullYear();
    let month = ('0' + ( d.getMonth() +1)).slice(-2);
    let date = ('0'+  d.getDate()).slice(-2);

    strDate = year + month + date;

    const strsql = "select stdDay, defcnt, deathCnt from covid_reals where stdDay >= '" + strDate + "' and gubun ='" + aid + "'";
    
    console.log(strsql);
    mydb.execute(conn =>{
        conn.query(strsql, (err, ret)=>{
            console.log(ret);
            res.json(ret);
        });
    })
});

router.get('/covidinfo', (req,res)=>{
    let mydb = new Mydb(pool);

    let today = new Date();

    let year = today.getFullYear();
    let month = ('0' + (today.getMonth() +1)).slice(-2);
    let date = ('0'+ today.getDate()).slice(-2);

    strDate = year + month + date;

    const strsql = "select * from covid_reals where stdDay = (select date_format(curtime, '%Y%m%d') from getstate where tbname = 'covid_reals') and gubun != '검역' ;" ;
    
    console.log(strsql);
    mydb.execute(conn =>{
        conn.query(strsql, (err, ret)=>{
            console.log(ret);
            res.json(ret);
        });
    })
});

 

이 코드 /covidinfo 에서

 

stdDay = (select date_format(curtime, '%Y%m%d') from getstate where tbname = 'covid_reals') 

 

쿼리를 하였다.

 

이유는 수집된 데이터 정보를 관리하는 테이블을 두었기 때문에

getstate 테이블의 최종 날짜를 가져오기 위함이다.

 

이 테이블은 데이터 수집 상태를 확인하기 위해 사용하였고, 꼭 이래야만 하는 것은 아니다.

그 covid_reals 테이블의 마지막 날짜를 가져와도 무방할 것이다.

 

언제나 말했듯 최적화된 코드는 아니기에 필요한 사람은 알아서 고쳐쓰면 된다.

 

다음은 Vue3에서의 데이터 처리에 관하여 살펴보기로 한다.