dev in Serengeti

[자바스크립트] page load 이후 script 실행하기 - onload() 와 ready() 사용하기 자바스크립트와 제이쿼리를 섞어쓰다보면 헷갈릴 때가 있다. 차이점과 사용법을 정리해보자 onload() 와 $.ready() 의 차이점은? onload() 는 페이지 내 모든 content 가 load 되면 실행된다 (DOM, image, script 등 모두를 포함) $.ready() 는 반면에 DOM (HTML Structure) 만 load 되면 실행된다 (image, script 등을 기다리지 않음) => 결과적으로 실행시점은 $.ready() 가 훨씬 빠르다 [사용법] 1) onload() window.onload = function() { //type your code alert('모든 c..

[자바스크립트] 기본형과 참조형의 차이 / deep copy & shallow copy [요점정리] 기본형은 변수를 할당한 후, 해당 저장소에 값을 저장하며, 참조형은 변수를 할당한 후, 해당 저장소에 주소를 저장한다. 이런 차이점으로 인하여, 기본형은 복사 후 원본값이 변경될 경우, 복사본의 값은 변하지 않고 그대로인 반면, 참조형은 복사 후 원본값이 변경될 경우, 서로가 참조하고 있는 주소값이 같은므로, 원본값과 복사본의 값이 둘다 변경된다. 여기서 깊은복사(deep copy) 와 얕은복사(shallow copy)가 구별된다. [데이터의 구조] 1) 기본형(primitive type) : String, Number, Boolean, Null, Undefined, Symbols 기본형은 하나의 저장소가..

[자바스크립트] 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() 는 배열을 순환..