2014년 1월 21일 화요일
자바스크립트 인자값 전달
<script>
o = {
"h" : 3
};
function obj(v){
v.h = 4;
}
obj(o); //4
alert(o.h); //객체를 전달하면 참조값을 전달함
o1 = "3";
function str(v){
v = 4;
}
alert(o1); //3
//원시데이터(number, string, undefined) 등을 전달하면 원본을 복사함
</script>
2014년 1월 20일 월요일
국민, 롯데, 농협카드 개인정보 유출
국민, 롯데, 농협카드 개인정보 유출
이미 이전부터 유출 사실확인하고 수사 착수 후 검거까지 완료
2013년 6월 경에 카드부정사용방지시스템 고도화 과정에서 코리아크레딧뷰 개발담당자가 유출함.
원본파일 압수조치
비밀번호, CVC는 노출되지 않음
보이스피싱이나 스미싱, 불법문자에 활용될 소지가 높음
금번의 문제는 인적보안의 문제가 큼
이미 이전부터 유출 사실확인하고 수사 착수 후 검거까지 완료
2013년 6월 경에 카드부정사용방지시스템 고도화 과정에서 코리아크레딧뷰 개발담당자가 유출함.
원본파일 압수조치
비밀번호, CVC는 노출되지 않음
보이스피싱이나 스미싱, 불법문자에 활용될 소지가 높음
금번의 문제는 인적보안의 문제가 큼
2014년 1월 19일 일요일
parseInt와 Number의 차이
parseInt 는 기본적으로 ECMA 3에서 8진수로 표현 꼭 parseInt("09",10)으로 십진수 표현을 해야됨
ex> parseInt("09") //값없음
ex> parseInt("09",10) //9
Number은 그냥 해도 됨
ex> Number("09") // 9
Number이 더 빠름, parseInt는 말 그대로 파싱을 함 더 느릴수 밖에 없음.
하지만 parseInt는
parseInt("09 hi",10) //9
이렇게 문자열이 있어도 숫자를 얻을수 있다.
** 이 함수가 그리 뛰어난건 아니다. hi 09하면 NaN이 된다.
ex> parseInt("09") //값없음
ex> parseInt("09",10) //9
Number은 그냥 해도 됨
ex> Number("09") // 9
Number이 더 빠름, parseInt는 말 그대로 파싱을 함 더 느릴수 밖에 없음.
하지만 parseInt는
parseInt("09 hi",10) //9
이렇게 문자열이 있어도 숫자를 얻을수 있다.
** 이 함수가 그리 뛰어난건 아니다. hi 09하면 NaN이 된다.
배열, for , while
// 유사배열
var a = {
"0" : "00",
"1" : "11",
"length" : 2
};
alert(b = Array.prototype.join.call(a));
// 정순 루프가 아니면 --를 해서 0으로 끝내는게 비교해서 값을 빠져나가는것보다 성능상 이득이 있음
var arr = [1,2,3,4], b =0 ,a = arr.length;
for(a; a--;){
b += arr[a];
}
alert(b);
a = arr.length;
while(a--){
b += arr[a];
}
alert(b);
closure 정리
//자바스크립트의 함수의 가비지컬랙터는 우선순위가 낮음
function plus(a,b){
var hap = a+b;
return function(c){
return hap += c||0;
};
} //참조된 hap은 가비지컬렉팅 되지 않고 계속 살아있음
var r = plus(3,4);
alert(r()); //7
alert(r(3)); //10
//클로저 활용1
//1.setTimeout 함수 인자 제공
//본래 setTimeout은 function(){} 이런식으로 나와서 인자를 전달 할수 없음 하지만 이런식으로 클로저 활용하면 인자를 전달할수 있음.
//밖에서 참조를 해서 인자를 줄수 있긴 하다. 하지만 실제 함수가 호출 될 당시에는 줄 수 없다.
function callLater(a,b,c){
return (function(){
a[b] = c;
});
}
window.onload = function(){
var funcRef = callLater(document.body.style,"background","yellow");
setTimeout(funcRef,500);
};
//2. 외부에 노출되지 않음
var div = (function(){
var buffar = ["<div>","","</div>"];
return (function(contents){
buffar[1] = contents;
return buffar.join("");
});
})();
alert(div("a"));
//클로저는 메모리 누수 문제가 생길수 있음. 내가 모르는 사이에무언가에서 계속 메모리가 생성되어 가비지 컬렉팅되지 않는 현상이 발생 할 수 있음.
//특히 일반적인 것은 생관이 없는데 host객체들 (window, document, activeX 객체 같은 경우 특히 심함) 객체의 원형을 참조 하면, 브라우저가 종료 될때까지 해지가 되지 않는다. 일반적인 객체들은 1->2->3->1이 참조 되면 가비지 컬렉션 대상이 되지만 dom노드 등 호스트 객체들은 원형을 참조 하면 해지를 하지 못한다.
스큐어모피즘, 플랫, 미니멀리즘
* 알아두자
# 타이포(typo) : 서체
- 타이포디자인 -> 서체디자인
# 픽토그램(pictogram) : 그림문자
# 메타포(metaphor) : 은유, 어떤 것이 떠오름
# 리얼메타포(real-life metaphor) : 실세계 모습과 현상, 사물의 형태 재현
스큐어모피즘(skeuomorphism), 스큐어모프(skeuomorph)
- 도구 본래의 모양 형태를 그대로 따라가는 방식
-> 원래 그렇게 생기거나 그렇게 작동해야 할 이유가 있지만, 실질적으로 그럴 필요까진 없다. 닮았다고 스큐어모피즘이 성립되는건 아니다. 지나치게 범위가 넓게 쓰임.
-> 근래들어 ios나 ms metro 디자인이스큐어모피즘 논란이 있음
-> 스큐어모피즘은 사용자에게 아날로그적 환경을 제공 함으로써 높은 사용성, 학습성에 좀더 많은 이득을 줌
-> 지나치게 현실과 같아 질 경우 창의적인 결과물을 낳긴 힘듬
플랫(flat)
-> 2D로 디자인, 효과를 많이 주지 않음. 군더더기 없는 디자인.
-> 타이포그라피와 픽토그램에 집중, 오직 색감에 집중 할 수 있게 하는 접근법
-> 이미지 개성에 한계 존재
미니멀리즘(Minimalism)
-> 플랫의 상위개념
-> 쓸데없는 요소 제거, 다채로운 색감이나 타이포 제외
-> 절대 직관적이지 않음
-> 효율성 중시
# 타이포(typo) : 서체
- 타이포디자인 -> 서체디자인
# 픽토그램(pictogram) : 그림문자
# 메타포(metaphor) : 은유, 어떤 것이 떠오름
# 리얼메타포(real-life metaphor) : 실세계 모습과 현상, 사물의 형태 재현
스큐어모피즘(skeuomorphism), 스큐어모프(skeuomorph)
- 도구 본래의 모양 형태를 그대로 따라가는 방식
-> 원래 그렇게 생기거나 그렇게 작동해야 할 이유가 있지만, 실질적으로 그럴 필요까진 없다. 닮았다고 스큐어모피즘이 성립되는건 아니다. 지나치게 범위가 넓게 쓰임.
-> 근래들어 ios나 ms metro 디자인이스큐어모피즘 논란이 있음
-> 스큐어모피즘은 사용자에게 아날로그적 환경을 제공 함으로써 높은 사용성, 학습성에 좀더 많은 이득을 줌
-> 지나치게 현실과 같아 질 경우 창의적인 결과물을 낳긴 힘듬
플랫(flat)
-> 2D로 디자인, 효과를 많이 주지 않음. 군더더기 없는 디자인.
-> 타이포그라피와 픽토그램에 집중, 오직 색감에 집중 할 수 있게 하는 접근법
-> 이미지 개성에 한계 존재
미니멀리즘(Minimalism)
-> 플랫의 상위개념
-> 쓸데없는 요소 제거, 다채로운 색감이나 타이포 제외
-> 절대 직관적이지 않음
-> 효율성 중시
맥도날드 이론
우리가 일을 하다가 점심시간이 되면 백지상태가 된다
모먹으러 갈지 정하자 하면 한명이 맥도날드 먹으러 가자 하면 모두 반발하며 다른거 먹으러 가자 하며 의견을 내놓는다
이것이 맥도날드 이론
어떠한 회의를 할때 최악의 해결책을 제시하면 사람들은 더 나은 해결책을 제시함
참고
http://mimul.com/pebble/default/2013/12/29/1388286471448.html
2014년 1월 17일 금요일
immediately invoked function expression
<script>
함수는 표현식과 선언
fn(){} <-문
var a = fn(){}; <- 식
function(){}
** 식별자가 필요합니다 오류 가 발생
식별자가 필요한 컨텍스트에 식별자가 없으면 오류가 난다 js1010
식별자가 필요한 값 : 변수, 속성, 배열, 함수이름
이 오류를 해결하려면!! 식별자의 등호 왼쪽으로 오도록 식을 변경한다.
(http://msdn.microsoft.com/ko-kr/library/vstudio/426stfah(v=vs.100).aspx)
고로 +function(){} 를 붙이면 식이 됨 ~ 되고 -도 되고 !도 됨 다됨 0,fn() 이런식도 됨
연산자가 앞에 오면 함수 문이 식으로 변함 함수는 특이함
요것은 함수만의 특징 같음
</script>
함수는 표현식과 선언
fn(){} <-문
var a = fn(){}; <- 식
function(){}
** 식별자가 필요합니다 오류 가 발생
식별자가 필요한 컨텍스트에 식별자가 없으면 오류가 난다 js1010
식별자가 필요한 값 : 변수, 속성, 배열, 함수이름
이 오류를 해결하려면!! 식별자의 등호 왼쪽으로 오도록 식을 변경한다.
(http://msdn.microsoft.com/ko-kr/library/vstudio/426stfah(v=vs.100).aspx)
고로 +function(){} 를 붙이면 식이 됨 ~ 되고 -도 되고 !도 됨 다됨 0,fn() 이런식도 됨
연산자가 앞에 오면 함수 문이 식으로 변함 함수는 특이함
요것은 함수만의 특징 같음
</script>
script 로드 순서 ready, load, settimeout, $fn
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
setTimeout(function(){
alert(3);
},0);
$(window).load(function(){
alert(6);
});
$(function(){
alert(1);
});
$(document).ready(function(){
alert(5);
});
//실행순서
//$(function == $(document).ready -> $(window).load -> settimeout
//alert(2);
</script>
</head>
<body>
<script>
//dom이 열리고 난 뒤 실행
//$(function(){
//alert(1);
//});
//
//alert(2);
//alert(4);
</script>
<script>
setTimeout(function(){
alert(3);
},0);
$(window).load(function(){
alert(6);
});
$(function(){
alert(1);
});
$(document).ready(function(){
alert(5);
});
//실행순서
//$(function == $(document).ready -> $(window).load -> settimeout
//alert(2);
</script>
</head>
<body>
<script>
//dom이 열리고 난 뒤 실행
//$(function(){
//alert(1);
//});
//
//alert(2);
//alert(4);
</script>
함수 프로토 타입 또 정리
<script>
//var a = function(){};
//a.prototype.x = function(){
// alert(1);
//};
//var b = new a();
//b.x();
//
//var a = function(){
// this.x = function(){
// alert(1);
// };
//}
//
//
//var b = new a();
//b.x();
//function a(){ this.x = function(){
//alert(1);
//};}
//내부에서 this.x 를 하더라도 그것이 바로 prototype으로 값이 잡히는게 아님
// new를 때리면 이 값은 그 객체의 한 값으로 잡히게 됨
// b = new a(); 이런식으로 하면 b의 객체에 __proto__속성으로 x가 값이 들어가는게 아닌
//바로 b.x의 객체의 값에 바로 붙게됨
//a.prototype = {
// "a1" : "1"
//};
//var b = new a();
//alert(b.a1);
//
//var a = function(){
// this.x = "1"; //공유
//};
//
//
//var b = new a;
////a.x = "2";
////a.prototype.x = "3"; //상속
//alert(b.x);
//alert(b.x);
//
//var c = function(){
// this.x = "4";
//};
//c.prototype = b;
//c.prototype.x = "5";
//
//var d = new c;
//var c;
//function a(){
// var b = "1";
// c = b;
//}
//
//a();
function chk(x,y,z){
return arguments.callee.length;
}
var a = chk("a");
//함수가 생성되면 처음에 파라미터에 맞게 함수에 파라미터의 길이만 셋팅되고
//scope객체가 생성된다.
//[[scope]]객체에서 1,local variable 객체, 2. 그 바로 위 범위 객체 (일반적으론 global variable )
//가 셋팅이 됨, local variable에 변수 별로 x,y,z, length, arguments 객체가 셋팅됨
//arguments 객체에 순번 별로 0: 값, 1:값, 2:값, length, callee가 셋팅됨
//callee는 이 arguments객체를 호출한 원본 함수를 가르킴 callee 자체가 자신을 호출한 함수 자체를 가르킴
</script>
//var a = function(){};
//a.prototype.x = function(){
// alert(1);
//};
//var b = new a();
//b.x();
//
//var a = function(){
// this.x = function(){
// alert(1);
// };
//}
//
//
//var b = new a();
//b.x();
//function a(){ this.x = function(){
//alert(1);
//};}
//내부에서 this.x 를 하더라도 그것이 바로 prototype으로 값이 잡히는게 아님
// new를 때리면 이 값은 그 객체의 한 값으로 잡히게 됨
// b = new a(); 이런식으로 하면 b의 객체에 __proto__속성으로 x가 값이 들어가는게 아닌
//바로 b.x의 객체의 값에 바로 붙게됨
//a.prototype = {
// "a1" : "1"
//};
//var b = new a();
//alert(b.a1);
//
//var a = function(){
// this.x = "1"; //공유
//};
//
//
//var b = new a;
////a.x = "2";
////a.prototype.x = "3"; //상속
//alert(b.x);
//alert(b.x);
//
//var c = function(){
// this.x = "4";
//};
//c.prototype = b;
//c.prototype.x = "5";
//
//var d = new c;
//var c;
//function a(){
// var b = "1";
// c = b;
//}
//
//a();
function chk(x,y,z){
return arguments.callee.length;
}
var a = chk("a");
//함수가 생성되면 처음에 파라미터에 맞게 함수에 파라미터의 길이만 셋팅되고
//scope객체가 생성된다.
//[[scope]]객체에서 1,local variable 객체, 2. 그 바로 위 범위 객체 (일반적으론 global variable )
//가 셋팅이 됨, local variable에 변수 별로 x,y,z, length, arguments 객체가 셋팅됨
//arguments 객체에 순번 별로 0: 값, 1:값, 2:값, length, callee가 셋팅됨
//callee는 이 arguments객체를 호출한 원본 함수를 가르킴 callee 자체가 자신을 호출한 함수 자체를 가르킴
</script>
javascript scope
<title> [[scope]] </title>
<script>
var e;
function aa(a,b,c){
var d = "1";
}
aa(1);
script는 싱글쓰레드임, 전통적인 스크립트 언어들은 정적메모리(const 등 ), 스텍 영역을 잡고 나머지를힙을 잡아서 프로그램을 실행한다
하지만 자바스크립트는 이런것들은 모두 브라우저에서 처리해줌(iexplore.exe, chrome.exe 등),대신 가상메모리(객체들의 집합)를 잡아서 실행함
함수란 부모 함수를 생성해야 생성됨, 기본적으로
(function(window){ }((window||global);
이런식으로 window가 전역에 바인드 되있음, 기본적으로 global이 적용됨
그 안에서 함수가 실행되면 execution context(실행영역)가 생성됨, ecmascript 3.1까진 ec라 하고 5부터는 lexical environment(어휘공간) 이라 함
실행영역이 생성되기 전에 함수가 실행될때 변수의 인자값들을 [a,b,c] 이렇게 배열식으로 넘김
그래서 ec1 = [a,b,c] 이런식으로 들어가 잇으면 함수에서 호출하는 a 인자값이 1이면 a는 1을 대입하고 나머진 undefined를 넣는다
ec자체도 해쉬맵이니까 그리고 arguments 객체에도 똑같이 넣는다 arguments객체 자체는 자신 함수를 호출하는 키 값을 잡고 잇음. callee
그리고 scope객체에 지금 현재 영역에 d가 잇으므로 d를 넣고 parent에 이 함수를 호출한 global를 넣는다. 만약
fn ee(){
aa(){
}
}
이랫엇으면 scope:ee.parent에 이런식으로 찾아갈꺼임
그래서 parent chain을 해서 상위 변수 값들을 찾는것임
ec가 사라질때는 함수 사용이 완료가 되면 그 함수 ec가 사라지는데 저렇게 변수 자체가 참조를 함
var f = function(){
var a = 1;
return function(){
return ++a;
};
};
var g = f();
g();
g();
alert(g()); //4
scope : parent가 참조함. 유일하게 외부 함수와 연결하는 연결고리가 살아있는데 이것을 사용하고 있으면 가비지컬렉터는 일어나지 않음
close와 비슷하게 closure 는 폐쇄란 뜻인데 공간이 폐쇄된 상태가 되어버림
이것을 자바스크립트에서 클로저라 부름
그리고 if(d = arr.length){
}
이런식으로 함 식을 평가하고 d의 값이 0이면 else로 탈것임
</script>
<script>
var e;
function aa(a,b,c){
var d = "1";
}
aa(1);
script는 싱글쓰레드임, 전통적인 스크립트 언어들은 정적메모리(const 등 ), 스텍 영역을 잡고 나머지를힙을 잡아서 프로그램을 실행한다
하지만 자바스크립트는 이런것들은 모두 브라우저에서 처리해줌(iexplore.exe, chrome.exe 등),대신 가상메모리(객체들의 집합)를 잡아서 실행함
함수란 부모 함수를 생성해야 생성됨, 기본적으로
(function(window){ }((window||global);
이런식으로 window가 전역에 바인드 되있음, 기본적으로 global이 적용됨
그 안에서 함수가 실행되면 execution context(실행영역)가 생성됨, ecmascript 3.1까진 ec라 하고 5부터는 lexical environment(어휘공간) 이라 함
실행영역이 생성되기 전에 함수가 실행될때 변수의 인자값들을 [a,b,c] 이렇게 배열식으로 넘김
그래서 ec1 = [a,b,c] 이런식으로 들어가 잇으면 함수에서 호출하는 a 인자값이 1이면 a는 1을 대입하고 나머진 undefined를 넣는다
ec자체도 해쉬맵이니까 그리고 arguments 객체에도 똑같이 넣는다 arguments객체 자체는 자신 함수를 호출하는 키 값을 잡고 잇음. callee
그리고 scope객체에 지금 현재 영역에 d가 잇으므로 d를 넣고 parent에 이 함수를 호출한 global를 넣는다. 만약
fn ee(){
aa(){
}
}
이랫엇으면 scope:ee.parent에 이런식으로 찾아갈꺼임
그래서 parent chain을 해서 상위 변수 값들을 찾는것임
ec가 사라질때는 함수 사용이 완료가 되면 그 함수 ec가 사라지는데 저렇게 변수 자체가 참조를 함
var f = function(){
var a = 1;
return function(){
return ++a;
};
};
var g = f();
g();
g();
alert(g()); //4
scope : parent가 참조함. 유일하게 외부 함수와 연결하는 연결고리가 살아있는데 이것을 사용하고 있으면 가비지컬렉터는 일어나지 않음
close와 비슷하게 closure 는 폐쇄란 뜻인데 공간이 폐쇄된 상태가 되어버림
이것을 자바스크립트에서 클로저라 부름
그리고 if(d = arr.length){
}
이런식으로 함 식을 평가하고 d의 값이 0이면 else로 탈것임
</script>
javascript prototype
<script>
function aa(){}
aa.prototype = {
"a1" : "1",
"a2" : "2"
};
function bb(){
this.a1 = "5";
}
//function 을 선언하면 prototype이 있고 __proto__ 가 있음, __proto__는 변경할수 없는 것이며, 현재 상속 받고 잇는것들에 대해 나타냄
//prototype은 new를 이용해 선언을 했을때 __proto__로 만들어주는 역할을 함
//new를 함으로써 __proto__의 값이 된 것임, aa.prototype는 단순히 객체임 {},
//new aa() 는 __proto__ = {a1 : 1, a2:2}
//aa.prototype은 = {a1 : 1, a2:2} 만약 new aa() 이런식으로 해서 넣엇다면 {a1 : 1, a2:2, __proto__ :{a1 : 1, a2:2} } 이런식이 될거임
// 왜 이러냐 브랜든 할배가 10일만에 만들어서그럼 ㅋㅋ
// bb.prototype = new aa();
// bb.a1 = "4"; //name이 bb인 함수에 대한 값에 a1값이 들어가는것임 , prototype과는 상관없음 c로 새로운 생성자에선 당연히안넘어감
// bb.prototype.a1 = "3";
// var c = new bb();
// 프로토타입은 직렬화 된 상속만 가능
// alert(bb.a2);
// alert(bb.a1);
</script>
function aa(){}
aa.prototype = {
"a1" : "1",
"a2" : "2"
};
function bb(){
this.a1 = "5";
}
//function 을 선언하면 prototype이 있고 __proto__ 가 있음, __proto__는 변경할수 없는 것이며, 현재 상속 받고 잇는것들에 대해 나타냄
//prototype은 new를 이용해 선언을 했을때 __proto__로 만들어주는 역할을 함
//new를 함으로써 __proto__의 값이 된 것임, aa.prototype는 단순히 객체임 {},
//new aa() 는 __proto__ = {a1 : 1, a2:2}
//aa.prototype은 = {a1 : 1, a2:2} 만약 new aa() 이런식으로 해서 넣엇다면 {a1 : 1, a2:2, __proto__ :{a1 : 1, a2:2} } 이런식이 될거임
// 왜 이러냐 브랜든 할배가 10일만에 만들어서그럼 ㅋㅋ
// bb.prototype = new aa();
// bb.a1 = "4"; //name이 bb인 함수에 대한 값에 a1값이 들어가는것임 , prototype과는 상관없음 c로 새로운 생성자에선 당연히안넘어감
// bb.prototype.a1 = "3";
// var c = new bb();
// 프로토타입은 직렬화 된 상속만 가능
// alert(bb.a2);
// alert(bb.a1);
</script>
피드 구독하기:
글 (Atom)