컴퓨터 알아가기
-
JavaScript 입문 : 카드맞추기 게임 - 카드게임 수량 유저 선택하기, 총 걸린시간 계산하기컴퓨터 알아가기/JavaScript 2022. 10. 13. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 현재까지 카드맞추기 게임을 만들면서 어느정도 버그가 수정이 되었다고 판단되어 조금 더 업그레이드를 해보고자 합니다. 첫번째는 카드의 수량을 최대치로 정해놓고 시작시 유저가 원하는 카드갯수를 입력하여 게임을 시작하고 최종적으로는 게임완료 시간을 계산하도록 하겠습니다. 1. 카드수량 정하기 게임 시작시 카드 수량을 입력하도록 만들겠습니다. 최대 20개까지 카드의 숫자를 만들도록 하고 이는 alert 메시지를 통하거나 버튼클릭으로 만들 수 있습니다. 주의할 점은 카드 2개가 같은 색이어야 하고 유저가 몇장을 선택할지 모르기 때문에 최대 20장의 반인 10장의 색상을 slice( ) 메소드로 나누어준 값을 concat( ) 메소드로 복사합니다..
-
JavaScript 입문 : 카드맞추기 게임 - 이벤트루프를 통한 버그 수정 (동시 3번이상 클릭했을 경우 버그)컴퓨터 알아가기/JavaScript 2022. 10. 12. 19:30
지난 시간 이벤트루푸에 대해 나름 깊이 공부를 해 보있습니다. 나름대로 이해를 돕기위해 나만의 Oredr Table도 만들어 결과값도 도출해 보았구요. 이제는 다음 그림과 같이 연속으로 3번이상 클릭하였을 경우 3번째부터 카드가 원상태로 돌아가지 않는 경우입니다. 예를 들어 동시에 4개를 찍으면 2개의 카드가 원상태로 돌아가지 않습니다. 예상되는 원인은 기본적으로 자바스크립트는 순서대로 코드에 따라 작동하지만 이벤트루프 이론에 따르면 setTimeout( )같은 함수가 사용될 경우 Background와 Task Que를 거쳐 호출스택으로 들어가서 동작을 하기 때문에 이런 현상이 벌어지는 경우로 추측 할 수 있습니다. 한번 이러한 버그에 대한 수정을 해 보도록 하겠습니다. 본 글은 제로초 TV 자바스크립트..
-
JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 2 - 3개요소(호출스택, 백그라운드, 태스크큐)를 이용한 테이블 이용하기컴퓨터 알아가기/JavaScript 2022. 10. 11. 19:30
자바스크립트에서는 이벤트루프(Event Loop)에 대한 이해가 상당히 중요합니다. 이전시간 이벤트루프 구성도를 공부하면서 간단한 동작원리를 이해 하였습니다. 이제부터는 이벤트루프 테이블을 개발하여 좀 더 쉽게 다가설 수 있는 방법이 없는지 고민해 보도록 하겠습니다. 이번에 들 예제는 제로초TV 자바스크립트 강좌를 참고 하였습니다. 1. 이벤트 루프 테이블 (Event Loop Table) 구성 Event Loop Table을 만들고자 하는 목적은 아직 머리속으로 계산이 어렵기 때문에 좀 더 쉽게 다가설 수 있는 방법이 있는지의 고민에서 출발 하였습니다. 지나시간 console.trace( )에 대한 내역을 table을 구성해 보겠습니다. 상기 함수식에 대한 Event Loop Table은 다음과 같습니..
-
JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 1 - 이론적 접근 (호출스택, 백그라운드, 태스크큐)컴퓨터 알아가기/JavaScript 2022. 10. 10. 19:30
이벤루프에 대한 이론적 도움은 제로초TV 자바스크립트 강좌를 참고 하였습니다. 자바스크립트에서 가장 중요한 이론 중 하나가 이벤트루프라고 합니다. 풀어쓰자면 이벤트가 행해지는 반복틀의 원리를 이해하고 틀린곳이 있다면 바르게 수정할 수 있는 능력을 키우자입니다. 다음 그림을 기준으로 이벤트루프를 이해해 보도록 하겠습니다. 1. 이벤트 루프 이론적 접근 이베트루프는 호출스택(Call Stack)과 백그라운드(Background) 태스크 큐(Task Que)로 이루어진 루프 관계를 뜻합니다. ① 호출스택 (Call Stack) 이벤트가 실행된다는 것은 함수호출이 이루어진다는 것이며 이는 Call Stack에서 함수가 실행이 된다는 뜻입니다. 자바스크립트에서는 모든 함수가 실행되기전 먼저 실행되는 함수가 있는데..
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 2 (셔플되는 동안 클릭방지, 완성된 카드 클릭방지, 동일한 카드 연달아 클릭방지)컴퓨터 알아가기/JavaScript 2022. 10. 9. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고하고 있습니다. 카드맞추기 게임 버그수정 2번째입니다. 가능한 많은 버그를 발견하는 것이 완벽한 프로그램을 위한 첫걸음입니다. 버그수정 1탄에서는 마지막 카드가 넘어가지 않았는데 MIssion Clear로 뜨는 원인을 setTimeout( ) 메소드로 1초의 여유를 두어 해결했고 셔플이 되는 동안 클릭을 방지하기 위해서 플래그변수를 활용하여 콘트롤 하였습니다. 버그수정 2만으로 다음 그림과 같이 같은 그림을 찾았으나 클릭을 하면 다시 뒤집어 지고 또 한 카드만 계속 클릭을 하여도 계속 이벤트클릭이 이루어지는 것을 방지해 보겠습니다. 1. 버그 현상 다음 그림에서 녹색으로 짝을 찾았으나 카드를 클릭하면 다시 뒤집어집니다. 아울러 임의의 주황색카드를 계속 클릭하여..
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 1 (마지막카드 뒤집히기 전 완료메시지, 셔플되는 동안 클릭금지)컴퓨터 알아가기/JavaScript 2022. 10. 8. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고로 공부하고 있습니다. 지난시간까지 카드맞츠기 게임에 대한 기본적인 코딩을 완료 하였습니다. 순서도상에 나와 있는 기본 프로그래밍을 다루어 보면서 흐름에 대한 느낌을 이해할 수 있는 시간이었습니다. 이제부터는 만들어진 게임에 대한 버그가 있는지를 최대한 확인하면서 각걱의 에러를 수정하도록 하겠습니다. 이 과정이야말로 좀 더 코딩에 대한 이해도가 높아질 수 있다고 보여지네요. 1. 마지막 카드가 뒤집히 전 게임 완료 우선 눈에 가장 먼저 띄는 버그는 마지막 카드가 넘겨지기 전에 게임이 미리 끝났다고 alert창이 뜨는 현상입니다. (원인 추축) 이는 마지막 카드가 뒤집히는 시간과 Mission Clear가 나오는 시간이 거의 동시에 이루어지기 때문으로 추측이 됩..
-
JavaScript 입문 : 플래그 변수 (Flag Variables) 복습컴퓨터 알아가기/JavaScript 2022. 10. 7. 19:30
자바스크립트에서 플래그 변수를 사용하는 경우가 있는데 개념에 대해 좀 더 공부를 하고 넘어 가도록 하겠습니다. 과거 틱택토( TicTacToe) 게임에서 사용이 되었고 지금 공부하고 있는 카드맞추기 게임에서도 반드시 필요한 기능입니다. 여러 자료를 찾아보면 어렵게 설명한 내용이 많아서 완전초보인 입장에서는 더 헷갈리기도 합니다. 가능한 완전 초보 개념에서 정리를 해 보고자 합니다. 1. 플래그 변수 (Flag Variables)란 블린(Boolean)값을 이용하여 프로그램의 흐름을 제어할 수 있습니다. 플래그 변수는 for 반목문 등에서 코드가 반복되면서 시간이 지체되거나 코드 자체가 무거워지는 것을 방지할 수 있습니다. 아울러, 원하는 결과 도출을 위해 플래그를 지정하는 방법을 사용합니다. 무슨말이냐 ..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (2)컴퓨터 알아가기/JavaScript 2022. 10. 6. 19:30
지난시간 이어서 카드 짝 맞추기에 대한 본격적인 코드를 공부해 보도록 하겠습니다. 참고로 본 글은 제로초 TV 자바스크립트 강좌를 참고로 하고 있습니다. 다시 순서도를 보겠습니다. 순서도 상 다음 주황색 영역을 만들어 보고자 합니다. 1. 카드 짝 맞추기 이제부터는 본격적으로 뒤집힌 카드가 2장인지 여부와 2장이 색이 다르면 다시 카드앞면으로 돌아가고 같은 색이면 완료배열에 넣고 return하는 프로그램을 만들도록 하겠습니다. 아래 코드는 onclickCard( ) 함수내에서 이루어지는 코드입니다. ① 카드가 2장인가 보통 코드의 기본을 만들때 반대로 하더군요. 즉, 카드가 2장인가의 코드는 카드가 2장이 아니면으로 하는게 풀어가는게 쉽습니다. ② 같은색인가 clicked에 넣은 색상이 첫번째 카드와 두..