Q3. 함수와 클래스의 단일 책임 원칙(SRP)은 실제로 어떻게 적용하나요?

크루의 질문

“컴포넌트를 최대한 작게 나누는 것이 좋을까요? 1개의 컴포넌트가 담당하는 역할이 많아지니 가독성도 떨어지고 단일 책임의 원칙(?)에도 맞지 않는 것같아서 고민됩니다!” — PR #5 (링크 )

“getAndClearBuyValue 함수는 함수명에서 알 수 있듯이 buyInput value를 가져오고, 그 input을 비워줍니다. 이게 하나의 함수에서 두 동작을 하는거라고 생각해서 분리하려 했는데, 굳이 너무 작은 단위도 분리해야 하나 싶어서 그냥 했습니다.” — PR #10 (링크 )

“역할을 나누다 보면 파일이 너무 많아지는데 괜찮은지” — PR #102 (링크 )

AS-IS 코드


class LottoApp {
  constructor() {
    this.lottos = [];
    this.winningNumbers = [];
  }
 
  purchaseLotto(money) {
    if (money < 1000) throw new Error('금액 부족');
    const count = Math.floor(money / 1000);
    for (let i = 0; i < count; i++) {
      const numbers = this.generateRandomNumbers();
      this.lottos.push(numbers);
    }
    document.querySelector('.lotto-count').textContent = `${count}개`;
    this.lottos.forEach((lotto) => {
      const li = document.createElement('li');
      li.textContent = lotto.join(', ');
      document.querySelector('.lotto-list').appendChild(li);
    });
  }
 
  generateRandomNumbers() { /* ... */ }
  checkWinning() { /* ... */ }
  calculateProfit() { /* ... */ }
  renderResult() { /* ... */ }
}