비동기 처리>>>>>>>>>>>>>>>>>>>>>>>>>>

일단

동기적 처리는

순서대로 처리한거다.

예를들어

글작성 -> 이메일발송 -> 작성완료
이런 순서로 처리하는게 동기적 처리다.

그러나 문제점은 3시간이 걸린다는 문제가있다.

왜 3시간이 걸리냐면,
기다리고 처리하고 기다리는 시간을 포함해서,
3시간인데,

이작업을 (이메일을 구독자에게 보내는 작업을(3시간동안))

백그라운드로 돌리면 시간이 절약될것이다.

어디 적어놓고 적어놓은 일은 나중에 처리한다

즉, 어떤일을 하다가 , 지금 처리를 할수는 없지만 ,
나중에는 꼭 처리해야하는 경우에는,
근데,그일을 계속 신경쓴다면 , 집중이 잘 안되겠죠

아무튼 , 그런경우는 어디에다가 적어놓고, 적어놓은 일은 나중에 처리한다는 것이다.
(예약하는 것 같은, 백그라운드에서 돌아가는 개념)
바로 이런 것들이 투-두(to-do) 인 것이고
이러한 방식을 비동기적인 방식이라고 한다.

자 그러면 비동기 처리를 자바스크립트에서는, AJAX 라고한다.
(asynchronous)

*내부적으로 저기에 표시된 정보들을,
서버에 요청해서 가져온 다음에 ,그것들을
화면에 표시했기 때문에 그렇습니다.

*그리고 저기 특정 모양을 눌렀을때, 창이 작게뜨면서 정보가 표시되는
것은 페이지를 리로드하지않고 된 거였습니다.
이것이 가능한 경우는 ajax라는 것을 썻기 때문이에요,
개발자 도구를 열고
네트워크 탭을 보면, 웹브라우져가 웹서버랑 통신한 내역을 보여준다.
이 상태에서
웹 페이지 안에 비동기된 걸 눌러보면
뭐뭐뭐 ajax 라고 , 파일이 하나 뜬다.

아무튼

(비동기적인) 요소를
클릭을 했을때
웹 페이지 가 변경되지않고 ,
서버와 웹브라우져가 조용히 내부적으로 통신을 하는
이런 기술을 ajax라고 한다.

=====================

==============================================================

<클로져>

클로져는 내부함수가 외부함수의 맥락에 접근할 수 있는 것을 가르킨다.
클로져는 자바스크립트를 이용한 고난이도
테크닉을 구사하는데 필수적인 개념으로 활용된다.

*내부함수

• 함수안에 또 함수가 있는 형태

function outter () { // 외부함수
function inner () { // 내부함수
var title = 'coding everybody';
alert(title);
}
inner();
}
outter();

이렇게 함수가 구성되어 있다.

즉,
var inner = function () {

}

// outter라는 함수의 지역변수로 inner라는 변수를 만들고 ,
inner 변수의 안에 함수를 할당하고 있는 형태라고 보면된다.

이 용도는
일단
어떠한 함수가 있는데,
그 함수 안에서만 사용되는 함수가 있겠죠/
(만약,, 이 함수를 사용하고자 할때
이 함수 바깥에다 선언하게 되면,
응집성이 떨어지기때문에)
그래서
이 함수 안에 선언을 하게되면,
이 함수 안에서만 사용되는 함수이기 때문에,
보기도 편하고, 뭔가 끼어들 가능성이 줄어들어 좋다.

여기서 아주 중요한 부분은/

function outter () { // 외부함수

var title = 'coding everybody'; // 외부함수에 정의되있는 지역(local)변수

function inner () { // 내부함수
alert(title); //외부변수title에 접근함(내부함수에서 외부함수에 접근할수있음!!)
}
inner();

}
outter();

여기서 아주 중요한 부분은/

저 위의 예제 처럼

