실시간으로 업데이트되는 스크롤 로그 유지 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상자**: 웹 개발자, 실시간 로그 모니터링이 필요한 애플리케이션 개발자
• *난이도**: 중급~고급 (CSS, 이벤트 처리, 성능 최적화 기술 필요)

핵심 요약

• 로그 창의 스크롤 위치 유지: .log 클래스에 overflow-y: auto 적용하여 로그가 컨테이너를 벗어날 경우 스크롤바 자동 생성
• 로그 업데이트 최적화: ui.timer(0.02, callback=...) 사용하여 0.02초 간격으로 로그 추가, queue 사용해 버퍼링 처리
• UI/UX 향상 전략: setTimeout() 사용, 스크롤 위치 자동 하단 고정, 로그 처리 간격 조정 (0.02~0.1초)

섹션별 세부 요약

1. Column Layout (레이아웃 구조)

• ui.column()으로 로그 영역을 3/4 너비의 컨테이너에 배치
• height: 50vh 설정으로 로그 창의 높이 정의
• flex-grow 사용해 UI 변화에 따라 로그 창 크기 동적 조정

1. Log Creation (로그 생성)

• ui.log(max_lines=1000)으로 최대 1000줄 제한, height: 50vh으로 스크롤 가능하도록 설정
• overflow-y: auto 스타일 적용으로 로그가 컨테이너를 초과할 경우 스크롤바 자동 생성

1. Log Element Handler (로그 처리 핸들러)

• LogElementHandler 클래스로 로그를 ui.log에 전달하는 핸들러 구현
• ui.context.client.on_disconnect()로 클라이언트 연결 종료 시 핸들러 제거

1. Timer and Callback (타이머 및 콜백)

• ui.timer(0.02, callback=...)으로 0.02초 간격으로 로그 추가
• queue.get()으로 로그 큐에서 항목 추출, queue.empty() 체크로 불필요한 처리 방지

1. CSS 최적화 전략

• .log { overflow-y: auto; } 스타일로 로그가 컨테이너를 벗어날 경우 스크롤바 생성
• 스크롤 위치 자동 하단 고정: log.scrollTop = log.scrollHeight 사용

1. 스크롤 위치 유지 전략

• setTimeout() 사용해 콜백 처리 간격 조절
• queue 버퍼링으로 로그 폭주 시 UI 부하 완화
• 0.02~0.1초 범위의 타이머 간격으로 최적 설정 탐색

결론

• *핵심 구현 방법**:

1. .log 클래스에 overflow-y: auto 스타일 적용
2. ui.timer(0.02, ...)로 0.02초 간격으로 로그 추가
3. queue 사용해 로그 처리 간격 조절 및 버퍼링

• *실무 팁**:

- 타이머 간격을 0.02~0.1초 범위에서 실험적으로 조정

- setTimeout() 사용해 UI 업데이트 부하 완화

- log.scrollTop = log.scrollHeight로 스크롤 위치 자동 하단 고정

- 로그 처리 빈도와 하드웨어 성능에 따라 타이머 간격 최적화 필수