[Zerocho-14] EventListener(keyup&down) & 증감연산자(전위형/후위형) & Blocking / Non-Blocking & 이벤트루프

1. EventListener(Keyup&down&press)

지난시간에, EventListener속성중에, mousemove, down , up 등, 마우스의 움직임 이벤트에 대해 살펴봤습니다.

그럼 이번시간에는 테트리스 게임을 만들면서 필요했던, 키보드 키들의 이벤트를 설정하는 방법에 대해 살펴보겠습니다.

 

 

우선 'keyUp' 입니다.

키보드의 키를 눌렀다가, 떼는 순간 발생하는 이벤트입니다.

window.addEventListener('keyup', (event)=> {
    console.log(event);
})

그럼, 어떤 버튼을 눌렀는지 객체내에 값을 반환해주는데, 이를 이용해서 사용자가 어떤 버튼을 눌렀는지 확인하고 상호작용할 수 있습니다.

 

다음은 'keyDown' 입니다.

키보드를 꾹 ~ 누르고 있으면 계속 이 이벤트가 발생합니다.

즉, 키보드를 누르고 있을 때, 발생하는 이벤트입니다.

//누르고있는 중에 계속 이벤트 발생 !
window.addEventListener('keydown', (event)=> {
    console.log(event);
})

이렇게 두가지를 콘솔에 찍어보면 다음과 같은 결과를 보실 수 있습니다.

키보드 방향키를 좌 -> 우 -> 위 -> 아래

이렇게 입력했네요. 어떻게 알 수 있죠?

event에 code 혹은 key값이 ArrowLeft, Right, Up, Down 등을 알려주고 있기 때문이에요.

그럼, 이걸 이용해서

if(event.key === 'ArrowLeft'){} 일때,

할 동작을 설정하고 각 버튼을 그렇게 만들어주면 버튼에 따라 동작하는 웹사이트를 혹은 게임을 만들 수 있지 않을까요?!

 

2. 증감연산자 (전위형 / 후위형)

다음은 증감연산자입니다. a = 1; a = a+1 << 이런거요~

늘리거나 줄인다해서 증감 이라는 이름이 붙었습니다.

그런데 이건 기초이고 , 우리는 전위형 증감연산자와 후위형 증감연산자에 대해 살펴보겠습니다.

for(let i=0; i< 10; i++){
    console.log(i);
}

뭐 이런거 할 때, 자주 봤죠?

i ++ << 이부분. i 값을 1씩 증가시켜라, 즉, i = i + 1; 이것을 요약해서 i ++ 이렇게 사용하곤 했습니다.

 

//전위 증감연산자.
let a = 1;
let b = ++a;

console.log(b);



//후위 증감연산자.
let c = 1;
let d = c++;

console.log(d);

그럼 이건 어떨까요?

두개의 값은 어떻게 다를까요?

전위 증감연산자는 예상하시는대로 2를 출력합니다.

 

그런데, 후위증감연산자는,

1을 출력합니다.

 

왜 그럴까요?

전위 증감연산자는, b에서 a의 값을 할당받아, 1 증가시켜줍니다. 그리고나서 증가된 값을 반환하죠.

b -> a = a + 1 -> console.log(b);

 

그에반해, 후위 증감연산자는, c에서 받은 값을, 1 증가시키기 전에 반환하고, 그리고 나서 값을 증가시킵니다.

d -> c -> console.log(d) -> c = c + 1;

 

이렇게 순서가 달라집니다 !

 

 

3. 동기 & 비동기 ( Blocking & Non-Blocking )

이벤트루프를 이해하기 위해서는, Bloking과, Non-Blocking 그리고 저번에 다루었던 호출스택에 개념이 필요합니다.

 

우선 Blocking과, Non-Blocking에 대해 살펴보겠습니다.

 

동기와 비동기 이야기를 다뤘던적이 있었죠?

 

비동기는 순서대로 실행되지 않는 코드 & 동기는 순서대로 실행되는 코드

즉, 동기적 작업에서는 3가지의 작업이 있다고 가정했을 때, 이전 작업이 끝나지 않으면 다음 작업으로 절대 넘어갈 수 없습니다.

순서대로 실행된다는 것이죠.

 

그런데 반해, 비동기적 작업에서는 3가지의 작업이 있다고 가정했을 때, 이전작업이 끝나지 않아도 순서에 상관없이 먼저 끝나는대로 호출할 수 있습니다.

