[TIL] 2021.02.16 (TUE) : 프로그램과 디자인패턴

# Today I Learned

* 프로그램과 디자인패턴의 관계

## 프로그램과 디자인 패턴의 관계

사실 오늘 한 것을 따지자면 더 많은 것 같긴하지만, 배웠다기보단 구현을 한 느낌이고 배웠다고 할 수 있는 것은 6시쯤 포코와 체프와 함께 왜 우리는 디자인 패턴을 사용하려고 하고, 그것이 정말 필요한건지? 무엇을 더 생각해 보아야 할 지에 대한 대화를 나눈 데에 있었다.

 

발단은 이랬다. 왜 우리는 MVC 를 쓰는걸까? 굳이 적용할 필요가 없는 곳에 편하다는 이유만으로 가져다 쓰고있는 것은 아닐까? 어떤 디자인 패턴을 쓰는 것이 좋은 것일까? 등등. 해결 되지 않는 문제들을 들고 포코를 소환했다. 

 

다음 예시를 통해 직접 구현하고, 요구사항이 변함에 따라 어떻게 구조를 짜는 것이 적합할 지를 고민해 보는 시간을 가졌고, 그 과정에서 배운 것은 프로그램이 먼저가 되어야지 디자인 패턴이 먼저가 되어서는 안된다는 것.

 

1) 만약 Counter 앱을 만들고 있다고 한다면 어떻게 구현할 것인가?

const $counterNumber = document.querySelector('.counter-number');
const $increaseButton = document.querySelector('#increase-button');

class Counter {
  constructor(count) {
    this.count = count;
  }

  increase() {
    this.count = this.count + 1;
  }
  
  decrease() {
  	this.count = this.count + 1;
  }

  getCount() {
    return this.count;
  }
}

const counter = new Counter(Number($counterNumber.innerText));

$increaseButton.addEventListener('click', () => {
  counter.increase();
  $counterNumber.innerText = counter.getCount();
})

2) 만약 요구 사항이 카운터의 count 가 업데이트 될 때 마다 출력되기(화면에 표시하기)를 원한다면?

const $counterNumber = document.querySelector('.counter-number');
const $increaseButton = document.querySelector('#increase-button');

class Counter {
  constructor(count) {
    this.count = count;
  }

  increase() {
    this.count = this.count + 1;
    $counterNumber.innerText = this.count;
  }
  
  decrease() {
  	this.count = this.count + 1;
    $counterNumber.innerText = this.count;
  }
}

const counter = new Counter(Number($counterNumber.innerText));

$increaseButton.addEventListener('click', () => {
  counter.increase();
})

 

3) 만약 함수가 increment, decrement 두 개가 아니라 50개, 100개가 넘어선다면?

const $counterNumber = document.querySelector('.counter-number');
const $increaseButton = document.querySelector('#increase-button');

class Counter {
  constructor(count) {
    this.count = count;
  }

  increase() {
    this.count = this.count + 1;
    $counterNumber.innerText = this.count;
  }
  
  decrease() {
  	this.count = this.count + 1;
    $counterNumber.innerText = this.count;
  }
  
  foo() {
  	$counterNumber.innerText = this.count;
  }
  .
  .
  .
  .
  
}

const counter = new Counter(Number($counterNumber.innerText));

$increaseButton.addEventListener('click', () => {
  counter.increase();
})

 

이 상황에서 MVC 패턴을 적용하는 것은 유용할까? MVC 패턴을 적용한다고 해도 함수가 늘어남에 따라 화면에 count 를 출력해주는 코드 한 줄이 들어가야 하는 것은 바뀌지 않는다. 오히려 상태값이 변하면 바로바로 출력을 할 수 있도록 observer 를 이용하는 것이 좋은 해결책이 될 수도 있다. 이처럼 어떤 패턴을 적용하는 것이 무조건 좋은 것은 아니고, 내가 구현하고자 하는 프로그램이 어떤 기능을 필요로 하는 지에 대해서 충분히 그 구조도 달라져야 한다는 것을 깨달을 수 있었다. (포코가 보면 으음 아니.. 이럴수도..?)

 

바로 구현을 하기 보다는, 내가 만드려는 앱이 어떤 앱인지 더 자세히 살펴보고 그때가서 구조를 고민해도 늦지 않는다는 것.

# Tommorow I Will Learn

* pub sub pattern
* observer pattern
* MVVM pattern

# Today I Thought

* 어제 하려던 것들은 거의 못했다. 아침부터 수업듣고, 페어프로그래밍하다가, 포코와 이런저런 대화를 나누고, 자동차경주 2단계를 시작했다. 이런 저런것들을 공부할 시간을 거의 가지지 못해서 오늘 계획한 것들의 반도 못한 것 같다.

* 그래도 포코와 약 2시간을 대화하면서 많은 것을 느꼈다. 가장 기억에 남는 것은 목적을 가지고 무언가를 하라는 것이었다. 우테코를 시작한지 벌써 2주가 지났는데 미션을 수행하는데에만 급급했지, 그래서 내가 왜 이걸 하고있는지에 대한 목적에 대해서는 생각해본 적이 없는 것 같았다. 하라니까 해야지 보다는, 내 목표를 달성하기 위한 수단일텐데, 학교에서 공부하던 방식에서 벗어나려 노력할 필요가 있다는 생각이 들었다.

* 내 코드를 누군가 보고 왜 이렇게 했어요? 라고 누군가 묻는다면 논리적으로 대답할 수 없을 것 같다. 깊이 고민을 한 것이 아닌것도 맞고, 솔직히는 아직도 '왜?'라는 물음에 대답을 잘 못하겠다. 대학 헛다닌 것 같기도 하고.. 결국 README 를 작성하고, 주석을 달고 하는 과정 하나하나 읽는 사람을 설득하기 위함이라는 것도, 덕분에 readme 를 어떻게 작성해야 하는 지와 같이 자잘하게 품고있던 의문도 해결할 수 있었다.

* 모르는 것, 고민되는 것들에 대해서 물어볼 수 있는 사람들이 부럽다. 오늘의 경우에는 티케와 체프였는데, 덕분에 많은 것을 배울 수 있었다.오늘 준과 함께 데일리 미팅시간에 학습 성향 검사를 했는데, 설문을 하면서도 아 내가 생각을 별로 안하고 사는구나 싶었다. 이건 늘 꼽는 내 단점중에 하나인데, '~~가 왜 좋아?' 라고 물으면 '좋으니까?' 라는 답변밖에 못한다. 글을 쓰면서 드는 생각인데, 나 조차도 내가 어떤 사람인지, 왜 그렇게 행동하는지 알지도 못하면서 코드를 짜면서 내가 왜 이런 코드를 짰는지 설명할 수 있다는 것도 웃긴 것 같다. 의식적으로 생각하는 연습을 해나가야겠다.

* 아 그리고 고민을 오래해 보아야할 주제가 생겼다. 프론트엔드 개발자라면 고객의 경험을 생각할 수 있어야한다는 말에, 문득 내가 왜 이게 하고싶었는지에 대한 생각이 들었다. 오늘 계속 쓰는 말인 것 같긴한데, 솔직히 그냥 재미있어서 끝. 이 맞다. 난 정말로 어떤게 하고 싶은 걸까?