사람냄새 개발자 블로그

자바스크립트가 비동기를 가능케하는 원리에 대해 궁금하여 공부하다가 잃어버릴까봐 정리 해논 글입니다.

현 회사에서 자바 RestAPI  서버단 코딩을 주로 하다가 자바스크립트로 클라언트 코딩할 일이 생겨.... 작업중 

브라우저에 대한 단일 쓰레드 비동기 처리방식이 어떻게  가능케 하는 원리가 궁금하여... 검색을 찾고 공부한 내용을 적어 둔 내용입니다.

출처는 http://meetup.toast.com/posts/89 입니다.

내용을 공유하여 주신분께 정말 감사하게 생각하고 있습니다..

1. 나의 의문점

어떻게 스레드가 하나인데 '자바스크립트는 어떻게 동시성(Concurrency)을 지원하는 걸까'?

자바는 쓰레드로 넘기면 되지만 단일 쓰레드에서 어떻게 저런일이 일어날까.....??

저의 의문점으로 시작하여 검색키워드에 '자바스크립트 비동기 원리' 검색을 시점으로 여러글을 읽었지만 Promise 객체 사용법에 대해서만 있었다.

몇몇 우연치 않게 Event Loop 라는 용어와 비동기 처리는 setTimeout 함수 및 setInterval로 사용할 수 있다. 라는 힌 검색 키워드를 알아 냈고

크롬에 개발자 모드에서 Call Stack부분을 봐도 setTimeout 함수는 Call Stack에서 사라지고 다른 함수들이 

Call Stack쌓이는 관경을 목격..  스택에 setTimeout  함수는 없는 어떻게 호출이 되는거지에 대한 의문에 시작

출처 사이트를 보면서 의문점에 대한 해갈을 시작함...

2. 출처를 보고 내린 결론

이게 결론임 자바스크립트가 '단일 스레드' 기반의 언어라는 말은 '자바스크립트 엔진이 단일 호출 스택을 사용한다'는 관점에서만 사실이다.

아래 이미지가 정말 핵심 이미지다 저걸 이해해야 자바스크립트의 비동기 작동원리가 이해된다고 생각한다.

그림(1)

지금 그림(1)을 설명하면 

1.자바스크립트 엔진, 

2.웹 APIs, 

3.이벤트 루프 ,

4.Task 큐 

위  4가지가 별게인거다

보면 이벤트 루프가 돌면서 Task큐에 첫번째큐를 실행 Task 큐안에 콜백함수 CallStack들이 실행 되어지는것이다.

setTimeout 이나 setInterval ,Ajax 함수는들을 호출하면 콜백함수가 바로 지금 실행중인 Task 큐에 CallStack에 들어가는 것이 아닌

다음 Task 큐에 들어간다 결국 다른 Task들인 셈이다. 각 Task별로 각 CallStack이 있는 개념으로 생각 하는것이 맞을 것이다.

이런 원리 때문에 자바스크립트가 비동기로 돌아가는 원리로 돌아 가는것이다

콜스택개념은 전 포스트에 남겨놓았으니 확인하기 요망

다른 브라우저는 모르겠고, 크롬이 주 브라우저고, 크롬에서 디버깅하기가 용이하여

'use strict';
var A = function() {
  var A = 1;
  var AA = function() {
    console.log(A);
  };
  AA();
};

A();

'use strict';
var B = function() {
  var A = 1;
  C();
};

var C = function() {
  console.log(A);
};

var A = 2;

B();

'use strict';
for(var i=1; i<=3;) {
  setTimeout(function() {
    console.log(i);
  }, i++ * 1000);
}

2초가 지났으므로 이벤트 핸들러가 동작합니다.

i를 콘솔 탭에 찍는데 현재 전역 스코프의 i의 값은 4입니다.

3초가 지났으므로 이벤트 핸들러가 동작합니다.

i를 콘솔 탭에 찍는데 현재 전역 스코프의 i의 값은 4입니다.

'use strict';
for(var i=1; i<=3; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i));
}

'use strict';
var outer = function() {
  var x = 2;
  var inner = function() {
    var y = 2;
    console.log(y);
  };
  return inner;
};
var inner = outer();
inner();

'use strict';
(function() {
  var outer = function() {
    var x = 2;
    var inner = function() {
      console.log(x);
    };
    return inner;
  };
  var inner = outer();
  inner();
}());

자바 1.8 책을읽고....

자바 1.8이 나온지 엄청 오래됫는데.. 

VertX를 시작해보려 라이브러리를 까보는순간.. 1.8문법이 가득하여.. 1.8 책을 도서관에서 바로 빌렸다...

읽은 내용 정리 공간이다.

1장 람다

예전 자바에서 콜백은  파라미터에 인터페이스 객체를 넘겨서  실행하는 방법으로 객체를 넘기는 방식이 였다면

이젠 다른 언어처럼 코드블록 자체를 넘기는 방식이 가능 하다는게 책에 설명

1-1.코드에서 표현식 하나로는 표혈 할수 없는 계산을 수행한다면  (메서드처럼 작성)

1-2).람다 표현식이 파라미터를 받지 않으면 파리미터 없는 메서드와 마찬가지로 빈괄호를 사용한다.

1-3). 람다표현식의 파라미터 타입을 추정할 수 있는 경우 타입을 생략할 수 있다.

2 매서드 레퍼런스

3. 변수 유효범위

파라미터 구현된 인터페이스 객체를 넘겨서 사용하는 리스너 방식처럼 

람다식도 람다식을 감쌓고 있는 메서드에 파라미터를 접근하려면 final을 해야한다.

증감 연산자를 사용할수 없다.

람다안에서 this또한 일반 자바와 마찬가지로 그람다를 정의하는 class의 객체를 표현하는것이다.

4. 디폴트 메서드

이게 왜 생겼는지 궁금했는데.. 

책에는 Collection 인터페이스 forEach 같은 구현된 메서드가 필요 했다고 적혀 있다.

Collection을 상속받은 객체에 forEach를 여러번 반복된 소스를 구현하느니 .인터페이스에 디폴트 메서드를 만들어서 구현이 필요했나보다.

개인적 견해로 스트레이지 패턴으로 해결이 안되나?? 상속보단 인터페이스쪽을 바라보고 설계를 생각했기때문에 Collection을 구현한 객체들이 ForEach메소드를 중복되게 구현하는 문제 때문인가? 의구심이 들긴든다... 새로운 패턴을 정의할려면 기존방식을 흔들어야되는데 흔드니 새롭게 추가하는 부분이 안전할수 있을것 같다.

객체 여러 인터페이스를 구현 할수 있다. 

그러면.. 인터페이스나 다른 부분을 상속받은 메소드에 이름이 서로 같다면 어떻게 될것인가. 오버로딩이 아닌 파라미터 같지 같다면???

1) 상속을 하는 슈퍼클래스 메소드로 대체 된다. 인터페이스에 디폴트 메서드는 무시된다.

2) 인터페이스들끼리 같다면?? 해당 메서드를 오버라이드해서 충동을 해결한다???

    예제가 없어서 만들어 봤는데.  

AirConditionFuction ,FanFunction 

두개에 인터페이스중에 한개의 인터페이스에 디폴트 메소드만 구현하면 된다.

리턴되는 방식은 인터페이스명.상속객체.메소드명() 이런식이다.

(Object 클래스에 메서드중에 하나를 재정의하는 디폴트 메서드는 만들수 없다.)

1장 끝.