- 홈 대시보드 내 아동 출결 현황 조회 기능 및 웹소켓 기반 실시간 알림 기능 개발
- 아동 관리 페이지에서 아동 등록, 수정, 삭제 기능 및 데이터 시각화 컴포넌트 구현
- 키즈노트 관리 기능을 포함한 아동 전체 데이터 통합 관리 화면 개발
- 서비스 출시 이후 연 1회 정기 업데이트 시 주 개발자로서 유지보수 및 고도화 작업 담당
아동 등록 화면에서 필요한 학급 정보를 서버로부터 호출할 때, 네트워크 지연이나 서버 반응 속도가 느릴 경우 문제가 발생함.
학급 데이터가 준비되기 전에 화면이 먼저 렌더링되면서, 학급 관련 컴포넌트가 필수 데이터 없이 렌더링되어 전체 등록 화면이 깨지거나 오류가 발생함.
학급 데이터를 기다리지 않고 컴포넌트가 렌더링되면서 데이터 의존성이 충족되지 않아 렌더 오류가 발생함.
서버 응답 대기 시간이나 네트워크 상태에 따라 문제 빈도가 불규칙하게 나타남.
react-query의 isLoading 상태를 활용하여 데이터 준비 여부를 감지
→ 학급 데이터가 로딩 중일 경우, 등록 화면 렌더링을 일시 지연하도록 수정
데이터 준비 완료 후에만 화면을 렌더링하도록 로직을 변경
→ 필수 데이터가 없는 상태에서 컴포넌트가 렌더링되는 문제 방지
화면 초기 로딩의 안정성 확보
→ 네트워크 상황에 관계없이 등록 화면이 정상적으로 동작하도록 개선
교직원 계정만 관리해야 하는 페이지에서, 학부모 계정까지 함께 리스트에 노출되는 문제가 발생함.
관리 대상이 다른 계정이 섞여 노출되어 관리상의 혼란과 오작동 가능성이 높아졌음.
서버에서 교직원 계정과 학부모 계정을 동일한 엔티티(Entity Field)로 관리하고 있었음.
계정 목록 조회 시 별도의 구분 필터가 없어, 프론트엔드에서도 교직원 전용 데이터만 분리해 가져올 수 없는 구조였음.
이로 인해 교직원 관리 페이지에 학부모 계정까지 함께 노출되는 문제 발생.
계정 생성 단계에서 요청 경로(URL)를 기준으로 authority(권한) 값을 명시적으로 부여하는 방식으로 수정
→ 계정 생성 시점부터 교직원과 학부모 계정을 명확히 구분
서버와 프론트 간 권한 구분 체계를 일관되게 적용하여 데이터 조회 시 필터링 가능하도록 개선
→ 교직원 관리 페이지에 교직원 계정만 정확히 노출되도록 수정
관리 대상 계정의 구분이 명확해지면서, 관리 효율성과 보안성 강화
→ 권한 관리 체계 정비를 통한 서비스 품질 향상
아동 관련 작업(수정, 삭제, 등록) 이후, 화면에 변경 사항이 즉시 반영되지 않는 문제가 발생함.
사용자는 수동으로 새로고침(F5)하거나 페이지를 이동해야 변경된 데이터를 확인할 수 있었음
아동 데이터를 관리하는 react-query 캐시가 작업 완료 후 자동으로 갱신되지 않았음.
수정/삭제/등록 작업 이후에도 기존 캐시가 유지되어 리스트 데이터가 오래된 상태로 남아 있었음.
react-query의 queryClient.invalidateQueries를 활용하여 수정/삭제/등록 작업 완료 시 해당 쿼리 키를 무효화하고 자동 재요청(refetch)하도록 수정
→ 변경된 아동 데이터가 서버에서 즉시 갱신되어 화면에 반영
아동 등록, 수정, 삭제 이후 리스트가 새로고침 없이 자동으로 최신 데이터로 업데이트되도록 개선
→ 사용자는 페이지 이동이나 새로고침 없이 바로 변경된 결과를 확인 가능
데이터 반영 속도를 개선하여 전체 UX를 매끄럽고 실시간으로 반응하는 느낌으로 강화
→ 서비스 반응성 및 사용자 만족도 향상