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

오늘 동기랑 이야기를 하는데, javascript의 객체와 배열에 대한 이야기가 나왔다. 이러한 상황에서 객체를 쓰는게 좋냐, 배열을 쓰는게 좋냐 라는 이야기였는데 뭔가 개발을 하면서 느낌은 오는데, 막상 입으로 하려니 바로바로 안나오는 상황이.. 그래서 한번 정리해본다. 배열(Array) vs 객체(Object) 어떤 걸 사용하는 게 좋을까? 우선 배열과 객체의 차이점에 대해 간단히만 알아보자. ( 진짜 간단히만.. ) 배열(Array)와 객체(Object)의 차이 우선 배열은 key와 value로 이루어지지 않은 나열 된 값을 의미한다. 물론 key와 value를 이룰수는 있지만, 좋은 방법은 아니기 때문에, 특정한 상황을 빼면 사용되지 않는다.. // 배열 arr을 선언 var arr = [1,2,..

결론만 말하자면 [파일명].js : 소스를 분석할 수 있도록 공백을 포함하는 개발자용 파일 [파일명].min.js : 대역폭을 보존하기 위해 기존 .js를 압축한 버전 => 공백 및 주석을 제거 (개발하기 힘듦..) 실제 운영환경에서는 min.js를 사용하는 것이 좋다. 샘플 라이브러리 비교 git에서 제공하는 sortable.js와 sortable.min.js를 비교해보자. 제이쿼리가 가장 많겠지만.. sortable.js sortable.min.js 그냥 이번에 쓸 일이 있어 git에서 sortable.js를 가져오는데 sortable.js와 sortable.min.js 2개가 보이길래 정리해보았다..

같이 일하던 선임이 Vanilla 스크립트를 가지고 XML을 JSON으로 변환하는 것을 보고 신기해서 나도 해보는 글.. 보통은 이런 작업은 라이브러리를 활용할 수 있으면 그게 베스트이다. 라이브러리를 사용할 수 있는 환경이라면 라이브러리를 사용하도록 하자. 오늘은 1. Vanilla 스크립트를 통해 XML을 JSON으로 변환하는 방법 2. 라이브러리를 활용하여 XML을 JSON으로 변환하는 방법 2가지에 대해 알아보도록 하자. 우선 XML데이터는 공공데이터포털 API를 통해 가져오도록 하겠다. 그리고 테스트 해 볼 사람은 공공데이터포털에서 인증키를 받아 아래 코드를 그대로 붙여놓고, 인증키값만 바꿔주도록 하자. 난 그냥 HTML에서 한거라, 따로 프록시서버를 태웠으니 그것도 생각하고 실행해보도록 하자...

이번에 사업을 하면서 고객이 요청을 하여 배열을 정리할 일이 생겼다. 근데 며칠전 선임이 sort함수 쓴 게 기억이 나서 갖다 써서 헛수고 하지 않고 해결한 김에 정리해본다. sort함수 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. - 출처 : MDN 기본구문 arr.sort([compareFunction]) 예제 1. 오름차순 정렬 //샘플배열 var numbers = [4, 2, 5, 1, 3]; //샘플코드 numbers.sort(function(a, b) { return a - b; }); 2_1. 개체 속성 ( 정수값으로 정렬 ) //샘플배열 va..

핵심 1. 클래스명 추가 html요소.classList.add('추가할 클래스명'); 2. 클래스명 삭제 html요소.classList.remove('제거할 클래스명'); 3. 클래스명 변경 html요소.className = [변경할 클래스명]; // 기존 클래스명은 사라지니 주의! 4. 클래스명 확인 html요소.classList.contains([존재하는지 확인 할 클래스명]); // 반환값은 boolen 연습 보통 클래스명을 통해 css로 스타일을 주는 일이 많은데.. 버튼을 클릭했을 때 색상을 바꾸거나 폰트 굵기를 두껍게 하거나 하는 경우가 대표적이다. 제이쿼리의 .css함수나 event.target으로 스타일을 줘도 상관은 없지만 ( 링크 참조 ) 보통 스타일은 css파일에 정의해놓고 각 id나..