25.07.20 프로그래머스 - 바탕화면 정리

문제 및 코드

 

프로그래머스

• 코딩테스트 연습 > 연습문제 > 바탕화면 정리

프로그래머스

function solution(wallpaper) {
    // 파일 위치 값 추출
    const points = wallpaper.flatMap((v, i) =>
        [...v].map((val, j) => (val === '#' ? [i, j] : null)).filter(Boolean)
    );
    
    // 추출된 위치 값을 x, y로 분리하여 각각 배열로 추출
    const x = points.map(([v]) => v);
    const y = points.map(([_, v]) => v);
    const min = (v) => Math.min(...v), max = (v) => Math.max(...v) + 1;
    
    // 가장 작은(가까운) 값의 위치 값과 가장 큰(먼) 값의 위치 값을 반환
    return [min(x), min(y), max(x), max(y)];
}

 

리팩토링

문제요약

 

• 바탕화면이 2차원 문자열 배열로 주어짐
• 각 칸은 빈칸(.) 또는 파일(#)로 구성
• 모든 파일을 한 번에 선택할 수 있는 최소 직사각형 영역을 찾아야 함
• 해당 영역의 좌표 [x1, y1, x2, y2]를 반환

 

초반에 규칙을 파악하는 과정만 지나고 나니 이번 문제는 전반적으로 크게 어렵진 않았다.
테스트 케이스도 한 번에 통과했기 때문에 이후에는 내가 작성한 코드를 ChatGPT를 활용해 리팩토링해보았다.

 

아래는 내가 처음 작성했던 코드다.

문제 풀이를 위한 접근 방식은 동일했다. 전체 파일의 위치를 찾은 뒤 이를 x, y 좌표로 나눠 각각의 최솟값과 최댓값을 구해 반환하는 방식으로 구현했다.

먼저 reduce를 사용해 파일이 있는 위치의 x, y 값을 추출했고 중복을 방지할 생각에 Set을 사용했지만 지금 글을 쓰며 보니 필요없는 부분이었다.(ㅎㅎ) 이후 각각의 x, y 배열을 정렬한 뒤 첫 번째 값과 마지막 값을 반환하도록 작성했었다.

function solution(wallpaper) {
    const arr = wallpaper.reduce((t, v, i) => {
        [...v].forEach((val, idx) => {
            if(val === '#'){
                t.x.add(i);
                t.y.add(idx);
            }
        })
        return t;
    }, {x: new Set([]), y: new Set([])})
    
    const xPos = [...arr.x].sort((a, b) => a - b);
    const yPos = [...arr.y].sort((a, b) => a - b);
    
    return [xPos[0], yPos[0], xPos[xPos.length - 1] + 1, yPos[yPos.length - 1] + 1];
}

 

 

이 코드를 ChatGPT에 넣고 리팩토링을 요청하니 flatMap을 활용해 파일이 있는 위치만 추출하고 map으로 x, y 좌표를 각각 분리한 뒤 Math.min과 Math.max로 각각의 최솟값과 최대값을 구하는 방식으로 코드를 훨씬 간결하게 정리하는 방식을 추천하였다.

추천한 방식을 바탕으로 최종적으로 아래의 코드가 작성되었다.

function solution(wallpaper) {
    // 파일 위치 값 추출
    const points = wallpaper.flatMap((v, i) =>
        [...v].map((val, j) => (val === '#' ? [i, j] : null)).filter(Boolean)
    );
    
    // 추출된 위치 값을 x, y로 분리하여 각각 배열로 추출
    const x = points.map(([v]) => v);
    const y = points.map(([_, v]) => v);
    const min = (v) => Math.min(...v), max = (v) => Math.max(...v) + 1;
    
    // 가장 작은(가까운) 값의 위치 값과 가장 큰(먼) 값의 위치 값을 반환
    return [min(x), min(y), max(x), max(y)];
}

 

flatMap 이란

 

flatMap은 기존에 있던 메서드 flat과 map을 합친 것으로 map으로 만들어진 배열에 flat을 붙이는 것과 동일한 결과를 낸다.

즉, 배열의 각 요소에 주어진 콜백 함수를 적용한 다음 그 결과를 한 단계씩 평탄화하여 형성된 새 배열을 반환하는 식으로 동작한다.

const arr = [1, 2, 3];

const result1 = arr.flatMap(v => [v, v + 1]);
const result2 = arr.map(v => [v, v + 1]).flat();

// result1, result2 모두 [1, 2, 2, 3, 3, 4]가 출력됨