설계 과정

설계를 여러번 해본 결과, 한번에 풀려고 하기보다는 각각의 기능을 하는 함수로 쪼개기로 했다. 그 결과 아래처럼 코드를 쪼갰다.

• 만들기 이전에 입력받은 문자열을 조금 가공했다.
  -> value: 요소값, check: true or false -> false라면 존재하는 것이고, true라면 파괴될 요소를 의미

1. 요소 별로 가로 +1 , 세로 +1 , 가로 +1 ,세로 +1 세개 다 현 요소와 같다면 체크해주는 코드
   만약 해당 요소가 가로 +1 , 세로 +1 , 가로 +1 ,세로 +1 세개 다 같다면, 이 부분의 check를 true로 한다. 이때, false->true로 간 요소는 answer++를 해준다.
2. 체크되어있는 요소를 아래부터 채워주는 코드
   맨 아래줄 행부터 체크를 하며, 위에 false인 값으로 채워넣는다. 이때 채워진 애들은 value는 위에 false였던 value로, check는 다시 false로 해준다. 또한 이때 false였던 요소는 true바꿔준다.
3. 최종적으로 위에 비어져있는 부분을 공백으로 만들어줄 코드
   true로 바꿔진 애들은 value를 없애면서 예외상황을 예방한다.

정답 코드

function solution(m, n, board) {
    var answer = 0;
    var checkAll = true;
    //기본적인 boardFun 틀 만들기
    var boardFun = new Array(m).fill([]);
    var boardRow;
    var plusArr = [];
    for(var i = 0;i<m;i++){
        boardRow = board[i].split("");
        plusArr = [];
        boardRow.forEach(element => {
            plusArr.push({value:element, check:false});
        });
        boardFun[i] = plusArr;
    }
    //반복한다. -> check가 false라면 탈출
    while(checkAll){
        checkAll = false;
           // 요소 별로  가로 +1 , 세로 +1 , 가로 +1 ,세로 +1 세개 다 현 요소와 같다면 체크해주는 코드
    for(var row = 0;row<m-1;row++){
        for(var col = 0;col<n-1;col++){
            var checking = boardFun[row][col];
            if(checking.value===boardFun[row+1][col].value&&checking.value===boardFun[row][col+1].value&&checking.value===boardFun[row+1][col+1].value){
                if(boardFun[row][col].check ===false){
                    boardFun[row][col].check = true;
                    answer++;
                    checkAll = true;
                }
                if(boardFun[row+1][col].check ===false){
                    boardFun[row+1][col].check = true;
                    answer++;
                    checkAll = true;
                }
                if(boardFun[row][col+1].check ===false){
                    boardFun[row][col+1].check = true;
                    answer++;
                    checkAll = true;
                }
                if(boardFun[row+1][col+1].check ===false){
                    boardFun[row+1][col+1].check = true;
                    answer++;
                    checkAll = true;
                }
            }
        }
    }


    
    // 체크되어있는 요소를 아래부터 채워주는 코드
    for(var col = 0;col<n;col++){
        for(var row = m-1;row>=0;row--){
            if(boardFun[row][col].check === true){
                for(var i =row-1;i>=0;i--){
                    if(boardFun[i][col].check === false){
                        boardFun[row][col].value = boardFun[i][col].value;
                        boardFun[i][col].check = true;
                        boardFun[row][col].check = false;
                        break;
                    }
                }
            }
        }
    }
    

        // 최종적으로 위에 비어져있는 부분을 공백으로 만들어줄 코드
        for(var row = 0;row<m-1;row++){
            for(var col = 0;col<n-1;col++){
                if(boardFun[row][col].check === true){
                    boardFun[row][col].value = "";
                }
            }
        }     
        
    }
    return answer;
}

결과

이번 문제는 이를 풀기위해 단계를 나눴으며, 이에 맞춘 각각의 코딩을 진행했다. 그래서 그런지 문제를 여러개 푸는 느낌이 들었다. 또한 문제의 코드 길이가 길어지게 된 것 같다.
하지만 이게 나쁘다고는 생각하지는 않는다. 이 덕분에 코드의 정확도가 올라갔고, 정답을 맞출 수 있었을 것이라고 생각한다.
어려운 문제라면, 한번에 풀려고 하지말고 단계를 나눠서 푸는 것이 매우 효율적이고 정확도를 끌어올릴 수 있는 방법이라고 생각한다.