Bang's

알고있으면 좋은 Javascript Tip✨ clientWidth & clientHeight JS에서 HTML 요소의 크기를 가져와서 계산하는 경우 사용되고 있다. margin 값과 border 값이 제외된, padding 값까지만 적용된 내부의 실제 크기를 가져온다. export default function isPoiAlarmCount(){ let $iconList = document.querySelectorAll('.icon'); let $poiContainer = document.querySelector("#poi-container"); $iconList.forEach((data) => { const $selectIcon = e.target; const $selectId = Number($sele..

알고있으면 좋은 Javascript Tip✨ sort() 자바스크립트에서 배열의 요소들을 정렬하기 위해 사용한다. 오름차순 또는 내림차순 으로 정렬할 수 있다. 기본 값은 오름차순이다. arr.sort([compareFunction]) // compareFunction 함수의 작동 방식은? compareFunction(a, b)이 0보다 작은 값을 반환하면 a를 b보다 앞에 위치하게 된다. compareFunction(a, b)이 0을 반환하면 a와 b의 순서는 바뀌지 않는다. compareFunction(a, b)이 0보다 큰 값을 반환하면 b를 a보다 앞에 위치하게 된다. compareFunction (선택사항) : 정렬 순서를 지정하는 함수이며, 이 함수가 제공되지 않으면 기본적으로 배열의 요소들이..

알고있으면 좋은 Javascript Tip✨ find() 자바스크립트에서 for문의 남용을 막기 위해 만들어낸 배열함수 이다. 배열 요소 중, 어떠한 조건에 맞는 첫번째 요소만 골라내고 싶다면 가장 알맞은 함수이다. 만약 조건에 만족하는 요소가 없다면 undefined 를 return 한다. 배열을 순환하면서 조건에 맞는 요소를 찾는 순간 순환을 멈추고 즉시 값을 반환한다. // 화살표 함수 표기법) array.find((element, index, array) => { ... }); // 콜백함수로 호출하는 법) array.find(callbackFn, thisArg); // 익명함수로 표기법) array.find(function(element, index, array) { }, thisArg); ca..

알고있으면 좋은 Javascript Tip✨ append() 컨텐츠를 선택 요소 내부의 끝 부분에서 삽입한다. Node 객체로 자식 요소를 설정할 수 있고, text를 사용할 수 있다. 쉽게 말해 append()는 선택한 엘리먼트의 제일 마지막에 넣어준다. (기존 내용이 있다면 그 뒤에) 예시) 아래와 같은 HTML 요소가 있다면? 첫 번째 아이템 두 번째 아이템 let list = document.querySelector('#list'); list.append('새로 추가된 아이템'); // 결과) 첫 번째 아이템 두 번째 아이템 새로 추가된 아이템 prepend() 컨텐츠를 선택 요소 내부의 시작 부분에서 삽입한다. 쉽게 말해 prepend()는 선택한 엘리먼트의 제일 첫번째로 넣어준다. (기존의 내..

알고있으면 좋은 Javascript Tip✨ createElement() 자바스크립트를 통해 HTML element 를 요소를 만들어 추가 할 수 있다. 요소의 태그 이름을 매개변수로 받아 해당 노드로 생성한다. // 기본 문법) document.createElement(tagName); // 예시) div 엘리먼트를 생성하는 경우라면? let example = document.createElement("div"); tagName : 필수 매개변수이다. 생성할 요소의 태그를 지정하는 문자열 타입의 매개변수이다. 요소를 만들기만해서는 사용할 수 없으며, 다른요소에 집어넣을 수 있도록 append, prepend, after, before 메서드를 사용한다.