수라의 티스토리

잡설 : 한동안 실무를 놨더니 기본개념부터 가물가물하다. 나 스스로를 위해 기초부터 다시 되짚어보고자 한다..

var는 es6 이전 변수를 정의할때 사용하는 구문

자비로운 javascript 덕분에 var는 오류가 날것 같은 상황에서도 에러를 내뱉지 않음

예를 들어.. 첫번째 케이스를 보자.

console.log(a);
var a = 0;
console.log(a);

// 결과
undefined
0

해당 코드는 일반인이 봤을땐 코드 순서대로 실행할것 같다고 판단하겠지?? java나 C++에서도 그렇게 판단할것 같다.

근데 javascript는 최초 브라우져 엔진이 코드에 접근했을때 변수나 함수 선언된 놈들을 끄집어내 메모리에 저장한다.

최상단 전역으로 올리는 행위 즉 호이스팅 한다고 표현한다.

그렇다보니 console을 실행하기 전에 변수 a를 선언한걸 먼저 호이스팅 하기 때문에 undefined가 출력된다.

이루 a를 0으로 할당하고 두번째 console을 실행할때 0의 값이 출력되는것

또는 이런 경우도 있다... 두번째 케이스.

for (var i=0; i < 5; i++) {
    console.log(i)
}
console.log(i)

// 결과
0
1
2
3
4
5

저기서 변수 i는 지역변수다. 전역에서 접근되면 안되는..

근데 보는바와 같이 접근이 가능해서 5가 출력된다.

var로 선언된 지역변수는 function에서만 보장된다는 블라블라....

이걸 보완하고자 나온게 let

첫번째 케이스를 let으로 바꿔보자

console.log(a);
let a = 0;
console.log(a);

// 결과
Uncaught ReferenceError: a is not defined at <anonymous>

에러가 난다. a는 아직 정의되지 않았다고..

var와 마찬가지로로 호이스팅은 한다. 대신 접근할 수 없는 TDZ라는 곳에 임시저장된 뒤 선언할때 접근 가능한 저장소로 옮겨진다고 한다.

for (let j=0; j < 5; j++) {
    console.log(j)
}
console.log(j)

// 결과
0
1
2
3
4
Uncaught ReferenceError: j is not defined at <anonymous>

위와 마찬가지 에러가 난다.

이걸 통해 var와 let의 차이.. 그리고 호이스팅이 뭔지 개념에 대해 이해해보자.

[출처]http://naiyumie.inour.net/archives/2471

Internet Explorer -인터넷 익스플로러

Selector Hacks

/* IE 6 and below */
* html .selector  {}
.suckyie6.selector {} /* .suckyie6 can be any unused class */

/* IE 7 and below */
.selector, {}

/* IE 7 */
*:first-child+html .selector {}
.selector, x:-IE7 {}
*+html .selector {}

/* Everything but IE 6 */
html > body .selector {}

/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}

/* Everything but IE 6/7/8 */
:root *> .selector {}
body:last-child .selector {}
body:nth-of-type(1) .selector {}
body:first-of-type .selector {}
Property ⁄ Value Hacks

/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }

/* IE 6/7 – any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* … */

/* IE 6/7 – acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */

/* IE 8/9 */
.selector { color: blue\0/; }
/* must go at the END of all rules */

/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }

/* Everything but IE 6 */
.selector { color/**/: blue; }

 Media Query Hacks

/* IE 6/7 */
@media screen\9 {}

/* IE 6/7/8 */
@media \0screen\,screen\9 {}

/* IE 8 */
@media \0screen {}

/* IE 8/9/10 & Opera */
@media screen\0 {}

/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {}

/* IE 9/10 */
@media screen and (min-width:0\0) {}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {}

 JavaScript Hacks

/* IE <= 8 */
var isIE = ‘\v’==’v’;

/* IE 6 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 6]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 7 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 7]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;
navigator.appVersion.indexOf(“MSIE 7.”)!=-1

/* IE 8 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 8]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 9 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 9]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 10 */
var isIE = eval(“/*@cc_on!@*/false”) && document.documentMode === 10;

/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

Firefox -파이어폭스

Selector Hacks

/* Firefox 1.5 */
body:empty .selector {}

/* Firefox 2+ */
.selector, x:-moz-any-link {}

/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {}

/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}

Media Query Hacks

/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {}

/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {}

/* Firefox 4+ */
@media screen and (min–moz-device-pixel-ratio:0) {}

 JavaScript Hacks

/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 – 13 */
var isFF = !!window.globalStorage;

/* Firefox 2/3 */
var isFF = /a/[-1]==’a’;

/* Firefox 3 */
var isFF = (function x(){})[-5]==’x’;
Miscellaneous

