Frontend/JS(9)
-
[js] Array 한줄로 초기화 (initialize) 하기
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 안녕하세요! 코딩하다보면 그럴 때 있지 않나요 ~ 한 줄로 코드를 끝내는 능력자이고 싶다! ㅋㅋㅋ(하지만 현실은... 벌써 몇 백줄 넘어가는 중... 🥲) 하지만 조금씩 스킬을 늘려나가다 보면 그런 날도 오겠죠?! 서론은 여기까지하고 이번에는 한 줄로 Array 초기화 하는 방법을 알아보려 합니다. 보통 배열 초기화는 아래와 같은 코드로 수행합니다. var data = []; var length = 5; // user defined length for(var i = 0; i < length; i++) { data.push(createSomeObject()); } 이런 코드를 한 줄로 끝낼 수는 ..
2021.07.17 -
[js] Event Delegation(이벤트 위임)
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 효율적인 이벤트 핸들링을 하려면 어떻게 해야할까요? 각 Dom element 마다 이벤트를 거는 것이 아니라 상위의 dom element 에 이벤트를 걸고, 이벤트가 발생한 target 을 찾아 이벤트를 핸들링하는 것입니다. 이러한 방법을 이벤트 위임(Event Delegation)이라고 합니다. 코드로 살펴봅시다! STEP 01 _ Event Delegation 예제코드 "테이블 내의 td 클릭 시 하이라이트 효과"를 주어야 하는 경우로 가정해봅니다. 1) event.target 사용 $('.table').on('click', (e) => { let target = event.target; /..
2021.07.06 -
[js] window.location 객체
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! url 관련 객체는 사용할때 마다 검색해서 조각조각 알아왔었는데 전체적으로 정리해보고자 포스팅하였습니다 :) 예제 도메인) https://dongurami0502.tistory.com:8080/post?topic=window-location#references 1. Properties properties description url example hash url 상에 존재하는 anchor 값(# 이후의 값) 반환 #references host url 의 도메인과 포트 반환 dongurami0502.tistory.com:8080 hostname url의 도메인 반환 dongurami0502.tis..
2021.06.30 -
[js] event 전파 멈추기
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! 개발하다 보면 event를 추가하는 것뿐 아니라 제거해야하는 경우도 필요하더라구요~ javascript에서 이벤트 전파를 중단하는 방법은 크게 4가지가 있습니다. event.proventDefault() 현재 이벤트의 기본 동작을 중단합니다. event.stopPropagation() 현재 이벤트가 상위로 전파되지 않도록 중단합니다. event.stopImmediatePropagetion() 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단합니다. (일반적으로 event.stopPropagation(), event.stopImmediatePropagation() ..
2021.06.24 -
[js] object to array 변환
** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다! ** 해당 글은 영문글의 번역본입니다. ES2017 부터, object to array 를 위한 3가지 기능이 제공됩니다. Array는 array를 위한 method를 제공하고 있죠! (달변가가 아니라... 쏘리 😝) Object를 array로 변환한다면, array method를 사용할 수 있겠죠 ?! yay~! 🥳 [Legacy Code] var numbers = { one: 1, two: 2, }; var keys = []; for (var number in numbers) { if (numbers.hasOwnProperty(number)) { keys.push(number); } } ke..
2021.06.23