밝을희 클태

pongGame에서 requestAnimationFrame() 를 사용해서 탁구채를 움직이는데 문제가 있다 사용자의 모니터 환경에 따라 탁구채의 움직이는 속도가 달라진다. https://gaebarsaebal.tistory.com/58 탁구채 속도가 환경에 따라 다르게 움직임(requestAnimationFrame) 지금 Pong 게임의 탁구채 움직임을 구현 중인데 내 노트북에서 게임을 할 때랑 팀원의 노트북으로 게임을 할 때 탁구채의 움직이는 속도가 달랐다. 처음에는 setInterval() 로 60 fps으로 구현을 하다 gaebarsaebal.tistory.com 그래서 다양한 모니터 환경에서 공평함을 유지하기 위해 60FPS로 고정을 시켜줄려고 한다. 이렇게 되면 requestAnimationFr..

문제- 게임 플레이시 프레임 드랍이 일어남원인- setInterval() 사용 : 기존에 아래와 같이 60FPS설정을 setInterval()로 구현을 했다. 이 방법은 JavaScript 이벤트 루프 내에서 비동기적으로 실행되며 정확한 타이머주기를 보장하지 않는다. 지연이 누적되다 보면 프레임 드랍이 생긴다. setInterval(() => { if (isMovingUp) { coor = Math.max( parseInt(style.top) - 30, this.myPingpongStick.offsetHeight / 2, ); this.update(coor); } else if (isMovingDown) { coor = Math.m..

인증되지 않은 유저가 URL을 통해 직접 페이지로 접근하는 걸 막아보자. 아이디어 : 로그인된 유저는 메모리에 accessToekn 을 가지고 있다. url 로 직접적으로 접근을 할 때 메모리에 accessToken 이 없다면 loginPage 로 리다이렉션 시켜준다. 어디서 할까 고민을 했는데 모든 페이지에서 공통적으로 제일 처음 connetionWebScoket 의 연결 상태를 확인하는데 이때 accessToken 이 사용되므로 이 과정에서 정상적인 유저인지 판단을 할 것이다. 구현 : 기존의 accessToken 을 재발급받는 함수가 있는데 기존의 로직에서 token 재발급에 실패를 하면 loginPage 로 리다이렉션을 시켜준다. export const refreshAccessToken = asy..

프로젝트를 진행하면서 하나의 WebSocket으로 여러 컴포넌트에서 각기 다른 onmessage 이벤트를 등록해야 하는 일이 생겼다. 그래서 어떻게 로직을 작성할지 고민하다가 싱글톤 패턴의 중앙 집중식 WebSocket을 구현하기로 했다. 일단 위처럼 구현을 하게 되면 장점은 트래픽과 서버 부하를 줄일 수 있다 구현이 단순해진다 단점은 하나의 웹소켓에 의존을 하면 해당 WebSocket에 문제가 생기면 프로젝트 전체에 문제가 생길 수 있다 사용자가 많거나 데이터가 많아지면 병목 현상이 생길 수 있다 등이 있다. 그런데 일단 우리는 WebSocket으로 큰 데이터를 다룰 일이 없을 거 같아서 구현이 단순한 싱글톤 패턴의 WebSocket 방식을 택했다. 일단 BaseWebSocket Class를 만들어준다..