기술적 챌린지 추가
웹소켓을 통해 접속 정보를 서버의 메모리 상에서 직접 관리하는 경우, 특히 연결이 끊어진 클라이언트의 정보를 적시에 제거하지 않을 경우 메모리 누수(Memory Leak) 문제가 발생할 가능성이 있습니다. 이는 시스템의 안정성과 성능에 부정적인 영향을 미칠 수 있습니다. 따라서, 클라이언트 연결이 종료될 때(handleDisconnect 이벤트 호출 시) 해당 클라이언트와 관련된 모든 정보를 메모리에서 즉시 삭제하여 메모리 누수를 방지하는 로직을 구현하는 것이 중요합니다. 이러한 접근 방식은 메모리 관리 최적화와 시스템의 안정성을 보장하는 데 핵심적인 역할을 합니다.
async handleDisconnect(client: ExtendedSocket) {
if (client.timer) {
clearTimeout(client.timer);
}
const clientId = this.users.get(client.userId);
if (clientId === client.id) {
this.users.delete(client.userId);
}
console.log('Client disconnected: ' + client.id);
}
this.users.delete(client.userId); 부분은 JavaScript의 Map 객체에서 특정 키(client.userId)와 그에 해당하는 값을 삭제하여, 해당 클라이언트와 관련된 정보를 메모리에서 제거하는 과정입니다. Map 객체에서 키와 값을 삭제하는 delete 메서드는 해당 키가 존재하면 그 키와 값을 삭제하고 true를 반환하며, 키가 존재하지 않으면 아무 것도 변경하지 않고 false를 반환합니다. 이 과정을 통해 메모리에서 클라이언트 정보를 해제하여 메모리 누수를 방지할 수 있습니다.
그러나 단순히 Map에서 삭제하는 것만으로는 자동으로 메모리가 해제되는 것은 아니며, JavaScript 엔진의 가비지 컬렉션(Garbage Collection) 프로세스에 의해 메모리에서 실제로 해제됩니다. 삭제된 객체에 대한 모든 참조가 제거되면, JavaScript 엔진의 가비지 컬렉터가 나중에 메모리를 회수할 수 있습니다. 따라서 delete를 호출하는 것은 메모리 관리의 첫 단계이며, 이후 가비지 컬렉션이 수행되어야 실제 메모리 해제가 일어납니다.
이전 블로그 참고해서 성공!
https://velog.io/@classbinu/%ED%81%AC%EB%9E%98%ED%94%84%ED%86%A4-%EC%A0%95%EA%B8%80-3%EA%B8%B0-26%ED%99%94-TIL
마지막에 503 에러가 계속 나왔는데, 로드밸런서에 대상을 등록 안 해서 그런 거였음.
근데 렌더링 속도가 너무 느림.
이건 내일 해결하기.
아마 next에서 이미지 최적화 문제 같음.
버튼 폰트 크기 키우기
동화 실시간 생성 폰트 크게 키우기
동화 생성 시 이미지 생성 부분 비어있는 거 어색함.
챗봇 입력 시 음성인식으로 하기
기술적 챌린지 추가 (+ 웹소켓)