[ 𝗽𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗲𝗿𝘀 ] 바탕화면 정리 - 시뮬레이션 | JavaScript

🎯 문제 설명

🧩 프로그래머스 Lv.1 - 바탕화면 정리

코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다.

컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을 가집니다. 드래그를 하면 파일들을 선택할 수 있고, 선택된 파일들을 삭제할 수 있습니다. 머쓱이는 최소한의 이동거리를 갖는 한 번의 드래그로 모든 파일을 선택해서 한 번에 지우려고 하며 드래그로 파일들을 선택하는 방법은 다음과 같습니다.

• 드래그는 바탕화면의 격자점 S(lux, luy)를 마우스 왼쪽 버튼으로 클릭한 상태로 격자점 E(rdx, rdy)로 이동한 뒤 마우스 왼쪽 버튼을 떼는 행동입니다. 이때, "점 S에서 점 E로 드래그한다"고 표현하고 점 S와 점 E를 각각 드래그의 시작점, 끝점이라고 표현합니다.
• 점 S(lux, luy)에서 점 E(rdx, rdy)로 드래그를 할 때, "드래그 한 거리"는 |rdx - lux| + |rdy - luy|로 정의합니다.
• 점 S에서 점 E로 드래그를 하면 바탕화면에서 두 격자점을 각각 왼쪽 위, 오른쪽 아래로 하는 직사각형 내부에 있는 모든 파일이 선택됩니다.

예를 들어 wallpaper = [".#...", "..#..", "...#."]인 바탕화면을 그림으로 나타내면 다음과 같습니다.

이러한 바탕화면에서 다음 그림과 같이 S(0, 1)에서 E(3, 4)로 드래그하면 세 개의 파일이 모두 선택되므로 드래그 한 거리 (3 - 0) + (4 - 1) = 6을 최솟값으로 모든 파일을 선택 가능합니다.

머쓱이의 컴퓨터 바탕화면의 상태를 나타내는 문자열 배열 wallpaper가 매개변수로 주어질 때 바탕화면의 파일들을 한 번에 삭제하기 위해 최소한의 이동거리를 갖는 드래그의 시작점과 끝점을 담은 정수 배열을 return하는 solution 함수를 작성해 주세요. 드래그의 시작점이 (lux, luy), 끝점이 (rdx, rdy)라면 정수 배열 [lux, luy, rdx, rdy]를 return하면 됩니다.

🥅 제한 사항

• 1 ≤ wallpaper의 길이 ≤ 50
• 1 ≤ wallpaper[i]의 길이 ≤ 50
  • wallpaper의 모든 원소의 길이는 동일합니다.
• wallpaper[i][j]는 바탕화면에서 i + 1행 j + 1열에 해당하는 칸의 상태를 나타냅니다.
• wallpaper[i][j]는 "#" 또는 "."의 값만 가집니다.
• 바탕화면에는 적어도 하나의 파일이 있습니다.
• 드래그 시작점 (lux, luy)와 끝점 (rdx, rdy)는 lux < rdx, luy < rdy를 만족해야 합니다.

📍 입출력 예

wallpaper	return
[".#...", "..#..", "...#."]	[0, 1, 3, 4]
["..........", ".....#....", "......##..", "...##.....", "....#....."]	[1, 3, 5, 8]

👩🏻‍💻 문제 풀이

우선 문제 해결 방법을 떠올리는 것 자체는 간단했습니다.

• lux(top) : wallpaper 배열에서 가장 먼저 ‘#’이 들어있는 요소의 위치 (가장 위에 있는 파일 위치)
• luy(left) : 문자열 중 가장 앞에 있는 ‘#’의 위치 (가장 왼쪽에 있는 파일 위치)
• rdx(bottom) : wallpaper 배열에서 가장 뒤에 ‘#’이 들어있는 요소의 위치 + 1 (가장 밑에 있는 파일 위치)
• rdy(right) : 문자열 중 가장 뒤에 있는 ‘#’의 위치 + 1 (가장 오른쪽에 있는 파일 위치)

각 점의 값을 구하기 위해, 처음에는 다음과 같이 코드를 작성했습니다.

function solution(wallpaper) {
	// 각 문자열의 첫 '#' 인덱스 배열
  const findTopArr = wallpaper.map(row => row.indexOf('#'));
  // '#'이 없는 경우는 -1이므로 -1보다 큰 첫번째 수를 구함
  const top = findTopArr.findIndex(index => index >= 0);

	// 첫 인덱스 배열에서 -1을 제외하고 가장 작은 값을 구함
  const findLeftArr = findTopArr.filter(index => index >= 0);
  const left = Math.min(...findLeftArr);

	// 각 문자열의 마지막 '#' 인덱스 배열을 뒤집은 배열
  const findBottomArr = wallpaper.map(row => row.lastIndexOf('#')).reverse();
  // 전체 길이에서 '#'이 없는 경우를 제외하고 가장 처음 등장하는 인덱스를 빼서 구함
  const bottom = wallpaper.length - findBottomArr.findIndex(index => index >= 0);
  // 가장 큰 값이 곧 가장 오른쪽에 있는 수임
  const right = Math.max(...findBottomArr) + 1;

  return [top, left, bottom, right];
}

프로젝트에서는 for 반복문보다 배열 메서드를 많이 사용하다보니 익숙한 방식을 사용하게 되었습니다.

하지만, 배열을 정제하는 메서드가 중복되어 비효율적이고 가독성이 떨어집니다. 또, 코딩 테스트에서는 반복문이 더 간결하고 빠른 경우가 있어 반복문을 사용하는 방식으로 리팩토링하였습니다.

function solution(wallpaper) {
	// length를 변수에 저장해서 사용하면, 매번 계산하지 않아도 됩니다.
	const rows = wallpaper.length;
	const cols = wallpaper[0].length;
	
	// 우선 각 값을 구하기 위해 
	let top = rows; // 배열의 전체 길이
	let left = cols; // 문자열의 길이
	let bottom = 0;
	let right = 0;
	
	for(let i = 0; i < rows; i++) {
		for(let j = 0; j < cols; j++) {
			// 문자열을 돌면서 '#'을 만나면
			if(wallpaper[i][j] === '#') {
				top = Math.min(top, i); // 기존의 top 위치와 비교해 가장 작은, 즉 가장 위에 있는 위치를 저장
				left = Math.min(left, j); // 기존의 left위치와 비교해 가장 왼쪽에 있는 위치를 저장
				bottom = Math.max(bottom, i + 1); // 기존의 bottom 위치와 비교해 가장 아래에 있는 위치를 저장
				right = Math.max(right, j + 1); // 기존의 right 위치와 비교해 가장 오른쪽에 있는 위치를 저장
			}
		}
	}
	return [top, left, bottom, right]
}

첫번째 입력 예를 기준으로 보면 다음과 같이 동작합니다.

기존에 두 번 map을 돌려서 O(2nm)이던 시간복잡도를 O(nm)으로 한 번의 순회로 값을 모두 도출할 수 있습니다. 성능면에서 큰 차이는 아니지만, 코드 가독성이 좋아졌습니다.