Frontend/JAVASCRIPT 5

JS - Throttle 와 Debounce

왜 써야 하는데? 짧은 시간에 많은 이벤트가 발생하는 경우 이벤트 핸들러가 과도하게 호출되어서 성능의 문제를 발생시키기 때문에! 나아가 사용자 경험을 헤칠 수 있다 즉! 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해서 제약을 걸어 제어 할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함! Throttle 입력 주기를 방해하지 않고 일정시간 동안 입력을 모아서 한번에 출력을 제한 여러 번 발생하는 이벤트를 일정 시간 동안 최대 한 번만 실행되도록 이벤트 발생 시간 이후 일정 시간 동안만 기다리고 이벤트를 실행 후 재차 기다린다는 점 입력이 시작되면 일정주기로 게속 실행 예시 - 무한 스크롤 Debounce 입력 주기가 끝나면 출력 여러번의 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 개념 마..

Frontend/JAVASCRIPT 2023.02.02

JS - 스크롤에 따른 DOM요소의 좌표 찾기

수직상의 위치 관련 API element.getBoundingClientRect() : 뷰포트를 이루는 가장자리와 element와의 거리 정보를 가지고 있는 객체를 리턴하는 메서드입니다. 반환하는 객체에는 top, bottom, left, right 프로퍼티가 있는데 이게 각각 뷰포트와의 방향별 거리를 의미합니다. window.pageYOffset : 수직 방향으로 얼마나 스크롤했는지 픽셀 단위로 알려주는 window의 속성입니다. window.scrollY와 같은 값을 가집니다. 위치 시작점에 따른 거리 구하기 // 수직으로 스크롤한 정도 + 뷰포트와의 거리 const distanceFromHtml = child.getBoundingClientRect().top + window.pageYOffset; ..

Frontend/JAVASCRIPT 2023.01.17

JS - 원시 타입 vs 참조 타입

원시타입 (Primitive Type) 변수들의 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장 string, number, bigint, boolean, undefined, ES6부터 추가된 symbol 변수에 할당될때, 메모리의 고정 크기로 원시 값을 저장 값이 변하지 않는 불변성 재할당시, 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라졌을 뿐이다. 참조타임 (reference Type) 메모리에 직접 접근하지 않고 메모리의 위치 (주소)에 대한 간접적인 참조를 통해 메모리에 접근 원시 타입을 제외한 나머지 ( 배열, 객체, 함수 등등) 데이터 자체는 별도의 메모리 공간에 저장되고 , 변수에 할당 시 데이터에 대한 주소가 저장됨 주소는 특별한 동적인 데..

Frontend/JAVASCRIPT 2023.01.17

[JAVASCRIPT] - 정수를 정렬하는 방법

🤫 정수(숫자)를 정렬하는 아주 간단한 방법! 5 단계를 거치면 가능 1. 정수(숫자)를 문자열로 변환한다 2. 변환한 문자열을 배열로 바꾼다 3. 배열을 정렬한다 4. 배열을 다시 문자열로 변환한다 5. 이모든 것을 다시 정수(숫자)로 바꾼다! let n = 118372 //내림차순으로 배치하고 싶음 1. let a = n.toString()//정수를 문자열로 2. let b = a.split('')//문자열을 배열로 3. let c = b.sort((a,b) =>b-a)//배열을 정렬하고 4. let d = c.join('')//배열을 문자열로 5. let e = parsInt(d)//문자열을 정수로

Frontend/JAVASCRIPT 2022.01.20

[JAVASCRIPT] - 배열 1 (배열과 배열의 메서드)

let arr = ['사자','호랑이','토끼','코끼리']배열은 여러개의 값을 순차적으로 나열한 구조! 👉🏻 배열이 가지고 있는 값 : 요소 (element) 👉🏻 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 갖는다 , 대부분의 프로그래밍 언어에서 인덱스는 0부터 시작 arr[0] // -> 사자 arr[1] // -> 호랑이요소에 접근 할때는 대괄호 표기법을 사용, 대괄호 내에 접근하고 싶은 요소의 인덱스를 지정! 📌 자바스크립트 배열은 객체 타입 -> object for (let i =0; i x + x)); // expected output: Array [2, 4, 6]👉🏻 메서드는 유사 배열 객체(array-lik..

Frontend/JAVASCRIPT 2022.01.19