사용자 위젯의 응답성 문제

사용자 위젯은 iframe 안에서 실행됩니다. 메모리를 과도하게 사용하거나 브라우저 스레드를 막으면 페이지가 멈추거나 종료 상태로 보일 수 있습니다. Chrome DevTools의 Performance에서 실행을 기록하여 원인을 구분합니다.

반복 렌더링과 끝나지 않는 반복

React에서는 다음 연결을 확인합니다.

• useEffect가 자신의 의존값을 갱신하는지 봅니다. 예를 들어 의존성 목록이 [objects, data]인데 내부에서 setData([...objects])로 새 data 배열을 만들면 다시 같은 effect를 실행하게 됩니다.
• setTimeout, setInterval과 requestAnimationFrame의 반복이 정리되지 않고 남아 있는지 확인합니다.
• window.addEventListener 등의 처리기가 상태를 바꾸고 그 변경이 같은 처리기를 다시 발생시키는지 확인합니다.
• 렌더할 때마다 모든 항목에 비싼 계산을 반복하는지 확인합니다.

React 밖에서도 종료 조건이 충족되지 않는 while(true) 반복을 피합니다. 입력의 최솟값부터 최댓값까지 1씩 증가하는 반복 역시 범위가 예상보다 크면 사실상 끝나지 않는 작업이 될 수 있습니다. 입력 개수와 반복 범위는 별도로 살핍니다.

모든 데이터를 브라우저에 누적

큰 객체 유형의 모든 객체를 읽어 클라이언트에서 처리하지 않습니다. 예를 들어 fetchPage에서 $pageSize를 1,000으로 두더라도 nextPageToken이 없어질 때까지 모든 page.data를 allObjects에 계속 추가하면 결국 전체 데이터를 메모리에 올리게 됩니다. 각 요청이 페이지 단위라는 사실만으로 메모리 사용이 제한되지는 않습니다.

다음 방식으로 작업량을 줄입니다.

1. 한 페이지를 표시하고 필요할 때 추가 페이지를 읽습니다.
2. 필터와 정렬은 가능한 한 질의에서 수행합니다.
3. 전체 개수 같은 요약에는 집계를 사용합니다.
4. 속성이 많은 유형에는 $select로 필요한 속성만 요청합니다.
5. 다른 속성이나 링크에 의존하는 계산에는 .withProperties와 파생 속성을 검토합니다.

개발 환경과 기능 권한

변경이 보이지 않는 경우에는 dev mode 상태와 재적용을 확인합니다. 브라우저 기능을 쓸 수 없는 경우에는 iframe 속성 허용과 사용자의 브라우저 권한을 각각 확인합니다.

API 호출은 지원 엔드포인트와 사용자 권한을 따릅니다. 설치된 제품의 소스 코드를 수정하여 새 버전을 게시하려는 경우에는 Marketplace 지원 범위와 구분합니다.