[프로그래머스 JS] 바탕화면 정리

📖 문제 설명

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

컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 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 = [".#...", "..#..", "...#."]인 바탕화면을 그림으로 나타내면 다음과 같습니다.

출처: 프로그래머스

머쓱이의 컴퓨터 바탕화면의 상태를 나타내는 문자열 배열 wallpaper가 매개변수로 주어질 때 바탕화면의 파일들을 한 번에 삭제하기 위해 최소한의 이동거리를 갖는 드래그의 시작점과 끝점을 담은 정수 배열을 return하는 so lution 함수를 작성해 주세요. 드래그의 시작점이 (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	result
[".#...", "..#..", "...#."]	[0, 1, 3, 4]
["..........", ".....#....", "......##..", "...##.....", "....#....."]	[1, 3, 5, 8]
[".##...##.", "#..#.#..#", "#...#...#", ".#.....#.", "..#...#..", "...#.#...", "....#...."]	[0, 0, 7, 9]
["..", "#."]	[1, 0, 2, 1]

 

---

⌨️ 나의 풀이 (코드)

 

늘 그렇듯 의사코드를 작성했다.

 

1) 시작지점을 특정하기 위해 wallpaper의 요소를 순회하며 각 #의 좌표를 기록 (i.e. wallpaper[0][1], ... , wallpaper[2][3])
2) 기록된 각 좌표를 대조해 가장 왼쪽에 있는 # (luy), 가장 위에 있는 # (lux), 가장 오른쪽에 있는 # (rdy), 가장 아래에 있는 # (rdx)을 확인 => wallpaper[0][1]에 파일이 있어도 wallpaper[1][0]에 파일이 있다면 범위가 왼쪽으로 더 넓게 설정되어야하기 때문 (0,1) -> (0,0)
3) 2의 정보를 토대로 시작점 S와 끝점 E의 좌표를 반환

 

이후 의사코드를 기반으로 코드를 작성했다. 

 

function solution(wallpaper) {
  const fileLocs = [];
  wallpaper.forEach((row, rowIdx) => {
    row.split("").forEach((el, elIdx) => {
      if (el === "#") {
        fileLocs.push({ row: rowIdx, col: elIdx });
      }
    });
  });

  // 바탕화면에는 적어도 하나의 파일이 있으므로 최초의 lux,ldy는 첫번째 원소의 row,col값
  let [lux, luy] = [fileLocs[0].row, fileLocs[0].col];
  let [rdx, rdy] = [lux + 1, luy + 1];

  for (let i = 1; i < fileLocs.length; i++) {
    
    if (fileLocs[i].col < luy) {
      luy = fileLocs[i].col;
    }
    
    if (fileLocs[i].row >= rdx) {
      rdx = fileLocs[i].row + 1;
    }
    
    if (fileLocs[i].col >= rdy) {
      rdy = fileLocs[i].col + 1;
    }

  }

  return [lux, luy, rdx, rdy];
}

 

코드 자체는 어렵지 않았는데, 코드를 구성하면서 헷갈렸던 점은 각 파일의 위치를 기록한 row, col 키-값 쌍을 최초에는 X, Y라고 선언해서 용어의 사용에 혼동이 있었다.

 

또한, 코드를 구성하는데 있어 rdx, rdy의 좌표를 생각하는데 시간이 꽤 걸렸다. 최초 파일을 기준으로 x, y 좌표를 +1 하는 부분까지는 어렵지 않게 생각했는데, 파일이 하나가 아닐 때 해당 드래그 범위를 고려한 좌표를 변경하는 부분이 다소 헷갈렸다. 파일이 최소 2개 이상이라면 for 반복문으로 최초 파일 이후의 파일들을 확인하고, 해당 파일의 칸 (row, col)에서 +1씩 해주면 되는 의외로 간단한 로직이었다.

 

에러는 발생하지 않았지만, 올바른 값을 반환하기 위해 생각하는 과정이 의외로 길어진 문제였다.

 

---

📝 Note

다른 사람의 풀이는 더 깔끔했다.

 

function solution(wallpaper) {
    let left = [];
    let top = [];
    let right = []
    let bottom = [];
    wallpaper.forEach((v,i) => {
        [...v].forEach((val,ind) => {
            if(val === "#") {
                left.push(i)
                top.push(ind)
                right.push(i + 1)
                bottom.push(ind + 1)
            }
        })
    })
    return [Math.min(...left), Math.min(...top), Math.max(...right), Math.max(...bottom)]
}

 

각 좌표값들을 left, top, right, bottom의 배열로 구성한 후 해당 좌표들의 값을 배열에 모두 모은 뒤 Math.min, max를 활용해 해당 배열 중 가장 적은 값과 큰 값을 반환하는 기발한 방식이었다. 이후 문제 풀이에 참고할 수 있을 것 같다.