[프리코스] 8주차

이번주에는 비동기 & 동기 호출, Function Method 그리고 '자바스크립트로 할 수 있는 것'이라는 타이틀의 내용들을 학습했습니다. 하루는 이론적인 내용들을 다루었고, 나머지 하루는 강사님 말대로 Casual한 내용을 다루었습니다. 가장 인상 깊었던 부분은 Casual한 부분인 '자바스크립트로 할 수 있는 것'이었네요. 하지만 이론적인 내용 또한 중요하니 간단하게나마 정리해보겠습니다. 

 

Asynchronous & synchronous Call

비동기(Asynchronous)와 동기(Synchronous)를 설명하기에 앞서 자바스크립트(Javascript)가 가지는 특징에 대해서 알아보겠습니다. 자바스크립트는 기본적으로 싱글 스레드(Single Thread) 언어입니다. 다시 말해, 멀티 스레드(Multy Thread)를 지원하지 않는 언어인데요, 여기서 스레드(Thread)라는 것을 설명할 때 컴퓨터에 비유하면 좋을 것 같습니다. 흔히 RAM과 CPU를 비교할 때 CPU는 하나의 작업을 빠르게 처리할 수 있는 능력에 비유하고, RAM은 얼마나 많은 일을 동시에 진행할 수 있는지에 비유합니다. 스레드라는 것은 RAM에 비유할 수 있겠습니다.(물론 정확하지는 않지만) 멀티스레드는 두가지 이상의 작업을, 싱글스레드는 한가지 작업만을 처리할 수 있는 것을 의미합니다.

 

다시 본론으로 돌아가서, 동기와 비동기에 대해 수업시간에는 커피 주문하기에 비유했습니다.

 

동기 호출(좌측) 과 비동기 호출(우측)

동기 호출에 해당하는 좌측의 경우에는 작업1(손님1)이 끝나기 전에는 작업2(손님2)가 진행될 수 없습니다. 반면 비동기 호출(우측)의 경우에는 작업1과 작업2가 동시에 진행됩니다. 멀티스레드를 지원하지 않는 자바스크립트의 기본적인 동작은 좌측과 같기 때문에 특정 상황에서 문제가 발생할 수 있습니다. 예를 들면 사용자가 서버에서 이미지를 요청했을 때 이미지가 로드되기 까지 아무런 동작을 할 수 없는 상황말입니다.

 

자바스크립트에서 위와 같은 동기 처리의 문제점을 해결하기 위한 비동기 처리의 대표적인 예는 다음과 같습니다.

• DOM Element 의 이벤트 핸들러
  • 마우스, 키보드 입력 (click, keydown 등)
  • 페이지 로딩 (DOMContentLoaded 등)
• 타이머
  • 타이머 API (setTimeout 등)
  • 애니매이션 API (requestAnimationFrame)
• 서버에 자원 요청 및 응답
  • fetch API
  • AJAX (XHR)

 

 

Function Method
 - .apply(), .call(), .bind()

몇가지 함수 호출의 방법에 대해서 공부했습니다. 이 호출 방법들의 핵심은 this 키워드를 지정시켜 놓음으로써(bind) 싱글스레드라는 특성때문에 this 키워드가 가리키는 객체가 계속해서 바뀌는 문제를 해결하는 것입니다. 어느정도 비동기/동기에 대한 내용의 연장선이라고 볼 수 있겠는데요, 그 이유는 아래의 간단한 예제에서 찾을 수 있습니다.

function Box(w,h){
    this.width = w;
    this.height = h;
    
    this.getArea = function(){
        return this.width * this.height;
    }
    this.printArea = function(){
        console.log(this.getArea());
    }
}

let b = new Box(100,50);
b.printArea(); // 5000

setTimeout(b.printArea, 2000);
//VM766:9 Uncaught TypeError: this.getArea is not a function at Box.printArea (<anonymous>:9:26)
//Box.printArea @ VM766:9
//setTimeout (async) (anonymous) @ VM766:16

setTimeout()을 통해 2초 후에 b.printArea()를 실행하는 예제입니다. setTimeout구문으로 넘어오게 되면 Box내부의 this는 더이상 객체 b가 아닌 window를 가리키게 됨으로 Uncaught TypeError가 발생합니다. 이는 bind를 통해 this를 b객체로 지정한 체로 함수를 호출하여 해결할 수 있습니다. 

setTimeout(b.printArea.bind(b),2000); // 5000

 

또 한가지, bind()를 통해 커링(currying: '인자 여러개를 받는 함수'를 '인자를 하나를 받는 함수'로 바꾸는 방법)을 구현할 수 있습니다. 

function template(name, money){
    return '<h1>' + name + '</h1><span>' + money + '</span>';
}

let tmplSteve = template.bind(null, 'Steve');
tmplSteve(100);  // <h1>Steve</h1><span>100</span>

let tmplJohnny = template.bind(null, 'Johnny');
tmplJohnny(1000);  // <h1>Johnny</h1><span>1000</span>

 

 

자바스크립트로 할 수 있는 것들

 

1. Sever Application, CLI scripts
   • Node js
2. OS independent Desktop / Mobile programs
   • 워드프로세서, 엑셀 같은 데스크탑 프로그램(electron js)
   • Skype, Visual Studio Code, Slack
   • 모바일 어플리케이션(PWA, React Native)
3. Video & Audio App
   • video: WebRTC
   • Audio: Audion API
4. Control Robotics and Iot devices
   • cylonjs, johnny five(아두이노, 라즈베리파이 같은 보드를 컨트롤할 수 있는 라이브러리
5. Game
   • Slither: link
   • 3D (WebGL, WebVR, babylon js)
6. Chat Bot
   • Visual Chat Bot
   • AI 스피커
7. Browser Automation
   • Web Scrapping
   • Screenshotting
   • pupeteer
8. Visualization
   • d3js.org
   • New York Times의 시각화
9. Block Chain
   • DApp(탈중앙화 앱)
10. Machine learning