분류 전체보기
-
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에 넣은 색상이 첫번째 카드와 두..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 1. 카드 뒷면 보여주기 일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout( ) 함수를 활용합니다. startGame( ) 함수내에 작성해야 되겠죠. 4개의 태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add( ) 메소드를 ..
-
JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념 익히기 (3) : 화살표 함수 및 Strict Mode컴퓨터 알아가기/JavaScript 2022. 10. 4. 19:30
이제 this의 개념이 어느정도 잡혀 가는 느낌입니다. 만일 this라는 개념이 헷갈리거나 하면 반드시 확실하게 개념익히기 1탄과 2탄을 꼭 읽어보시기 바랍니다. this라는 개념의 범위가 넓겠지만 1탄과 2탄이 전부이고요. 금일 정리할 사항은 중요하지만 잘 모르는 경우 잘 사용안해도 될 것 같습니다. 자바스크립트 처음 공부할 때 함수사용에 있어 function( ) { }나 ( ) => { }함수는 같게 사용한다고 일단 머리속에 넣오 놓았습니다만 사실 약간의 차이가 있다고 했는데 그 중 하나가 this를 활용할 때 일반함수식과 화살표 함수식에서 차이를 볼 수 있습니다. 2탄에서 사용한 예제를 가지고 보겠습니다. 1. 화살표 함수에서의 this 다음 코드를 보면 첫번째 콘솔은 fruit 객체를 나타내고 ..