Knowledge/javascript
-
데이터 바인딩을 도와주는 handlebars.js 사용법Knowledge/javascript 2019. 8. 26. 23:50
ajax로 가져온 데이터를 동적으로 추가해야 하는 상황은 상당히 자주 발생한다. Handlebars.js는 이런 상황을 좀 더 쉽게 처리할 수 있도록 도와주는 라이브러리.. 라는데 사실 익숙하지 않으면 되려 더 어렵다. 필자도 이번에 처음 써보면서 많이 헤맸는데 헤매면서 알게된, 진작 알았으면 좋았을 만한 것들을 정리해두려 한다. - 기본 사용법 기본사용법은 다음과 같다. 1. 템플레이팅할 html을 세팅한다. 이때 데이터 바인딩 시킬 부분은 {{바인딩시킬 데이터의 프로퍼티명}} 의 형태로 적는다. 2. htmlTemplate을 가져온후 Handlebars로 compile 한다. 3. 컴파일한 템플릿에 데이터를 집어넣는다. 이 때 리턴값은 html로 나온다. 4. 리턴받은 html을 target에 inn..
-
setTimeout에서 this사용하는 방법!Knowledge/javascript 2019. 8. 26. 13:35
자바스크립트 코드를 객체 리터럴 패턴으로 정리하던 중 이상한 현상이 발생했다. 객체안에 무한슬라이드의 다음 슬라이드 가져오는 함수를 집어넣었는데 setTimeout안에서는 객체내의 프로퍼티에 this로 접근할 수 없었던 것 말로하자니 두루 뭉술해서 간략화한 코드를 붙여보자면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var slideObj = { // 이미지 UL imageUl : document.querySelector("ul"), getNextSlide : function (){ setTimeout(function() { // 201초 후( 넘어가는 듯한 트랜지션 효과가 모두 끝난 후 )에 xPosition 적용 this.imageUl.style.transition = "0s";..
-
CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드Knowledge/javascript 2019. 8. 13. 18:30
일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 알아보기 좋게 배경색과 border를 좀 추가해서 준비했다 코드로 보면 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 슬라이드 무한 슬라이드 body * { height: 50px; } .slide_box{ width: 200px; position: rela..
-
script 태그 위치와 onload, DOMContentLoaded, readyKnowledge/javascript 2019. 8. 13. 15:10
script는 아무 데나 넣을 수 있다. 그러나 아무 데나 놔서는 안된다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded var target = document.querySelector('div'); console.log(target); 시작 중간 끝 이 코드는 아래와 같은 결과가 나온다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded 시작 var target = document.querySelector('div'); console.log(target); 중간 끝 이 코드는 아래와 같은 결과가 나오고.. 뻔한 중간은 건너뛰고 script를 바로 위에 위치시키면 그제서야 비로소 의도한 결과를 얻을 수 있..
-
자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 )Knowledge/javascript 2019. 8. 12. 21:51
먼저 자바스크립트로 이벤트를 걸기 위해선 어떻게 해야할까? querySelector나 getElementBy를 활용해 이벤트를 걸 대상을 찾고 addEventListener를 활용해 원하는 이벤트를 걸어주면 된다 코드로 보면 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 자바스크립트 이벤트 #target { width: 100px; height: 100px; background: blue; }; document.querySelector("#target").addEventListener("click",function(){ alert("테스트"); }); 그렇다면 같은 클래스명을 공유하는 여러개의 엘리먼트에 한번에 이벤트를 ..