javascript에서 Timer, Countdown 서버 시간 동기화

What?

javascript 에서 날짜/시간을 계산할 때 사용하는 Date()는 Client Local Time 이기 때문에
디바이스, 네트워크 등 환경에 따라 차이가 있다.
Timer, Count Down 서비스 구현 시 서버 시간 기준으로 구현하려면 서버 시간을 동기화 해야하는데
1초마다 서버 시간을 동기화하는 것은 비효율적이다.

Solution

최초에 서버 시간을 불러와서 Local Time 과 차이를 계산해두고,
1초마다 시간을 계산할 때 Local Time에 차이값을 추가하여 계산해주면 서버 시간과 차이를 보정할 수 있다.

• 서버 시간을 받아오는 네트워크 시간에 차이가 있기 때문에 1~2초 오차가 날 수 있다.

const serverTime = [서버에서 가져온 시간];
const gabTime = new Date().getTime() - serverTime.getTime();        //millisconds로 계산

setInterval(function() {
    let localTime = new Date(new Date.getTime() - gabTime);
    /* Timer Logic */
    }, 1000);

Reference

https://stackoverflow.com/questions/5357719/how-to-sync-a-javascript-countdown-with-server-time