[220723] Daily Study Note

  Today's Plan  

Studying JavaScript knowledge   

(1) 이벤트 위임

(2) 브라우저 기본 동작

(3) 커스텀 이벤트 디스패치

 

Coding JavaScript   

(1) Javascript Tic Tac Toe game project 마무리

(2) 깃허브에 업로드하고 내용 정리 

 

Training Coding Test with Python  

(1) 백준 코딩 테스트 기출 4문제

(2) 이번 주 코딩 테스트 문제들 전체 다시 풀기

---

1.

Coding JavaScript   

(1) Javascript Tic Tac Toe game project 마무리

 

1. [4a8f3cc] | Fix: TicTacToe Game App: fix userClickHandler function: make enable to swap player's turn

순서대로 동작하게끔 했습니다.

function userClickHandler(event){
    if (event.target.tagName === 'DIV'){
        let gridClass = '.'+ event.target.classList[1];
        let num = gridClass.charAt(gridClass.length-1);
        drawMark(gridClass, num, user['mark']);
        user['clicked'].push(num);
        
        if (checkWinner()){
            finishGame();
        } else {
            computerTurn = true;
            setTimeout(startGame,500);
        }
    }
}

function startGame(){
    if(computerTurn) playComputer();
    if(!computerTurn) playUser();  
}

computerTurn 변수에 startGame을 userClickHandler에서 처리하게 했습니다.

 

사실 사용자 선택 후 다시 startGame을 부르게 하는 과정에서 startGame을 startGame내부에서 호출하는 바람에

콜스택이 터지게 하는 문제가 생겼었습니다.

보드판에 클릭 이벤트 리스너를 등록하는 것을 클릭 이벤트가 발생하는 것으로 순간 착각했기 때문이었습니다.

클릭 이벤트 발생 기점으로 한 사이클이 끝난 것이기 때문에 그 안에 게임 종료조건 검사와 게임 재실행기능까지 수행하도록 수정했습니다.

 

 

2.  [d344cad] | Fix: TicTacToe Game App: fix draw Mark function: to update notSelected number list by index

function drawMark(gridClass, num, mark){
    let grid = document.querySelector(gridClass);
    let markingSpan = document.createElement('span');
    markingSpan.textContent = mark;
    
    grid.append(markingSpan);
    let numIndex = notSelected.indexOf(num);
    notSelected.splice(numIndex, 1);
    console.log(notSelected);
}

그림이 그려지면 남은 숫자 리스트에서 빠집니다.

컴퓨터가 랜덤 숫자를 고를 수 있는 옵션을 주기 위해 설정했던 notSelected 리스트가 업데이트되어지도록 했습니다.

 

여기서도 처음에 실수를 했는데, splice는 인덱스를 기준으로 수행된다는 것을 착각해 값을 그대로 넣어줬기 때문입니다. 하여 해당 값의 인덱스를 구해서 정확하게 그 자리의 값이 사라지도록 완성했습니다. 

 

 

3.  [5be2529] | Feat: TicTacToe Game App: complete checkWinner function

두 배열이 순서와 관계 없이 같은지를 체크해야 했습니다.

let winningSet = [
    ['0', '1', '2'],
    ['3', '4', '5'],
    ['6', '7', '8'],
    ['0', '3', '6'],
    ['1', '4', '7'],
    ['2', '5', '8'],
    ['0', '4', '8'],
    ['2', '4', '6']
];

...

function checkWinner(clickedList){
    if (clickedList.length < 3){
        return false
    }
    for (set of winningSet){
        if (set.every(num => clickedList.indexOf(num) != -1)) {
            return true
        }
    }
    return false
}

미리 우승 조건을 배열로 지정해주고 그 조건들에 해당하게 된다면 승리하였다고 알리게 했습니다.

1. 3개가 되지 않는 경우 판별 조건도 성립하지 않기에 불필요한 계산을 줄이기 위해 미리 false를 리턴합니다.

2. checkWinner function안에서 각 winning case배열을 every함수로 돌며,

그 winning case의 모든 값을,

판별당할 플레이어의 선택리스트가 갖고 있는지 여부를 확인했습니다. 맞다면 바로 true를 리턴합니다.

3. 모든 winning case에 속하지 않는 경우 false를 리턴합니다.

 

every메서드에 대해 확실히 몰라서 forEach처럼 사용했다가 오류가 났었습니다.

every메서드는 모든 아이템에 대해 주어지는 함수의 조건에 참/거짓인지만 판별하는 메서드입니다.

 

