Javascript Tip

변수 키워드는 var 대신 const, let 을 사용하자

전통적인 자바스크립트 변수인 var 대신에 let, const 등을 사용하자(block Scope) var(function scope) 은 쓸 이유가 없으며, 오히려 var을 let, const 등과 같이 사용하면 문제가 생길 수 있다. 기본적으로 const를 사용하며, 값이 바뀌는 변수일 경우 let 을 사용한다.

 

직관적이고 편리한 querySelector를 사용하자

CSS 문법에 대한 이해가 있다면 쿼리 셀렉터를 사용하는 편이 훨씬 직관적이다. 같은 문법을 사용하고 있고, IE 9(8까지도?)도 지원하므로 쓰지 않을 이유가 없다.

 

HTML5 커스터마이징 속성인 'data-'

HTML5 커스터마이징 속성인 data- 를 통해서 엘리먼트에 사용자 정의 속성을 추가할 수 있다. data- 의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있다. Ex) container.setAttribute('data-role', 'ilbuni-wrapper');

 

새롭게 알게 된 Load Event, 그렇지만 더 좋은 방법 (function{})();

window.addEventListener('load', function() {}); => 이미지나 영상 파일이 500mb일지라도 기다려야 한다(문서리소스 전부가 로드될 때까지) window.addEventListener('DOMContentLoaded', function() {}); => HTML 골격 구조만 로드가 끝나면 실행한다는 뜻(IE9부터도 지원을 함!)) 제이쿼리 로드와 같음. 문서 head 에 JS코드가 올 경우 미리 로드하여 DOM 을 읽어들이지 못하는 문제를 방지하기 위해서 Load 이벤트를 작성한다. ps. 위의 두 가지 load 이벤트를 활용한 방법은 전역공간에 변수를 생성하지 않는다.

 

전역변수의 사용을 지양하자!

전역변수를 최소화하자 전역공간 입장에서 보면 일반적인 함수선언도 함수표현식과 마찬가지이므로(함수 또한 전역 공간에 변수를 통해 자리를 잡고 있다는 뜻) 함수를 통해 묶어서 사용해주는 편이 더 좋다. 자바스크립트 파일이 100개 일 때 다른 개발자가 동일한 전역 변수를 사용하게 되면 충돌할 위험이 있으므로 전역변수의 사용을 피하는 것이 중요하다 익명함수: (function(){})() 함수선언문: 일반적인 방식의 함수선언 function ham(){} 함수표현식: 함수를 변수에 담아놓은 상태

 

this와 이벤트 객체

1. this 와 currentTarget 타겟은 addEventListener의 이벤트가 등록되어 있는 대상만을 가리킨다. 2. 이벤트 객체의 target은 대상을 가리킨다. e.target은 클릭한 부분을 잡아준다. (1번과의 차이점 이해하기)

 

이벤트 위임

상호작용을 위한 가장 중요한 기본은 이벤트 처리인데, 이를 위해서 addEventListener를 많이 사용하면 메모리를 많이 잡아먹어서 성능이 안 좋아진다. 이러한 문제는 이벤트 위임을 통해서 해결할 수 있다. 이벤트 위임은 기본적인 클릭 이벤트를 다룰 때 좋은 방식이다. 각각의 버튼과 기능에 모두 addEventListener 를 사용할 필요 없이 모두를 감싸는 컨테이너 하나에만 addEventListener 를 걸어주면 되므로 코드의 양을 줄일 수 있고, 효율적이다. (소셜 미디어 서비스 가 로드될 때마다 새롭게 그리는 것이 아니라 요소를 담는 컨테이너에 addEventListener 를 건다. ) Tip. if(e.target.classList.contains('ilbuni')) 을 통해서 사용자 입력이 요소를 클릭했을 때 해당 요소가 특정 클래스를 가지고 있는지 확인할 수 있다. 위의 조건문은 true false 불리언 값으로 해당 클래스를 가지고 있는지 판단을 해준다. 오버 플로우