리액트 주특기 플러스. (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가 매개변수로 주어질 때 바탕화면의 파일들을 한 번에 삭제하기 위해 최소한의 이동거리를 갖는 드래그의 시작점과 끝점을 담은 정수 배열을 return하는 solution 함수를 작성해 주세요. 드래그의 시작점이 (lux, luy), 끝점이 (rdx, rdy)라면 정수 배열 [lux, luy, rdx, rdy]를 return하면 됩니다.

문제 설명

머쓱이는 바탕화면에 저장된 파일이 너무 많아 정리를 결심했다. 모든 파일을 삭제하기 위해 한 번의 드래그로 파일들을 선택하는 최소 영역을 찾아야 한다.

문제 요구사항

1. 바탕화면은 wallpaper라는 문자열 배열로 주어진다.
   • 빈칸은 "."
   • 파일이 있는 칸은 "#"로 표시된다.
2. 드래그는 시작점 (lux, luy)와 끝점 (rdx, rdy)를 지정해, 해당 영역 안의 모든 파일을 선택한다.
3. 최소 이동 거리의 드래그 영역을 찾아 [lux, luy, rdx, rdy]를 반환한다.

문제 풀이

1. 문제 접근

파일("#")의 위치를 기준으로:

• 가장 위쪽 파일: 최소 x 좌표 (lux).
• 가장 왼쪽 파일: 최소 y 좌표 (luy).
• 가장 아래쪽 파일: 최대 x 좌표 + 1 (rdx).
• 가장 오른쪽 파일: 최대 y 좌표 + 1 (rdy).

파일 위치를 반복문으로 확인해 각 좌표를 구하고, 이를 정리해 반환하면 된다.

2. 코드

function solution(wallpaper) {

  let answer = [];

  const xArray = [];

  const luyArray = [];

  const rdyArray = [];

  for (let i = 0; i < wallpaper.length; i++) {

    if (wallpaper[i].includes("#")) {

      xArray.push(i);

      const splitedString = wallpaper[i].split("");

      let luys = splitedString.indexOf("#");

      let rdys = splitedString.lastIndexOf("#");

      luyArray.push(luys);

      rdyArray.push(rdys);

    }

  }

  answer.push(Math.min(...xArray));

  answer.push(Math.min(...luyArray));

  answer.push(Math.max(...xArray) + 1);

  answer.push(Math.max(...rdyArray) + 1);

  return answer;

}

 

코드 분석

1. xArray, luyArray, rdyArray의 역할

• xArray: 파일이 존재하는 행 번호를 저장.
• luyArray: 각 행에서 가장 왼쪽 파일의 열 번호를 저장.
• rdyArray: 각 행에서 가장 오른쪽 파일의 열 번호를 저장.

2. 반복문을 통해 파일 위치 파악

• wallpaper[i].includes("#"): 파일이 있는 행만 처리해 불필요한 연산을 줄임.
• split(""): 각 행의 문자열을 배열로 변환해 열 좌표를 쉽게 찾음.

3. 최소/최대값 계산

• Math.min(...xArray): 가장 위쪽 파일의 행 번호.
• Math.max(...rdyArray) + 1: 드래그 범위를 포함하기 위해 열 번호에 1을 더함.

트러블슈팅

문제 상황

초기 구현에서는 끝점의 rdx 값을 wallpaper.length로 설정했다. 하지만 이는 파일의 실제 위치를 반영하지 못하는 오류를 발생시켰다.

해결 방법

rdx 값을 xArray의 최대값에 1을 더하는 방식으로 수정했다. 이를 통해 드래그 영역이 정확히 계산되었다.

배운 점

1. 최소/최대값 활용
   파일의 좌표를 탐색하며 최소값과 최대값을 사용하는 패턴을 익힐 수 있었다.
2. 문제 꼼꼼히 읽기
   문제 조건 중 드래그 끝점은 포함 범위에 +1을 더해야 한다는 부분을 놓쳐 초기에 잘못된 결과를 반환했다.
   문제를 꼼꼼히 읽고 요구사항을 명확히 이해하는 습관이 중요하다.

효율적인 데이터 구조
여러 배열(xArray, luyArray, rdyArray)을 사용해 필요한 데이터를 효율적으로 관리할 수 있었다.