JavaScript 입문 : 카드맞추기 게임 - 이벤트루프를 통한 버그 수정 (동시 3번이상 클릭했을 경우 버그)

지난 시간 이벤트루푸에 대해 나름 깊이 공부를 해 보있습니다. 나름대로 이해를 돕기위해 나만의 Oredr Table도 만들어 결과값도 도출해 보았구요. 이제는 다음 그림과 같이 연속으로 3번이상 클릭하였을 경우 3번째부터 카드가 원상태로 돌아가지 않는 경우입니다. 예를 들어 동시에  4개를 찍으면 2개의 카드가 원상태로 돌아가지 않습니다. 

 

예상되는 원인은 기본적으로 자바스크립트는 순서대로 코드에 따라 작동하지만 이벤트루프 이론에 따르면 setTimeout(  )같은 함수가 사용될 경우 Background와 Task Que를 거쳐 호출스택으로 들어가서 동작을 하기 때문에 이런 현상이 벌어지는 경우로 추측 할 수 있습니다.

 

한번 이러한 버그에 대한 수정을 해 보도록 하겠습니다. 

 

본 글은 제로초 TV 자바스크립트 강좌를 참고로 만들고 있습니다. 

 

▒ 카드맞추기 게임 3번이상 클릭시 원상태 미복귀 카드 버그 수정

 

1. 버그가 발생되는 위치 파악

 

전체 코드가 너무 길면 전체를 이벤트 루프 테이블을 사용하여 체크할 수 없습니다. 물론 공부와 이해를 위하여 전부 작업할 필요성은 있습니다만, 카드클릭에서 특히 2개 카드클릭되는 부분에서 버그가 발생이 됩니다. 일단 전체 코드 흐름에 대한 이벤트루프 테이블을 약식으로 확인해 보겠습니다. 

 

 

즉, onclickCard(  ) 함수에서 4개가 클릭 동시에 클릭하면서 버그가 발생이 되는데요 이 부분만 떼서 좀 더 보도록 하겠습니다. 전제 조건은 1, 2, 3, 4번 카드가 색이 다르다는 조건입니다. 

 

2. 버그 원인 추적

 

다음 테이블에서 1번과 2번 카드가 호출스택으로 들어가면서 색이 다른 경우를 보겠습니다. 

 

 

2번카드가 clicked 배열에 들어가면서 다음 코드가 실행됩니다. 

 

 

여기서 setTimeout( ) 0.5초가 발생이 되네요. 이렇게 4개의 카드 클릭에 대한 이벤트루프를 보면 다음과 같습니다. 

 

 

상기 10번에서 Timer 500이 전부 태스크큐로 넘어가고 이 중 첫번째 Timer 500이 호출스택으로 가서 콜백함수가 실행이 되면 clicked[0]과 clicked[1]만 flipped가 제거되고 나머지 3, 4번 카드가 원상복귀하는 프로그램이 없습니다. 그 후 clicked 배열은 초기화가 되어 3, 4번 카드는 뒤집혀지지 않는 겁니다. 

 

이 후 Timer 500이 2개나 더 실행이 되겠지요. 이 콜백함수들은 이미 카드가 없기때문에 프로그램만 진행되고 화면 변화에는 아무 의미가 없습니다. 

 

결국 일반적인 자바스크립트 프로그램이 진행이 되고 콜백함수 같은 비동기 프로그렘은 나중에 실행된다고 보면 됩니다. 

 

3. 버그 수정

 

그렇다면 이러한 원인을 기준으로 추론해보면 2개의 카드가 clicked 배열에 들어갈때까지는 카드가 클릭이 되는 것을 막고 그 후에 카드가 클릭이 되도록 하면 될 것으로 판단됩니다. 

 

이는 플래그 변수를 통하여 만들 수 있습니다. 처음 클릭이 되지 않게 하기 위해서는 setTimeout(  ) 전에 clickable = false로 해줍니다. 

 

 

이제는 브라우저에서 카드가 잘 적용이 됩니다.