네이비즘 티켓팅 실패이유?

뮤지컬, 콘서트 등등 티켓팅을 할때마다 찾게되는 사이트가 바로 "네이비즘" 사이트일 것이다.

해당 사이트를 이용하면서 어떻게 해당 사이트의 서버시간을 가져오고, 어느 정도의 오차를 가지고 있을까? 라는 생각을 한번쯤 해보게 되었다.

 

0. 시간정보 가져오기

생각해보면 서버의 시간정보를 가져오는 건 쉬운 작업이다.

단순히 시간정보를 얻고자하는 사이트에 아무요청이나 주게 되면 해당 사이트는 그에따른 응답을 주는데 그 응답안에 중즉, response Headers 안에 Date라는 정보와 함께 응답을 준다.

 

fetch('https://time.navyism.com').then(r => {console.log(r.headers.get('Date'));});

실제 콘솔에서도 위와 같은 방식으로 Date에 대한 정보를 리턴받을 수 있다.

 

네이비즘 코드

네이비즘 사이트의 코드를 살펴보면 이와같이 해당 사이트(예. 인터파크) 사이트의 서버시간을 unix time으로 현재시간이랑 차이를 계산해 주는 보정작업을 거쳐서 보여주고 있다.

하지만 이렇게 가져오는 시간정보에는 오차가 발생할 수 밖에 없다. 해당 시간정보가 왜 오차가 발생할 수 밖에 없는지 간단하게 정리해 보겠다.

 

 

1. 페이지 다운로드 시간

웹페이지를 띄우려면 결국 해당 서버에 웹페이지를 띄워달라는 요청을 하게 될 것이고, 해당 서버는 그에 맞는 응답을 주게될 것이다. 하지만 응답을 받는데 까지 걸리는데 시간이 걸린다는 것이 오차의 원인이 된다.

html페이지 다운로드 시간

해당 페이지를 다운받은 속도를 찾아보면 어느정도 시간이 소요된다는 것을 알 수 있다. 사실 32ms는 매우 빠른 속도이지만, 사이트에서 보여주는 시계를 작동시키기 위해서는 결국 관련 자바스크립트를 다운받아야 할 것이다. 

이러한 지연을 줄일 수 있는 방법은 자바스크립트 파일을 따로 만들어서 첨부하는 것이 아닌 스크립트 태그로 html 파일 안에다가  직접 집어넣으면 지연시간을 줄일 수 있을 것이다. 아니면 ajax 요청으로 시간만 받아오는 방법도 있다.

 

2. ms 단위 확인불가

응답으로 주는 response Headers 정보의 시간정보에는 ms 단위까지는 표시되어 있지 않다. 단순 문자타입이기때문에 데이터 변환을 하게 되어도 결국 0으로 표기가 된다. 실제 네이비즘 내부 코드를 보아도 결국 ms단위는 없다. 결국 해당사이트는 0~0.999초 오차가 있다.

 

3. JS타이머 문제

웹페이지 안에 타이머를 넣고 싶을때 setTimeOut() , setInterval() 코드들을 이용할 수 있다.

네이비즘사이트도 setTimeOut()을 이용하여 1초마다 혹은 0.1초마다 변경하고 있다. 하지만 자바스크립트 타이머코드에는 오류가 많다는 문제점이 있다.

1000초마다 타이머를 계산할 수 있도록 코드를 짜보아도 실제로는 오차가 발생하고 있다. 자바스크립트 안에있는 코드는 메인 콜스택이 비워져있을때마다 콜을 하기때문에 오차가 발생한다고 한다.

 

4. 탭전환 문제

네이비즘 사이트를 최소화하거나 다른탭으로 이동하게되면 네이비즘의 타이머가 매우 느려지게 된다. CPU 사용량을 절약하기 위해 동작하기 때문이다.

 

5. 요청 전송속도

사이트에 요청을 하게되면, 해당 요청에 대한 응답시간은 물론, 티켓팅사이트인 만큼 많은 인원 즉, 많은 요청이 몰리게 되면서 해당 사이트의 서버는 이를 순차적으로 처리하게 될 것이다. 이에 따른 오차도 발생하게 될 것이다.

 

 

결론은 이러한 오차시간을 고려하여 티켓팅을 도전할때 잘 고려하도록 하자^^!

 

 

 

출처

https://www.youtube.com/watch?v=oWSNOrBbOIU