Angular 18 시리즈(26대)는 RXJS 기반의 레이지 서치 기능을 구현합니다

작은 쓰레기 같은 놈들 · 게시됨 2024. 10. 28. 오후 5:18:59

요구사항: 텍스트가 변경될 때 백엔드 인터페이스를 호출해 키워드를 쿼리하고 데이터를 반환해야 하지만, 사용자가 키워드를 완전히 입력하지 않은 경우가 많아 텍스트 변경 이벤트가 여러 번 트리거되어 백엔드 인터페이스가 자주 요청해야 하는 압박을 주고, 프론트엔드 빈번한 렌더링에도 일정한 압박이 가해집니다. 지연 검색 기능을 어떻게 구현하나요? 즉, 사용자가 키워드를 완전히 입력하면 백엔드 인터페이스 쿼리가 호출됩니다.

발표를 원활하게 하기 위해 배경은 다음과 같습니다1초 지연, 렌더링은 다음과 같습니다:

HTML 페이지 코드:

로그인이 보이네요.

TS 컴포넌트 코드는 다음과 같습니다:

로그인이 보이네요.

(끝)

작은 쓰레기 같은 놈들 · 게시됨 2025. 5. 15. 오전 8:44:41

debounceTime() 파이프라인
디바운스타임 파이프라인은 Angular에 내장된 파이프라인으로, 이벤트를 디바운스하는 데 사용할 수 있습니다. 디바운스타임 파이프라인을 사용하려면 디바운스 시간(밀리초 단위)을 매개변수로 전달해야 합니다
distinctUntilChanged()
distinctUntilChanged는 관측 가능 값에서 연속적으로 발화되는 동일한 값을 필터링하는 연산자입니다. 이는 관측 가능한 값이 연속으로 여러 번 발화되는 것을 막고 싶은 상황에서 유용합니다.

작은 쓰레기 같은 놈들 · 게시됨 2025. 5. 15. 오전 9:29:33

AsyncValidatorFn 검증 지연 안정화

로그인이 보이네요.

참조:하이퍼링크 로그인이 보입니다.

작은 쓰레기 같은 놈들 · 게시됨 2025. 5. 15. 오전 9:33:52

작은 슬래그 2025-5-15 09:29에 게시됨
AsyncValidatorFn 검증 지연 안정화

참고: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

추가 캡슐화 (검사 안 했어）

예시 1:

로그인이 보이네요.

예시 2:

로그인이 보이네요.

[각] Angular 18 시리즈(26대)는 RXJS 기반의 레이지 서치 기능을 구현합니다

관련 게시물

본 섹션