addEventListener 웹API로 부모자식에게 이벤트를 추가하면 자식노드들에게도 해당 이벤트가 전파된다. 만약 나는 부모노드에만 클릭 이벤트를 추가하고 싶어서 addEventListener를 사용했는데, 자식 노드들을 클릭해도 같은 함수가 호출 된다면 당황스러울 것이다. 그래서 오늘은 addEventListener의 이벤트 전파를 막는 방법에 대해서 알아보자 addEventListener의 이벤트 전파 막는 방법 기본문법 // 여기서 item은 addEventListener로 이벤트를 추가하고자 하는 타겟을 의미함 if(item !== event.target) return; 어려울 것 없다. 그냥 addEventListener로 호출하고자 하는 함수안에 밑의 코드를 넣어주기만 하면 된다. 대충 보..

문자열이나, 배열에서 특정 값이 있는지 확인 할 때 Includes도 사용하는데, IndexOf도 자주 사용했었다. 정확히 말하면 IndexOf는 true/false를 리턴하는 게 아닌, 값의 위치값을 리턴해주는데.. 값이 없으면 -1을 값이 있으면 0이상을 반환해주기 때문에, -1이 리턴되면 false라고 판단하여 사용을 했었었다.. 함수의 용도는 다르지만, 그때그때 사용자의 방식에 따라 달라지는 것 같다.. IndexOf()란? ----------------------------------------------------------------------------------------------------------------------------------- 문자열 및 배열에 특정값이 있으면 해당 ..

이번에 그라데이션을 정리할 때 쓴 코드인데, 외울 필요도 없고 왜 이렇게 되는 지 이해 할 필요도 없다. 그냥 아래거 갖다쓰면 된다. 물론 공부하고 싶은 사람은 공부해도 상관 없지만.. 여기서는 그냥 갖다 쓰기로 하자. 1. RGB코드 -> HSL코드 rgb2hsl = function(color) { var r = color[0]/255; var g = color[1]/255; var b = color[2]/255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = (l ..

javascript를 쓰다보면 배열을 합치거나, 새로운 속성을 추가하는 일이 많은데, 그때 많이 쓰는게 바로 push와 concat 함수이다. 자주 쓰지만, 설명해보라고 하면 어버버.. 할 것 같다. 그래서 정리해본다. ============================================================================ 가장 큰 차이점은 아래와 같다. 1. push는 기존 배열에 원소를 추가한 뒤 총 길이를 리턴한다. 2. concat은 기존 배열에 원소를 추가한 뒤 새로운 배열을 리턴한다. 즉, push는 기존 배열의 데이터가 수정되고, concat은 새로운 배열을 리턴하기 때문에 기존 데이터는 변경되지 않는다. 사용법은 아래와 같이 사용한다. 1. push : 결과..

오늘은 javascript에서 지원하는 flat 함수를 정리해보겠다. 카카오API를 가져오는 공부를 하는데.. 주소를 가져올 때 배열을 3개, 4개 씩 가져오는 것이었다.. Vue의 v-for 디렉티브를 이용할 때는 배열이 1개인 게 뿌려주기 쉽기 때문에, 배열을 합쳐줘야 하는데... 그냥 push나 concat을 이용하여 합쳐주니 다음과 같은 모습이 되었다.. 우선 내가 배열을 3개 만들었고, resultArray라는 배열을 만들어 그 안에 push해주고 있다. 그런데 resultArray에는 다음과 같이 담겼다.. 즉 배열안에 배열이 들어갔다는 말이다. 나는 배열안에 배열을 넣는 게 아닌, 배열안에 있는 객체들을 resultArray에 넣고 싶은데... 그때 사용 할 수 있는 게 flat함수이다. 이..