Project/스타게이트4 Web Worker로 백그라운드에서 타이머 작동시키기 0.TL;DR 기존의 타이머 수정방안 3가지 모두 서버 리소스와 UX측면에서 약간의 손해를 감수해야 했기에 아쉬웠음 JavaScript의 비동기 처리 브라우저의 멀티 스레드 동작, 그리고 백그라운드 스레드에서 동작하는 Web Worker 학습 이후 Web Worker를 사용해서 background에서 타이머가 동작하도록 해 문제 해결 1. Why? 스타게이트에서 타이머를 동작시키는 과정에서, 백그라운드로 탭이 넘어갈 시 1000ms에 한 번 동작해야 할 타이머가 60000ms에 한 번 동작하게 되는 문제점이 있었다. 이를 해결하기 위해 Page Visibility API로 타이머가 정상적인 값을 보내주도록 처리했었다. setInterval과 Page Visibility API로 정확한 대기시간 알려주기 .. 2024. 3. 19. Firefox에서의 setInterval 문제 해결 0.TL;DR타이머를 setinterval을 사용해 구현V8엔진을 사용하는 크롬/엣지 등에서는 문제가 없지만 Firefox에서는 오차 누적 이슈 발견userAgent를 사용해 접속환경에 따라 경고문을 출력하도록 함또한 Firefox라면 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현1. Why?에서는 setInterval 문제가 다 해결된줄 알았다. 그런데 "크롬에서는 setInterval 보정이 들어가지만, firefox에서는 보정이 들어가지 않는다"는 글을 보게 되었다.브라우저별로 실행 엔진이 다르니까 충분히 가능한 이야기인데 어째서 고려를 안했을까...🥲 혹시나 해서 chrome과 같은 V8 엔진을 사용하는 edge와 brave 브라우저에서도 실행해봤는데, 얘네는 보정이 들어.. 2024. 2. 7. setInterval과 Page Visibility API로 정확한 대기시간 알려주기 0.TL;DR문제팬사인회까지 남은 시간을 보여줘야 했기에 setInterval을 사용해 1000ms마다 1초가 줄어들도록 구현하였으나, 탭 비활성화로 인해 1초당 최대 60000ms까지 오차가 발생비대면 팬사인회는 연예인 1명 당 60~120초로 진행되기에, 만약 오차가 누적되어 30초 정도가 지연된다면 사용자는 불쾌한 경험을 하게 될 것고려한 해결 방안1초마다 서버에서 시간을 가져오기정확한 시간을 출력할 수 있지만, 많은 유저가 접속할 경우 서버에 부담탭이 활성화 될 때, 서버에서 시간을 가져오기서버의 리소스를 1번보다 적게 사용하지만, 변경 이전 시간이 잠깐 보여 사용자 경험에 악영향가짜 audio로 강제로 탭의 비활성화 막기클라이언트 리소스 사용 + 모바일 환경이라면 오디오 점유 이슈 발생 가능성결.. 2024. 1. 25. Atomic Design Pattern 도전기 이번 포스팅은 SSAFY 2학기 공통 프로젝트에서 Atomic Design Pattern에 도전하다가 겪은 문제점과 그 결론이다. 참조한 글은 아래와 같다.더보기https://velog.io/@teo/Atomic-Design-Pattern Atomic Design Pattern의 Best Practice 여정기좋은 폴더 구조란 무엇일까요? 가끔씩 이 파일을 어디다 두면 좋지? 라는 생각이 들때가 있습니다. 하지만 막상 아무데나 두어도 어차피 폴더로 찾아가지 않고 파일명을 검색해서 찾아가기에 대velog.iohttps://velog.io/@ubermensch0608/React-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0-%EC%84%A4%EA%B3%84%EC%97%90-%EB%8C%.. 2023. 7. 31. 이전 1 다음
