웹30 PWA 프로그레시브웹앱 PWA 공부 순서 0. 샘플 사이트 테스트해보기https://www.pokedex.org 1. 잘 정리된 ppt및 블로그를 보면서 감을 잡는다.프로그레시브 웹앱이란? - Progressive Web Appshttps://www.slideshare.net/GihyoJoshuaJang/the-future-of-web-progressive-web-app현실적 PWAhttps://www.slideshare.net/netil/pwa-653788692018년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScripthttps://d2.naver.com/helloworld/5644368서비스 워커(Service Worker) 정체가 뭐니?https://b.limminho.com/archives/1384서.. 2018. 7. 19. 날짜 함수 function getDate() { var d = new Date(), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = '' + d.getFullYear(), hh = '' + d.getHours(), mm = '' + d.getMinutes(), ss = '' + d.getSeconds() ; if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; if (hh.length < 2) hh = '0' + hh; if (mm.length < 2) mm = '0' + mm; if (ss.length < 2) ss = '0' + ss; return [year.. 2018. 7. 5. vue에서의 this vue를 공부하면서 다음과 같은 설명글을 보았다. 왜 this가 vm 자신인가? 라는 의문이 생김.출처: https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/ var vm = new Vue({ data: { a: 1 }, created: function () { // this 는 vm 을 가리킴 console.log('a is: ' + this.a) } }) 실제로 구성해보니 정말 그랬더라. /* 방법1*/function A(){ console.log(this);}new A(); // this는 A자신A(); // this는 Window /* 방법2*/function A(args){ args.c();}new A({ .. 2018. 6. 13. chrome console 기능 1제이쿼리가 없더라도, 개발자 콘솔을 통해서 이와 같은 작업을 할 수 있다. $(‘tagName’) $(‘.class’) $(‘#id’)와 $(‘.class #id’)는 document.querySelector(‘ ‘)와 같다. 이것을 실행하면 매치되는 DOM에서 첫번째 엘리먼트를 리턴한다. 2브라우저 editdocument.body.contentEditable=true 3이벤트 찾기var obj = getEventListeners($('selector')) 4이벤트 모니터링monitorEvents($(‘selector’))unmonitorEvents($(‘selector’)) 5타이머console.time('myTime'); // 타이머(myTime)를 시작한다.console.timeEnd('myTim.. 2018. 5. 22. NaN !== NaN // true Infinity == Infinity Infinity === Infinity null == null null === null undefined == undefined undefined === undefined // false NaN == NaN NaN === NaN -- // false isFinite(Infinity) isFinite(-Infinity) // true isNaN(NaN) 2018. 5. 22. typeof, instanceof typeof "string"// "string" typeof 123// "number" typeof 1.2// "number" typeof 1/0// NaN?? typeof 할때 계산은 미리 하고 진행하자. 이상하다. typeof (1/0)// "number"?? typeof 0/1// NaN?? typeof (0/1)// "number"?? 1/0// Infinity typeof Infinity// "number" typeof false// "boolean" typeof afssddfd// "undefined" typeof null// "object"!!! typeof []// "object" typeof new Array("12")// "object" typeof {}// "object" typeof.. 2018. 5. 20. setTimeout 과 this function fn1(){ console.log("this is window: " + this); } var obj2 = { name : "obj2Name" , age : 21 , fn2 : function(){ console.log("this is obj2: " + this); } , fn3 : function(){ this.age = this.age + 2; console.log("this is 5 " + this); console.log("obj2.age 5==" + obj2.age); } , fn4 : function(){ // 정상 console.log("this is obj2: " + this); this.age = this.age + 1; console.log("obj2.age==" + o.. 2018. 5. 19. css display : block 과 inline, ( inline-block 은 div에 float:left를 더한 효과 ) block : p, divinline : a, span inline방식은 width, height 적용되지 않는다. (display:block으로 변경해야 한다.)width란 border를 제외한 content의 실제 크기이다.> box-sizing:content-box// 전체 크기(width등)를 border 제외해서 계산> box-sizing:border-box // 전체 크기(width등)를 border 포함해서 계산 -> 계산하기 편함.> *{box-sizing:border-box}>> *{ } 전체선택자는 성능 이슈가 있다. font, color 속성은 하위에 상속된다. 마.. 2018. 5. 2. 이전 1 2 3 4 다음