dev in Serengeti

[자바스크립트] throttling - 이벤트 실행횟수 제한 너무 많은 이벤트가 지속적으로 발생할 시, 과부화를 일으켜 사용자 환경에 버벅거림을 줄 수 있다. 이를 막기위해, 하나의 이벤트가 실행되는 동안은 같은 이벤트가 또 실행되지 않도록 제한을 주는 기술이다. [사용법] var temp; document.addEventListener('scroll', function() { if(!temp) { temp = setTimeout(function() { temp = null; //type your code here }, 500); } }) [간단원리] 이벤트 발생시, 먼저 timeout 이 존재하는지 확인 후, 존재한다면 아무것도 안함 만약 timeout 이 존재하지 않는다면, 새로운 timeout 을 ..

[자바스크립트] debouncing - 맨 마지막 이벤트만 캐치하기 너무 많은 이벤트가 지속적으로 발생할 시, 과부화를 일으켜 사용자 환경에 버벅거림을 줄 수 있다. 이를 막기위해 동일한 이벤트를 묶어서, 맨 마지막에 발생한 이벤트만 실행되게 만드는 기술이다. 특히 Ajax call 을 동반한 스크롤, 검색창, 버튼클릭 이벤트에 주로 쓰일 수 있겠다. (Ajax 요청을 최소화) [사용법] var temp; document.addEventListener('scroll', function() { if(temp) { clearTimeout(temp); } temp = setTimeout(function() { //type your code here }, 500); }) [간단원리] 이벤트 발생시, 먼저 tim..

[자바스크립트] Object 빈값? empty Object 확인하기 자바스크립트 객체가 비어있는지 확인하고자 할 때! 일반적인 null 값 체크로는 애매하다. 그럼 어떻게 할까? 1) Object.keys() 를 사용 [예시] var obj = {}; if(Object.keys(obj).length == 0 && obj.constructor === Object) { //type your code } Object.keys() 로 변환해서 length 를 체크하는 건 알겠는데, 왜 constructor 체크를 할까? constructor 체크를 안한다면 어떻게 될까? function constructorCheck(val) { // return Object.keys(val).length == 0 && val...

[자바스크립트] javascript Object.values() 사용하기 자바스크립트 객체를 배열로 변환해주는 메소드! 객체의 value 로만 이루어진 배열을 반환한다. [사용법] var son = { name : 'Son', age : 30, position : 'forward', team : 'Spurs' } Object.values(son); // 결과값 : // ['Son', 30, 'forward', 'Spurs'] // 응용해보기! // 'Spurs' 만 골라내고 싶다면, Array함수 중, find() 를 사용! // 화살표함수 말고 일반함수를 사용해보자 var temp = Object.keys(son).find(function(el,idx) { if(el == 'Spurs') return ..

[자바스크립트] javascript Object.keys() 사용하기 자바스크립트 객체를 배열로 변환해주는 메소드! 객체의 key 로만 이루어진 배열을 반환한다. [사용법] var son = { name : 'Son', age : 30, position : 'forward', team : 'Spurs' } Object.keys(son); // 결과값 : // ['name', 'age', 'position', 'team'] // 응용해보기! // 결과값 안에 'team' 만 골라내려면 Array함수 중, find 를 사용 var temp = Object.keys(son).find(el => el == 'team'); // temp 의 값은 'team' [간단설명] 객체의 key 값에만 접근하고 싶을 때 사..

[자바스크립트] javascript Object.entries() 사용하기 자바스크립트 객체를 배열로 변환해주는 메소드! 객체의 {key : value} 형식을 배열 형태의 [key, value] 로 변환하여 준다. [사용법] var son = { name : 'Son', age : 30, position : 'forward', team : 'Spurs' } Object.entries(son); // 결과값 : // [['name', 'Son'], ['age', 30], ['position', 'forward'], ['team', 'Spurs']] [간단설명] Object 에서는 사용할 수 없는 자바스크립트 Array 메소드를(forEach(), find(), filter()... 등) 사용하고자 할 때..

[자바스크립트] javascript Array forEach() 사용하기 배열의 모든 요소를 순회하는 메소드! 배열을 순회하는 기능만을 가진 메소드라 반환값은 없다! (undefined 로 표시) [사용법] //화살표 함수 표기법 array.forEach((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.forEach(callbackFn, thisArg); //익명함수로 표기법 array.forEach(function(element, index, array) { }, thisArg); [간단설명] array.forEach() 는 배열을 순환하면서, 모든 요소 각각에 콜백함수를 한 번씩 실행한다. [특징] 값이 존재하지 않거나, delete 된 요소는 ..

[자바스크립트] javascript every() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열의 모든 요소가 조건에 만족하는지 확인하는 메소드! 배열 요소 중, 조건에 맞지 않는 요소가 있는지 검사한다. (some() 과는 반대되는 접근방식) 결과값은 true or false 로 반환한다! [사용법] //화살표 함수 표기법 array.every((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.every(callbackFn, thisArg); //익명함수로 표기법 array.every(function(element, index, array) { }, thisArg); [간단설명] array.every() 는 배열을 순환..

[자바스크립트] javascript some() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소 중, 조건에 만족하는 요소가 최소 하나라도 있는지 검사하는 메소드! (every() 와 반대되는 접근방식) 결과값은 true or false 로 반환한다! [사용법] //화살표 함수 표기법 array.some((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.some(callbackFn, thisArg); //익명함수로 표기법 array.some(function(element, index, array) { }, thisArg); [간단설명] array.some() 은 배열을 순환하면서, 콜백함수의 조건에 "true" 인 요..

[자바스크립트] javascript filter() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소 중, 어떠한 조건에 상응하는 모든 요소를 골라내고 싶다면 가장 알맞는 함수! 단, 결과 값은 배열로 리턴한다! [사용법] //화살표 함수 표기법 array.filter((element, index, array) => { ...}); //콜백함수로 호출하는 법 array.filter(callbackFn, thisArg); //익명함수로 표기 법 array.filter(function(element, index, array) { }, thisArg); [간단설명] array.filter() 는 배열을 순환하면서 콜백함수의 조건 "true" 인 모든 요소를 새로운 배열로 반환한..