즉, 순서대로 실행되지 않지만, 효율적으로 실행할 수 있다는 것이죠.

 

브라우저 입장에서는 그렇습니다.

그런데 이번엔 조금 시각을 바꿔서, 사용자 입장이라고 생각해봅시다.

 

사용자입장에서 alert('멈춰랏!') 이 실행된 페이지를 보고있어요. 그럼, alert창 때문에 어떠한 작업도 수행할 수 없습니다. 이 창을 종료하기 전까지는 말이죠. 이런걸보고, blocking이라고 합니다. 막아버렸다는거에요 ~

 

그런데 반해, Non-blocking은 음.. 말안해도 아시겠쬬? 음 ! input창에 값을 입력하는 것 << 이 Nonblocking입니다. 만약 블로킹이었다면, 유저가 값을 입력하는 것과 동시에,  fetch를 실행하고 있는데 안되겟죠?

 

* fetch는 api를 불러오고, 정보를 내보내 주기도 하는 함수

 

아무튼, 그래서, Javascript는 대표적인 Non-blocking 언어입니다. 그에반해, Python, Java 등은 Blocking 언어입니다.

 

 

 

4. 이벤트루프

이벤트루프는, 콜스택(호출스택)에서 -> Web Api(Background) 를 거쳐 -> 테스트큐(Que) 를 거쳐 -> 다시 CallStack으로 돌아오게 만드는 루프 속에서, CallStack이 비어있는지 수시로 확인하는 작업을 합니다.

 

아무튼, 말로하면 어렵잖아요? 코드로 한번 살펴봅시다.

setTimeout(()=> console.log('a'), 0);

console.log('b');

이런 코드가 있다고 가정합시다. 그럼 어떻게 실행될 것 같나요?

코드는 좌에서 우로, 위에서 아래로 순차적으로 읽어나가는 것이니, (동기일때)

0초만에 실행되니깐 당연히 a -> b 아니겠어요?

그런데, 실제로는 b -> a 가 출력됩니다.

왜 그런지 알아보겠습니다.

 

 

이벤트루프 이해하기!

비동기 작업을 할 때, 호출스택에는 비동기 코드가 보관되지(쌓이지) 않습니다.

(addEventListener , setTimeout, SetInterVal 등등등....)

그래서 Web Api 라는 또 다른 눈에 보이지않는 브라우저만의 저장공간으로 보내주게 됩니다.

 

그럼, Web Api에 보관된 SetTimeout은, 함수에 설정된 시간 이후에, 테스트큐라는 공간으로 보내집니다.

그럼, 테스트큐에 0초후에 보내지겠죠?

 

그런데 여기서!

콜스택에 무언가가 존재할 때는, 테스트큐에서, 호출스택으로 보내지 않습니다.

이걸 이벤트루프가 처리합니다.

 

따라서, 콘솔에는 a, b 가 아닌, b, a 가 출력되는 이유는,

호출스택이 빈 시점 이후에 console.log('a')를 호출스택에 가져오기 때문입니다 !

 

 

 

 

5. Zerocho JS 강의 마무리..

제로초 강사의 Javascript 강의를 테트리스까지 마쳤습니다.

이번시간에는 코드를 포함시키지 않았는데요,

강의에서도.. 테트리스코드는 따라하지 말고 눈으로만 보길 권장하더라구요.

 

아무튼 ! 그래서 이로써 제로초 자바스크립트 강의가 끝났고,

이제..

 

혼자 자바스크립트로 이것저것 코딩해보면서,

React를 배워보려합니다.

 

초반부에는, 설명이 너무 좋았던데 반해, 후반부로가면 갈수록 2048부터였나..

다소, 설명이 부실하고, 강의환경(마이크 , 화면등..) 셋팅 자체가 부실하게 느껴졌습니다.

 

이 강의를 들으면서 가장 크게 배운 점은,

순서도 ( 프로그래밍적 사고 ) 를 할 수 있게 되었다는 점이고,

그로써, 다소 코딩실력은 아직 많이 부족하지만,

이것저것 찾아보면서 스스로 코딩할 수 있는 능력이 생겼습니다.

 

그리고, 생활코딩에서는 다소 쉽고 근본적으로 자바스크립트를 배웠다면,

제로초 강의에서는 좀 더 실용적인 연습이 많이 들어가있어서,

자신감이 붙게 만들어주는 강의였던 것 같습니다 !

개인적으로 만족하면서 들었습니다 ^^!