/* Firefox 3+ */
@-moz-document url-prefix() {}

Chrome -크롬

 Selector Hacks
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}

 Media Query Hacks
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

 JavaScript Hacks
/* Chrome */
var isChrome = !!window.chrome;

Safari -사파리

Selector Hacks

/* Safari 2/3 */
html[xmlns*=””] body:last-child .selector {}
html[xmlns*=””]:root .selector  {}

/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=””] .selector {}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}

 Media Query Hacks
/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

 JavaScript Hacks
/* Safari */
var isSafari = /a/.__proto__==’//’;

Opera -오페라

 Selector Hacks

/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=””] .selector {}

/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}

 Media Query Hacks

/* Opera 7 */
@media all and (min-width: 0px){}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {}

/* Opera, IE 8/9/10 */
@media screen {}

 JavaScript Hacks
/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);

/* Opera 12- */
var isOpera = !!window.opera;

/* OS & 버젼 체크 */

function getOSVer() {
    var mobileOS;    // will either be iOS, Android or unknown
    var mobileOSver; // this is a string, use Number(mobileOSver) to convert
    var uaindex;
    // determine OS
    if ( agentString.match(/iPad/i) || agentString.match(/iPhone/i) ) {
        mobileOS = 'iOS';
        uaindex  = agentString.indexOf( 'OS ' );
    } else if ( agentString.match(/Android/i) ) {
        mobileOS = 'Android';
        uaindex  = agentString.indexOf( 'Android ' );
    } else {
        mobileOS = 'unknown';
    }
    // determine version
    if ( mobileOS === 'iOS'  &&  uaindex > -1 ) {
        mobileOSver = agentString.substr( uaindex + 3, 1 ).replace( '_', '.' );
    } else if ( mobileOS === 'Android'  &&  uaindex > -1 ) {
        mobileOSver = agentString.substr( uaindex + 8, 1 );
    } else {
        mobileOSver = 'unknown';
    }
    if (mobileOS === 'iOS') {
        $("body").addClass(mobileOS+mobileOSver);
    } else if (mobileOS === 'Android') {
        $("body").addClass(mobileOS+mobileOSver);
    }
}

디바이스별 웹뷰 해상도 case별로 체크한 수치.

*표는 세로모드의 width

카페 메니저 한스 입니다. 

hans 입니다. 연말에 일이 많아서 플레이 시간이 적다보니

로컬 랭킹이 많이 떨어졌네요 --; (로컬 10등은 유지해야 하는데 20등이라니 ㄷㄷㄷ)

그래도 공략법을 소흘할 수는 없죠 .. 클랜원들의 실력 향상이 항상 뿌듯한 한스입니다. 

라바 벌미 공략에서 제일 중요한 맵 보는 법에 대해서 설명드렸죠?

http://cafe.naver.com/koreabros/6396  그 다음에 중요한 것은 위저드 타워와 인페르노 타워의 위치

(사실 맵 보는 법의 확장선상에 있습니다.)

의외로(?) .. 라벌미의 패배가 발생하는 경우는 ... 위저드 타워 입니다.  (캐슬 위저드도 무섭죠 ㅋ)

위저드 타워에 대해서 잘 모르시는 분들이 계셔서 .. 다시 말씀드립니다.  (고수들도 이걸 신경안쓰시고 들어가시는 경우가 있습니다.) 위저드 타워  1.3초에 한번 공격을 하며 62.4 가 한방 공격력입니다. 

벌룬의 체력이 545 입니다. 9방 맞으면 벌룬이 폭삭하죠. (잉, 그렇게 많이 맞아야 해?)

위저드 타워의 경우 7칸이 공격 가능 칸수 입니다. 잘 보시면, 위타 건물 옆으로 6칸이 공격 가능 범위입니다.

벽이 한칸이니 ... 위타의 경우 6칸을 잘봐야 합니다. 

인페의 경우 9칸입니다. 

인페의 경우는 ... 얼음 마법을 쓰기 때문에, 사실 정확하게 데미지 계산을 안하시는 경우가 있는데

인페의 초당 공격력은 42이고, 5개의 멀티 셀렉을 합니다. (싱글은 설명하지 않겠습니다. 벌룬에게 큰 의미가 없어서)

(추가로, 인페르노 타워의 싱글모드는 5초후 1400 데미지이기 때문에, 4초까지는 140 데미지로 약하기 때문에 4초쯤 얼리는 것이 좋습니다. )

인페가 42, 위타가 63 합치면 100이 넘는 데미지가 들어갑니다. 

위타 하나랑 인페 하나에 동시에 벌룬때가 걸리면 ... 5초면 ... 벌룬때가 사라집니다. 

