- 데이터 시각화 영역과 얼굴 인식 알고리즘 개발 주도
- 임직원 관리 및 모니터링 시스템 구축을 목표로, 임직원 데이터(등록, 조회, 수정 등) 관리 기능을 설계 및 개발
- AWS Rekognition과 MediaPipe를 활용하여 얼굴 인식 기능 구현
- Nivo를 활용하여 임직원의 건강 상태 및 모니터링 데이터를 직관적으로 시각화
임직원 상세 페이지에서 필요한 데이터(id)를 처음에 Recoil 상태로 관리했음.
그러나 Recoil은 메모리 기반 상태 관리이기 때문에, 사용자가 페이지를 새로고침하거나 직접 URL을 입력해 접근할 경우 상태가 초기화되어 id 정보가 사라지는 문제가 발생함.
이로 인해 새로고침 시 데이터 로딩 실패 또는 오류가 발생하여 사용자 경험에 문제가 생김.
Recoil은 클라이언트 메모리에만 상태를 저장하므로, 브라우저 새로고침이나 직접 접근 시 상태가 초기화됨.
id를 Recoil에만 의존한 결과, URL에 정보가 남아 있지 않으면 데이터 복원이 불가능한 구조였음.
id를 Recoil 상태 대신 URL 파라미터에서 직접 가져와 데이터 호출하도록 수정
→ 새로고침, 직접 URL 접근 시에도 항상 id를 확보할 수 있도록 구조 변경
Recoil은 보조 상태 관리용으로만 사용하고, 핵심 데이터 흐름은 URL 기반으로 일관성 있게 관리
→ UX 안정성과 데이터 신뢰성 모두 확보
모든 접근 경로에서 임직원 상세 데이터를 안정적으로 불러올 수 있게 되어 사용자 경험 개선
웹캠이 켜지기 전에 얼굴 인식 관련 데이터가 서버와 통신을 시도하는 문제가 발생했음.
비동기적으로 반복 호출되는 함수들 간 실행 제어가 제대로 이루어지지 않아 통신 오류가 발생하고,
불필요한 전역 변수 사용으로 인해 메모리 누수(memory leak) 문제가 추가로 발생함.
웹캠 초기화가 완료되지 않은 상태에서 얼굴 인식 및 서버 통신이 시도되어 통제되지 않은 API 호출이 발생함.
전역 변수 사용으로 함수 호출과 상태 관리가 꼬이면서 메모리 해제가 제대로 이루어지지 않음.
웹캠이 정상적으로 켜질 때까지 대기한 후 얼굴 인식 함수를 실행하도록 수정
→ 카메라 준비 완료 전에는 인식 로직 실행을 차단
얼굴을 찾지 못했을 경우 서버 통신 및 상태 업데이트를 하지 않도록 로직 변경
→ 불필요한 API 호출 방지 및 성능 최적화
얼굴 데이터 확인용 API 호출을 반복 함수에서 분리하여 호출 빈도 제어 가능하도록 개선
→ 일정 간격으로만 API를 호출해 서버 부하 및 리소스 소모 최소화
전역 변수 대신 함수 스코프 내 지역 변수만 사용하도록 변경
→ 자바스크립트의 가비지 컬렉션을 활용하여 함수 실행 후 자동으로 메모리 해제
전체적으로 호출 최적화 및 메모리 누수 문제를 해결하여 시스템 안정성 강화
서버가 ThingsBoard 기반이었기 때문에, 기간 설정 후 데이터를 Export하는 기능을 페이지 내부에 직접 구현했을 때 대량 데이터 처리로 인해 문제가 발생함.
메모리 사용량 급증, API 호출 대기 시간 과도, 페이지 반응 속도 저하 등 전체 서비스 UX에 부정적인 영향을 미쳤음.
Export 기능이 페이지 내부에 항상 포함되어 있어, 페이지 로딩 시점부터 대량 데이터 API 호출 로직이 실행될 가능성이 있었음.
필요한 경우에만 요청을 수행해야 하는 Export 기능이, 기본 페이지 렌더링 흐름과 충돌하여 서버 부하 및 메모리 문제를 야기함.
데이터 Export 기능을 별도의 모달 창으로 분리하여 독립적으로 구현
→ Export 모달이 열려 있을 때만 API 요청 수행
모달이 닫히거나 비활성 상태일 때는 API 호출을 중단하도록 제어
→ 페이지 기본 로딩 성능 및 반응 속도 대폭 개선
데이터 Export 요청이 필요한 순간에만 서버 부하를 발생시키는 구조로 최적화
→ 메모리 사용량과 응답 지연 문제 모두 해결
사용자 입장에서도 별도 모달을 통해 명확하고 부드럽게 Export 기능을 이용할 수 있게 되어 UX 크게 향상