본문 바로가기

STUDY36

쓰로틀링(Throttling)과 디바운스(Debouncing)의 차이점 프론트엔드 개발에서는 사용자의 이벤트(스크롤, 입력 등)가 연속적으로 발생할 때, 이를 적절하게 처리하지 않으면 성능 문제로 이어질 수 있다. 이런 상황을 해결하기 위해 `쓰로틀링(Throttling)`과 `디바운스(Debouncing)`가 사용된다. 두 기법 모두 이벤트를 제한하여 성능을 최적화하지만, 동작 방식과 목적은 다르다. 1. 쓰로틀링(Throttling)이란?쓰로틀링은 특정 시간 동안 하나의 이벤트만 실행되도록 제한하는 기법이다. 이벤트가 반복적으로 발생하더라도 지정한 시간 동안 최대 한 번만 실행된다. 즉, 일정한 간격으로 이벤트를 발생시키는 것이다. 사용 사례: - 스크롤 이벤트: 사용자가 페이지를 스크롤할 때마다 이벤트가 계속해서 발생하지만, 이를 실시간으로 처리하면 성능 저하가 발생할.. 2024. 9. 24.
리액트에서 `key`에 `index`를 넣으면 안 되는 이유 리액트에서 `key`는 리스트의 각 항목을 고유하게 식별하기 위한 속성이다. 이 `key`는 리액트가 DOM을 효율적으로 업데이트하는 데 중요한 역할을 한다. 하지만 리스트 렌더링 시 `index`를 `key`로 사용하는 것은 권장되지 않는다.  이 글에서 그 이유와 다른 대안을 설명하겠다. `key`의 역할리액트는 컴포넌트 리스트를 렌더링할 때, 각 항목을 추적하기 위해 `key`를 사용한다. `key`는 리액트가 어떤 항목이 변경, 추가, 또는 제거되었는지 식별하는 데 도움을 준다. 만약 `key`가 없거나 적절하지 않다면, 리액트는 변경 사항을 제대로 감지하지 못해 불필요한 렌더링을 하거나 오류가 발생할 수 있다.const items = ['Apple', 'Banana', 'Cherry'];retu.. 2024. 9. 22.
[자바스크립트] 원시값과 참고값 자바스크립트의 원시값과 참조값 원시값(Primitive Type)원시값은 자바스크립트에서 가장 기본적인 데이터 유형이다. 값 자체가 메모리에 저장되며 불변성(immutable)을 가진다. - 자바스크립트의 6가지 원시 타입숫자(number): 정수와 실수를 포함한다. (예: `42`, `3.14`)문자열(string): 텍스트 데이터를 의미한다. (예: `'Hello, World!'`)불리언(boolean): 참 또는 거짓 값을 나타낸다. (`true`, `false`)null: 값이 없음을 나타낸다.undefined: 값이 할당되지 않았음을 나타낸다.symbol: 유일한 식별자를 생성한다. (ES6 추가) 원시값은 변수에 직접 할당되고, 복사될 때는 그 값을 그대로 복사한다. 즉, 다른 변수에 원시값을.. 2024. 9. 20.
프론트엔드 신입 개발자 면접 후기 취업 준비와 면접 후기 한 달 전부터 사람인과 잡코리아를 보며 본격적으로 이력서를 넣기 시작했다. 신입 취업 시장이 정말 힘들다는 것을 실감했다. 작은 중소기업이라도 경쟁률이 몇백 대 1은 기본이었다. 지원자가 최소 백 명부터 시작하는 경우도 많았다. 프론트엔드 신입을 뽑는다는 곳에 50곳 정도 이력서를 넣었고, 그 중 4군데에서 연락이 왔다. - 회사1 (전화 면접 후 대면 면접 예정) 회사1는 강남에 위치한, 직원 100명 규모의 중소 SI 회사다. 첫 전화 면접이라 굉장히 긴장했는데, 자기소개와 이력서, 포트폴리오에 대한 질문을 주로 받았다. 며칠 후 대면 면접을 보자는 연락을 받았고, 다음 주에 면접을 볼 예정이다. - 회사2 (대면 면접 진행) 회사2 역시 강남에 위치한, 직원 100명 규모의 .. 2024. 9. 19.

티스토리툴바