내부 함수에서 외부함수의 지역 변수에 접근을 할수가 있다는 점이다
이걸 클로져 라고 부른다.
심지어 외부함수가 더 이상 사용되지 않는 경우에도 ,
내부함수가 외부함수에 접근을 할 수 있다 라는 것이다.
이 점이 클로져의 독특함이다.

function outter(){
var title = 'coding everybody';
return function() {
alert(title);
}
}
inner = outter();
inner();

이처럼

outter 함수가 리턴값을 반환하고 종료했음에도 불구하고
inner함수가 실행(outter함수의 변수를 사용) 되는 점!!!

바로 이런 점이
클로져의 특징이다.

다음 코드를 보면,,,

function factory_movie(title){
return { // 객체
get_title : function () { //메소드
return title;
},
set_title : function(_title){ //메소드
title = _title
}
}
}
ghost = factory_movie('Ghost in the shell');
matrix =factory_movie('Matrix');

*일단 프라이빗 베리어블이라는 것은
소프터웨어가 커지는 과정에서,
어떠한 정보가 있을때,
그 정보를 아무나 수정하도록 하는것을 방지하는것을 말한다.

아무튼 자 코드를 보면,,

위에 코드에서,,

factory_movie 라는 함수는 외부함수이고,
그 소속에서
내부함수는
get_title
set_title
이라는 내부 함수가 존재하고 있다.

정리하자면

외부 함수에서의 소속(안에들어있는 것은)은 객체이고, 동시에
내부함수 이기도하다.

즉 외부함수 내부함수로 구조가 되어있다라는 뜻이고,
이것은 또
클로져 로써,
내부함수가 외부함수를 접근 할수 있다 라는 뜻이다.

코드에서,,
get_title 을 호출하면 title을 리턴하는데,, title은 어디서오냐면
외부함수(factoey_movie)의 인자값 title에서 가지고 온다.

function factory_movie(title){
return { // 객체
get_title : function () { //메소드
return title;
},
set_title : function(_title){ //메소드
if(typeof _title === 'String'){
title = _title
}else{
alert('문자열이어야 합니다.');
}
}
}
}
ghost = factory_movie('Ghost in the shell');
matrix =factory_movie('Matrix');
alert(ghost.get_title());
alert(matrix.get_title());
ghost.set_title('공각기동대')
alert(ghost.get_title());
alert(matrix.get_title());

자,

밑에서 고스트 랑 매트릭스에 값을 저장시키는데,
각 각 호출을 하면, 내용이 나온다,
고스트를 호출 하던지 매트릭스를 하던지,,,

그냥 저 코드는 장치(기능)일 뿐이다.

자 여기서 중요한건 외부함수의 title (인자값)을 데이터로 봐야된다.

외부 함수의 title 에 값이 전달 되고,
일단 값만 입력이 된 상태이다.
그래서 리턴을 하는데,
겟 타이틀하면,
리턴을 하는데,,
리턴값은
get_title 이고 , title 을 리턴 하므로 문자열이 나오는것이고,
set_title 해서 값을 넣으면 바뀐 값이 호출되는거고 거기다가 조건을 넣어서 코딩을한것이다.

여기서 중요한 점은 ,
클로져는
이렇게

title이라는 인자 데이터를 아무나 변경할수없게,
get_title 과
set_title이라는 함수로 접근만 할수가 있게
만들어놓은 장치 라는 점에서의 클로저의 특징을 나타낸 코드이다 라고보면된다.
결론은 title의 값의 변경은 장치를 통해서만 가능한 것이다.
보안적으로 좋다 라는 것!
즉, 프라이 빗 한 변수를 사용할수 있는 좋은 메커니즘이라고 할 수 있다.

<클로져에서 일어나기 쉬운 실수, 응용>

.............

예제)

var arr = []
for ( var i = 0 ; i < 5 ; i ++ ){
arr[i] = function(){
return i;
}
}

for (var index in arr ) {
console.log(arrindex);
}