본문 바로가기
반응형
[JavaScript] 디바운싱과 쓰로틀링 디바운싱(debouncing)과 쓰로틀링(throttling). 언뜻 들어는 봤지만 유야무야 시간을 보내다가, 기술 과제 탈락 후 디바운싱과 같은 최적화 작업을 했으면 좋겠다는 피드백을 받았다. 그렇다면 어떨 때는 디바운싱을 사용해야하고, 쓰로틀링을 사용해야할까? 이번 기회에 제대로 개념을 잡고 가야겠다고 생각했다. 들어가기 전 setTimeout() - 함수의 실행을 예약하는 타이머 기능 clearTimeout() - 타이머의 실행을 취소하는 기능 디바운싱 - 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 쓰로틀링 - 빈번하게 발생하는 이벤트를 '일정한 간격으로 한번만' 실행 시키는 최적화 기법 setTimeout() - 함수의 실행을 예약하는 타이머 기능 setTim.. 2022. 6. 10.
[JS] switch 사용법(feat.타입스크립트) switch는 하나의 표현식에 대해 여러 조건들이 존재할 때 유용하게 쓸 수 있다. 즉, 어떤 상황에 대해 여러 경우(분기)로 나누어질 때 사용하면 좋다. (과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 등) 구문(syntax)과 예시를 통해 살펴보자. 구문(Syntax) switch (expression) { case value1: // 표현식(expression)의 결과가 value1과 일치할 때 실행 됨 break; case value2: // 표현식(expression)의 결과가 value2과 일치할 때 실행 됨 break; // ... case valueN: // 표현식(expression)의 결과가 valueN과 일치할 때 실행 됨 .. 2022. 3. 27.
스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 UI가 너무너무 신기했다. '이 UI 탐난다. 따라해봐야지' 생각하고 바로 실행에 옮겨봤다. 먼저 와이즐리의 헤더에 발생하는 이벤트를 정리해보자. 스크롤을 내리면 헤더의 배경 색상이 바뀐다. (transparent -> #fff) 조금 더 내리면 헤더가 올라간다. (translateY 사용) 스크롤을 올리면 헤더가 내려온다. (translateY 사용) 스크롤이 맨 위에 도착하면, 헤더의 배경 색상이 바뀐다. (#fff -> transparent) HTML, CSS 헤더의 기능 구현에 목적을 두어서 페이지는 간단하게 만.. 2021. 8. 22.
다크모드 구현과 로컬스토리지 페이지가 닫혀도 다크모드가 유지되도록 구현하기 다크모드는 눈 보호, 배터리 절약 등의 장점으로 많이 보편화 되어 있는 것 같다. 이렇게 자주 쓰이는만큼 내가 설정 해놓은 다크모드가 나중에 들어오거나 탭을 닫은 후에도 유지 되었음 좋겠다. 이렇게 지속적으로 필요한 데이터의 경우 로컬스토리지를 사용함으로써 문제점을 해결 할 수 있다. Window.localStorage Window.localStorage는 현재 출처(origin)의 로컬 저장 공간의 Storage 객체에 접근할 수 있게 해준다. 이 속성을 사용해서 현재 도메인의 로컬 Storage 객체에 접근한 후, 키-값 형태의 항목을 추가하거나 읽고, 제거까지 할 수 있다. 항목 추가 localStorage.setItem('darkMode', 'enab.. 2021. 8. 21.
[JavaScript] var, let, const ES6의 등장 전후 블록 스코프를 갖지않는 var ES6가 나오기 전에는 var로 변수선언을 했습니다. var는 재선언과 재할당이 가능하고 블록 스코프를 갖지않습니다. // 재선언 및 값의 재할당 가능 { // 블록 스코프를 갖지 않음 var name = '개발 전용'; } console.log(name); // "개발 전용" (블록 스코프 영향 X) var name = '개발자 전용'; name = 'only dev'; console.log(name); // "only dev" var 호이스팅 일반적으로 변수를 선언한 후 값을 할당하지만 var는 '호이스팅'으로 인해 선언부가 최상단으로 끌어올려지고 'undefined'로 값이 초기화되기 때문에 변수를 선언하기전에도 값을 사용 할 수 있습니다. cons.. 2020. 12. 21.
[JavaScript] 배열을 제대로 알아보자 1. 배열 선언 const array1 = new Array(); const array2 = new Array(1, 2, 3); const array3 = [1, 2, 3]; console.log(array1); // [] console.log(array2); // (3) [1, 2, 3] console.log(array3); // (3) [1, 2, 3] 2. 인덱스 위치 const books = ['부의 추월차선', '잡스의 기준', '레버리지']; // 배열 출력 console.log(books); // (3) ["부의 추월차선", "잡스의 기준", "레버리지"] // 배열의 길이 출력 console.log(books.length); // 3 // 배열의 해당 인덱스의 요소만 출력 console.l.. 2020. 12. 18.
[JavaScript] 필수 배열함수 10가지 정리 1. join() join() 메서드는 배열의 모든 요소들을 합해서 하나의 문자열로 반환합니다. 필요한 경우, 배열의 각 요소를 구분할 구분자를 사용할 수 있습니다. 생략하면 요소들이 쉼표로 구분 됩니다. { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(); console.log(result); // 맥북,그램,플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(''); console.log(result); // 맥북그램플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(', '); con.. 2020. 12. 17.
반응형