<목차>
- 쓰로틀링과 디바운싱
- 자바스크립트와 타입스크립트
21. 쓰로틀링과 디바운싱
- 이벤트 핸들링 효율을 높이기 위해 사용
- React애플리케이션에서 유용하게 사용
- 과도한 함수 호출을 제한함으로써 성능을 최적화, 브라우저의 부담을 줄이는데 도움
쓰로틀링
- Throttling
- 정해진 시간 동안 함수가 한 번만 호출될 수 있도록 제한하는 기법
- 스크롤 이벤트나 윈도우 리사이징 이벤트 같이 짧은 기간 동안 매우 빈번하게 발생할 수 있는 이벤트에 사용
- 함수 호출 횟수 제한 => 리소스 사용이 줄어들고 성능 향상
예시) 100ms마다 한 번씩만 이벤트 핸들러 실행되도록 설정
디바운싱
- Debouncing
- 연속적으로 발생하는 이벤트에 대해 일정 시간 동안의 마지막 이벤트만 처리하는 기법
- 일정 시간이 지난 후 마지막으로 입력된 내용에 대해서만 함수 실행
- 불필요한 API 호출이나 검색 결과 업데이트를 줄여 성능을 개선하는데 도움
예시 ) 사용자가 입력 필드에 글을 입력할 때마다 발생하는 이벤트 : 사용자가 타이핑을 멈출 때까지 함수 호출 지연
사용 이유
- 성능 최적화 : 불필요한 계산과 네트워크 요청을 줄여 애플리케이션의 반응성을 유지
- 서버 부하 감소 : 서버에 불필요한 요청을 줄여 서버의 부하를 경감
- 사용자 경험 개선 : 화면의 끊김 없이 부드러운 경험을 제공하여 사용자 경험을 향상
Q. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
쓰로틀링과 디바운싱 모두 이벤트 핸들링의 효율을 높이기 위해 사용되는 기법입니다. 두 가지 모두 과도한 함수 호출을 제한하여 성능을 최적화하고 브라우저의 부담을 줄이는 데 도움이 됩니다. 쓰로틀링이란 정해진 시간 동안 함수가 한 번만 호출될 수 있도록 제한하는 기법입니다. 사용자가 스크롤 이벤트나 창 크기를 조절하는 이벤트를 진행할 때 짧은 기간 동안 같은 이벤트가 빈번하게 발생합니다. 일정 시간, 예를 들어 100밀리초마다 한 번씩만 이벤트 핸들러를 실행하도록 설정하면 함수 호출의 횟수가 줄어들고 리소스 사용이 줄어들어 성능 향상에 도움이 됩니다. 디바운싱도 비슷한 개념입니다. 디바운싱을 통해 연속적으로 발생하는 이벤트에 대해 일정 시간 동안 마지막 이벤트만 처리하여 불필요한 API 호출이나 검색 결과 업데이트를 줄여 성능 개선을 할 수 있습니다. 예를 들어 사용자가 검색창에 글을 입력할 때 글이 변할 때마다 이벤트가 발생하지 않게 타이핑을 멈출 때까지 함수 호출을 지연시킵니다. 쓰로틀링과 디바운싱을 사용하여 성능을 최적화하고 불필요한 요청을 줄여 서버의 부하를 감소시키고 더 나아가 사용자 경험도 개선할 수 있습니다.
자바스크립트와 타입스크립트
자바스크립트
- 웹 페이지를 동적으로 만들기 위해 개발된 프로그래밍 언어
- 브라우저에서 실행
- HTML과 CSS와 함께 웹 개발의 핵심 요소 중 하나
장점
- 유연성 : 매우 유연하고 동적인 언어, 변수나 데이터 타입 선언이 자유로워 빠르고 쉽게 개발
- 범용성 : 주요 브라우저에서 지원, Node.js를 통해 서버 사이드 프로그래밍도 가능
- 커뮤니티와 자원 : 매우 큰 개발자 커뮤니티와 방대한 양의 라이브러리 및 프레임워크가 존재
단점
- 오류 발견의 어려움 : 실행 시점까지 타입 오류 등의 문제를 발견하기 어려움, 크고 복잡한 애플리케이션에서는 디버깅이 어려울 수 있음
- 보안 문제 : 클라이언트 사이드에서 실행되므로 소스 코드가 공개되어 보안에 취약
타입스크립트
- 자바스크립트에 타입 시스팀을 추가한 언어
- 마이크로소프트에의해 개발
장점
- 정적 타입 지정 : 변수, 파라미터, 반환 값 등에 타입을 명시 가능, 개발 중 오류 쉽게 발견하고 수정 가능 => 대규모 프로젝트나 다수의 개발자가 협업할 때 매우 유용
- 도구의 지원 : 코드 완성, 리팩토링, 인터페이스 등 개발 도구의 지원이 우수 => 개발 효율성 상승
- 컴파일 시 오류 검사 : 컴파일 단계에서 오류를 잡아낼 수 있어 실행 시간의 버그를 줄일 수 있음
단점
- 학습 곡선 : 자바스크립트보다 복잡한 타입 시스템과 추가 문법을 배워야함
- 컴파일 시간 : 자바스크립트 코드로 변환(컴파일)되어야 하므로 작은 프로젝트에서는 컴파일 시간이 부담
Q. 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.
자바스크립트는 웹 페이지를 동적으로 만들기 위해 개발된 프로그래밍 언어로, HTML과 CSS와 함께 웹 개발의 핵심 요소 중 하나입니다. 매우 유연하고 동적인 언어로, 변수나 데이터 타입 선언이 자유로워 그만큼 쉽고 빠르게 개발을 시작할 수 있습니다. 모든 주요 브라우저에서 지원되며, Node.js를 통해 서버 사이드 프로그래밍도 가능해지면서 현재 인터넷 기반 서비스와 애플리케이션의 많은 부분이 자바스크립트에 의존하고 있습니다. 그렇기 때문에 매우 큰 개발자 커뮤니티와 방대한 양의 라이브러리 및 프레임워크가 존재합니다. 다만 유연하다는 특징 때문에 실행 시점까지 타입 오류 등의 문제를 발견하기 어려워 크고 복잡한 애플리케이션에서는 디버깅이 어려울 수 있습니다. 클라이언트 사이드에서 실행되므로 소스 코드가 그대로 공개되어 보안에 취약하다는 단점도 있습니다. 타입 오류 문제를 해결하기 위해 마이크로소프트에 의해 타입스크립트가 개발되었습니다. 타입스크립트는 변수, 파라미터, 반환값 등 타입을 명시할 수 있고, 개발 중에도 쉽게 오류를 발견하고 수정할 수 있기에 대규모 프로젝트나 다수의 개발자가 협업할 때 매우 유용합니다. 다양한 개발 도구의 지원이 있어 개발의 효율성도 상승할 수 있는 것뿐만 아니라 컴파일 단계에서 오류를 잡아낼 수 있어 런타임의 버그를 줄일 수 있습니다. 다만, 자바스크립트보다 복잡한 타입 시스템을 익혀야 한다는 점과 자바스크립트 코드로 변환하는 컴파일 과정이 작은 프로젝트의 경우 부담된다는 점이 단점입니다.
실행 시간 = 런타임
컴파일 = 자바스크립트 코드로 변환 (즉 자바스크립트는 컴파일이 없다.)