그런데, 다른 디펜도 같이 공격을 하니, 보통 3초 정도면 사라집니다.

거기에 173 짜리 빨간 풍선이 걸리면, 3초면 사라집니다. 

그러기 때문에 중앙에 벌룬이 진입할때 .. .위타 옆에 인페 멀티가 걸리고, 빨풍을 두방 맞으면 2초에 벌룬때가 사라집니다. 

가끔 영상 보시면, 벌룬때가 사라지는 것이 .. 빨풍 (빨간 대공폭탄) 2개에 뭉텅이 맞고 ... 인페 멀티랑 위타에 맞으면 몽땅 사라지는 것을 보실 수 있습니다. 

자, 그러면 어떻게 해야 하느냐?

위저트 타워의 6칸 범위안에 ... 라바가 위치해서, 에어 디펜을 공격하고 있는 상황에 ...

위저드 타워를 벌미가 덮치면 .. 이깁니다. 

자. .. 그럼 진영을 하나 살펴볼까요 ... 

우리 클랜의 ... 지주이신 .. 선민형님의 맵을 보도록 합시다. 

--; 요즘 바쁘셔서, 게임을 안하시고

라바 나온지 두달이 넘었는데 아직도, 맵을 못바꾸셔서 그렇기 한데 ... (죄송합니다. 형님. 사랑합니다. ^^)

위아래, 위위 아래 (제가 나이는 먹었지만 트랜디 하잖아요 ㅋ) ... 모두 ...  위저드 타워가 ... 에어디펜의 5칸 거리에 있습니다.

이러면, 라바가 위저드 타워의 시선을 가지고 있는 상태에서 ... 벌룬이 위타를 부십니다. 

이럴 경우 동시에 2개의 위타를 처리할 수 있으니

ㅅ 자 드랍을 하는 것입니다. 

ㅅ 자 드랍은 다이아몬드 진영에 무조건 하는 것이 아니라 ... 위타가 에어디펜 근처에 있어서, 라바가 위타 시선을 가질때만

합니다. 그게 2개고, 라바가 2개니까 .. 그렇게 하는 것입니다. 

라바를 3개 가지고 가는 것이 안정적이라는 분들도 요즘 나오고 계신데 .. 그 경우는 다음 전략에서 다루겠습니다. 

감사합니다.

출처 : http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html

jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다.

개요

$(".foo").bind("click", handler);
$(".foo").on("click", handler);

$("#container").delegate(".foo", "click", handler);
$("#container").on("click", ".foo", handler);

$(".foo").live("click", handler);
$(document).on("click", ".foo", handler);

.on()을 사용해야 하는 이유

$(".foo").on("change blur", handler);

$(".foo").on({ 
  "change" : function(){...},
  "blur" : function(){...} 
});

$("#container") on ( { 
  "change" : function(){...},
  "blur" : function(){...} 
}, ".foo");

출처 : http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167
https://docs.google.com/document/d/17iR_7DstddOKDQsdut7DNbc6y3b7CgsA7-qxsWUwo0g/edit?pli=1

출처 : http://rocabilly.tistory.com/27

[jQuery] Ajax 방법

- 각 Ajax 방식을 호출하는 방법

1. $.post() 방식

- 서버에 데이터를 HTTP POST 방식으로 전송한 후 서버측 응답 받을 때 사용

[형식]

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

[$.ajax 로 표현]

[사용예]

2. $.get() 방식

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답 받을 때 사용

[형식]

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

[$.ajax 로 표현]

[사용예]

3. $.getJSON() 방식

- 서버에 데이터를 HTTP GET 방식으로 전송한 후 서버측 응답을 JSON 형식으로 받을때 사용 

[형식]

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수

[$.ajax 로 표현]

[사용예]

4. $.ajax() 방식

- 서버에 데이터를 HTTP POST,GET,JSON 모든 방식 전송 가능한 통합적인 함수

- 다양한 Parameter 존재

[형식]

jQuery.ajax( url [, settings] ) [ 1.5 이상버젼 ] ,jQuery.ajax( settings ) [ 1.0 이상버젼 ]

- url : 요청 Url

- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )

[사용예]

4.1 $.ajaxSetup()

- 공통적인 기본 ajax 요청을 미리 설정함

[형식]

jQuery.ajaxSetup( options )

- optional : default Ajax 요청의 설정값 ( key/value )

[사용예]

5. $.load() 방식

- 외부 컨텐츠 가져올때 사용

[형식]

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

- url : 요청 Url

- data : 요청과 함께 서버에 보내는 string 또는 map

- complete(responseText, textStatus, XMLHttpRequest) : 요청이 완료될때 실행되는 callback 함수

[사용예]