2023.09.06(분할과 정복)

SaGo_MunGcci·2023년 9월 7일
0

ReactJS

목록 보기
2/9

Definition Access

  • 분할과 정복

"분할과 정복"은 한 가지 복잡한 문제를 더 작은 부분으로 나누어 해결하는 전략을 가리키는 말이다. 이 전략은 대개 어려운 문제를 해결할 때 사용되며, 큰 문제를 해결하기 어려운 경우 작은 문제로 쪼개어 해결함으로써 더 효율적으로 해결할 수 있도록 도와준다.

이 전략은 전략적인 마인드셋으로, 많은 분야에서 적용될 수 있다. 예를 들어, 소프트웨어 개발에서는 큰 문제를 작은 모듈로 분할하여 각 모듈을 개발하고 테스트한 다음, 모듈을 결합하여 전체 소프트웨어를 완성하는 방식으로 사용될 수 있다.

또한, 전쟁이나 전략 게임에서도 "분할과 정복" 전략이 사용된다. 상대방의 강력한 세력을 한꺼번에 공격하기보다는 작은 부대로 나눠서 공격하여 상대방을 약화시키는 전략이다.

이러한 방법은 복잡한 문제를 더 쉽게 다룰 수 있게 해주는 강력한 도구로 사용될 수 있다.


Mechanism

  • 전제적인 맥락을 잡고 작게 나누어서 또 나누고 나누어서 개별 모듈을 하나씩 개발하는 방식이다.

  • 아래는 react로 분할과 정복으로 개발한 간단한 예제이다

  • 프로젝트가 커지고 componet가 많아지면 이러한 개발방식은 여러 개발자들이 나누어서 개발하고 이것을 통합시켜서 하나의 프로젝트를 개발할 수 있을것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- react import -->
  <!-- <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel import(jsx ->react로 변환) -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- 바벨 사용시 type 입력해주어야 한다. -->
  <script type="text/babel">
    const FindMax = ({ nums }) => {
      const findMax = (arr) => {
        // 단계 1: 문제를 분할한다.
        if (arr.length === 1) {
          return arr[0]
        }

        const mid = Math.floor(arr.length / 2)
        const left = arr.slice(0, mid)
        const right = arr.slice(mid)

        // 단계 2: 부분 문제를 해결한다.
        const maxLeft = findMax(left)
        const maxRight = findMax(right)

        // 단계 3: 결과를 합친다.
        return Math.max(maxLeft, maxRight)
      }

      const maxNumber = findMax(nums)

      return (
        <div>
          <h3>
            리스트 {nums.join(', ')}에서 최댓값은 {maxNumber}입니다.
          </h3>
        </div>
      )
    }

    const App = () => {
      const numbers = [3, 8, 1, 6, 2, 8, 5, 9]

      return (
        <div>
          <FindMax nums={numbers} />
        </div>
      )
    }

    const root = document.querySelector('#root')
    ReactDOM.render(<App />, root) // 생성한 element를 root인 위치에 그려줌(ReactDOM.render())
  </script>
</html>

Retrospection

  • 내가 니코샘과 개발해온 방식이 분할과 정복으로 해왔다는것을 알게되었다. 이러한 개발방식이 개발시 상당히 도움된다고 생각했고 마음에 들었다.

  • react에서는 component로 나누어 개발하는 방식이라고하니 코드의 재활용성도 꽤나 효율적일것이라고 생각이 들었다.(한번 제대로 만들었던 코드는 크게 수정할 필요가 없으니.)

- 이러한 개발방식은 낮선것이 아니라 우리가 일반적으로 문제에 직면했을때문제를 해결해나갔던 방식이다.



profile
이리저리 생각만 많은 사고뭉치입니다.

0개의 댓글