각 Select 옵션에 대응하는 데이터셋을 사전에 prefetch하여, 선택 시 화면 전환 없이 즉각적으로 데이터를 교체할 수 있도록 구성해 UX를 개선

고정된 데이터 쿼리와 기간별 통계 데이터를 분리시켜 정의함으로써 쿼리 단위로 명확하게 캐시를 구분. API 호출을 최소화하여 문제 보완

MemoryRouter와 Tanstack Query Provider를 포함한 커스텀 렌더링 유틸을 구성. 중첩 라우팅과 라우팅 상태를 mock 방식으로 구성하여 테스트 환경을 실제 실행 환경과 유사하게 설계하여 문제를 해결

테스트 환경의 화면 플로우를 실제 유저 처럼 매끄럽게 트리거하는 userEvent를 도입하여 해결

보기의 추가·수정·삭제 직후 문제 데이터를 최신 상태로 유지하기 위해 Tanstack Query의 invalidateQueries 기능을 활용하여 데이터를 자동으로 갱신. 이후, 최신 상태의 보기 데이터를 기반으로 정렬 후 보기 순서 변경 API를 요청하여 정확성을 보장

각 컨텐츠 유형별로 독립적인 폼을 구성하고, 선택된 유형에 따라 동적으로 렌더링하도록 개선하여 UI 복잡성을 완화하고 사용성을 개선

결과 데이터 상태 값에 throttle을 적용하여 불필요한 업데이트를 줄이고, 데이터 유실없이 안정적으로 렌더링되도록 개선. 1000ms당 최대 n회 (실시간 미팅에 접속 중인 인원 수, 약 1500명) --> throttle 적용 후 50ms 당 한번씩 결과를 적용토록 함, 이후 cpu 사용률 20%감소

재연결 로직을 추가. 기존 웹소켓 핑퐁의 count 값을 비교하고, 개수가 다른체 웹소켓이 연결이 되었으면 재연결이라고 판단. 이후 진행중인 돌발퀴즈를 다시 불러오도록 api를 호출하여 문제 해결

재연결 시도에 지수 백오프를 적용하고, 약간의 오차를 주는 랜덤성을 추가하여 동시에 발생하는 요청을 분산시켜 서버 부하를 최소화. n 동시 재연결 요청 수 최대 n회 (실시간 미팅에 접속 중인 인원 수, 약 1500명) -> 최대 동시 재연결 요청 수 약 1/10 으로 감소

권한이 필요한 페이지에 접근할 때 인증된 사용자인지 먼저 확인하는 미들웨어를 React Router Dom의 Navigate를 이용해 직접 구현. 이후 권한이 허용되면 페이지로 이동하고, 아닐 경우 접근을 차단하도록 처리

초기 row 높이를 추정하는 estimateSize 값을 설정하고, 이후 실제 렌더링된 row의 높이를 측정하여 동적으로 업데이트하여 문제 해결

문제의 id를 객체의 key로 두고, 언어별로 중첩하여 유저 코드를 JSON 문자열로 저장, 저장 공간 최소화를 위해 최신 10개의 문제만 유지하도록 구현

대기 시간 동안 스켈레톤 UI를 보여주어 사용자가 대기 중임을 인지할 수 있도록 개선

입력값을 사전에 검증하는 유효성 검사 로직을 적용하여 문제에서 지정한 데이터 타입과 일치하는지 확인하고, JSON 문자열 입력 시 싱글 따옴표가 포함된 경우 경고 메시지를 띄운 후 입력을 거부하도록 처리. 이를 통해 입력 단계에서 오류를 방지하고, 실행 중 예기치 않은 데이터 타입 오류를 최소화

관련 항목을 3가지 주요 탭으로 나누고, 각 탭 이동시 유효성 검사를 사전에 실행하도록 개선. 유효성 검사 로직은 전역 스토어에서 관리하며, 각 탭이 마운트될 때 해당 탭의 검증 함수를 설정하여 일관된 로직을 유지

효율적으로 컴포넌트와 기능을 모듈화하는 FSD 폴더 구조를 채택하여 개발. 기능의 한 단위를 "entity" 로 정의하고 api, schema, type, global state 를 통합 관리하여 확장성을 향상 시킴

시험 페이지 입장 시 미리 사용자의 답안지를 생성하는 api를 전송하도록 하고, 사용자가 답안을 체크할 때마다 서버에 PATCH 요청을 보내 시험 진행 상황을 실시간으로 저장하도록 개선. 시험 진행 도중 데이터 유실률 약 50건 중 10건 --> 0건으로 감소

애니메이션의 상태를 컴포넌트의 key에 주입하거나, AnimatePresence로 컴포넌트를 감싸 레이아웃 변경을 감지하여 해결