위와 같이 3개가 한 줄임이 확인되면,

finish function()으로 넘어갑니다.

 

 

4. [00badda] | Feat: TicTacToe Game App: complete finishGame function

function finishGame(winner){
    gameBoard.removeEventListener('click', userClickHandler);

    popUpTitle.textContent = (`${winner} win!!`);
    switch(winner){
        case 'Computer':
            popUpMessage.textContent = '';
            popUpStrongMessage.textContent = 'I was smarter than you! 😈😈'
            break
        case 'You':
            popUpMessage.textContent = '';
            popUpStrongMessage.textContent = 'You were smarter than me! 😻😻'

    }
    
    popUp.classList.add("showPopUp");
    console.log('finish');
    return
}

게임 종료 시의 기능을 작성했습니다.클릭 불가능하게 만들고, 팝업 재활용해 게임 재시작 여부를 묻게 했습니다.

사용자 우승 시 팝업

컴퓨터 우승 시 팝업

 

 

5. [7b6cdf1] | Feat: TicTacToe Game App: add Init function to initialize the game when it is restarted 

게임 재시작을 고려해 init 메서드를 추가해 게임 시작 시 게임을 초기화하도록 했습니다.

buttons.addEventListener('click', event =>{
    // ...
    // popUp.classList.remove("showPopUp");
    initGame();
    setTimeout(startGame,300);
});
function initGame(){
    notSelected = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    user['clicked'] = [];
    computer['clicked'] = [];
    computerTurn = true;
    grids.forEach(grid => grid.textContent = '');
}

: initGame 안에서 초기화할 정보들을 초기화해줍니다.

: 각 칸에 그려진 마킹기호들을 지우기 위해 grids배열에 forEach를 통해 접근해 내용을 빈 문자열로 지정했습니다.

: 게임 버튼 시작과 동시에 그려져 있으면 사용자와 컴퓨터 간의 커뮤니케이션 느낌이 덜한 것 같아 0.3초 후에 컴퓨터가 첫 마킹을 시작하게 했습니다.

 

6.  [912576d] | Style: TicTacToe Game App: add style on grid(box-shadow and hover effect)

더 그럴듯해보입니다.

더 게임스럽게 보이기 위해 그림자효과를 주고, 반응형으로 만들기 위해 호버이펙트를 추가했습니다.

 

7. [3d07381] | Feat: TicTacToe Game App: make restart popup if players cannot select any grid

아무도 이기지 않고 칸이 다 선택된 경우

마지막으로 정상적으로 작동하는지 확인하다가 경우의 수를 하나 더 발견했습니다.

아무도 이기는 사람 없이 칸이 다 찬다면, 이도 저도 못하고 끝나버리는 것이었습니다. 따라서 이 경우에 해당하는 경우 게임을 끝내고 재시작 여부 팝업을 띄우게 했습니다.

function checkWinner(clickedList){
   // ...
    if (user['clicked'].length + computer['clicked'].length == 9){
        finishGame('Nobody');
    }
    return false
}
function finishGame(winner){
    // ...
        case 'Nobody':
            popUpMessage.textContent = '';
            popUpStrongMessage.textContent = 'Cannot move 😵 Try Again 😟'
    }
    popUp.classList.add("showPopUp");
    console.log('finish');
    return
}

 

8. [7d9ffa3] | Fix: TicTacToe Game App: change code to make clean code

중복되는 코드 제거, 코딩 중 디버깅을 위한 console.log("xxx") 제거, 공백 정리, 변수/함수 위치 조정을 했습니다.

git show 한 결과입니다.

 

 

(2) 깃허브에 업로드하고 내용 정리 

 

 

---

2.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

 

이벤트 기초

1. 이벤트 위임

2. 브라우저 기본 동작

3. 커스텀 이벤트 디스패치

 

UI이벤트

1. 마우스 이벤트

2. Moving the mouse: mouseover/out, mouseenter/leave

3. 드래그 드롭 앤 마우스 이벤트

4. Pointer events

---

3.

Training Coding Test with Python

 

https://proprotrainee.tistory.com/87  

[ BOJ ] 15649 N과 M

https://proprotrainee.tistory.com/88

[ BOJ / 파이썬] 1926 그림

https://proprotrainee.tistory.com/89

[ BOJ / 파이썬 ] 미로 탐색

https://proprotrainee.tistory.com/90

[ BOJ / 파이썬 ] 7576 토마토