23.10.01~23.10.08

업무

1. 신규 서비스 개발사항 리팩토링

추석 연휴가 시작되기 직전, 신규 서비스 MVP를 개발했었다.

기획-디자인이 명확하게 나오지는 않은 상태라, 전체적인 동작만 확인했었는데...

의도대로 구현은 됐지만, 작성한 구조와 코드가 도무지 맘에 들지 않았다.

 

개선이 필요했던 이유는

1. 각 Class 들이 명확하게 추상화되지 않아 이해가 어려웠고

2. 불필요한 결합도로 인해 유지보수 및 확장이 어려웠기 때문! 

 

추석 내내 어떻하면 이를 개선할 수 있을지 고민했고,

출근 후 하루 정도 시간을 내 리팩토링을 진행할 수 있었다!

 

1. 시나리오 관리자 추상화

각 시나리오에 맞는 HTMLElement를 DOM에 그려줘야 했는데,

이전에는 시나리오 관리자라는 객체에서

1) 해당 시나리오에 맞는 HTMLElement를 생성하고

2) 각 시나리오 진행 상황을 관리하고

3) 시나리오 진행 상황에 맞는 HTML요소를 화면에 그려주는 역할을 한 번에 수행했었다.

→ 시나리오 관리자가 DOM 관리자와 지나치게 결합되어,

사용처에서 동작을 명확히 이해하기 어려움 + 하나의 변경이 다른 하나에 영향 미침의 문제가 발생했던 것!

 

따라서 시나리오 관리자를

1) HTML 요소 생성기

2) 진행 상황 및 step에 맞는 HTML Element 제어기

3) DOM 제어기 로 추상화한 후

각 모듈들은 interface를 통해 느슨하게 결합할 수 있도록 수정하였다.

 

2. Observer pattern을 통한 결합도 감소

사용자 action이 발생할 때마다

1) 다음 step에 해당하는 HTML Element에 event 추가(또 다음 step으로 넘어갈 수 있도록)

2) 해당 요소를 화면에 paint 

두 가지 행위가 일어나야 했다.

 

돌이켜보면 여기서 부터 설계가 잘못되었네!

Step제어자를 통해 화면에 보일 HTML Element가 변경되는데,

그 순간 해당 요소가 DOM에 생성되어야 하므로...

기존에는 의식의 흐름에 따라 renderer라는 interface를 객체 생성 시 넘겨받도록 했다.

해당 interface의 객체 메서드를 호출에 화면에 그리는 로직인데...

 

문제는

1) step 제어와 DOM상에 그리는 로직의 관심사가 다른데도 불구, interface를 통한 불필요한 결합 발생

2) DOM에 그리는 로직의 제어가 step 제어자에 위치 (→ 직관적인 코드 설계라 보기 어렵다 판단)

 

DOM 제어자는 step 제어자를 통해 화면에 그려질 요소가 변경되었을 경우,

이를 감지에 해당 요소를 화면에 그려주기만 하면 되는데... → Observer pattern을 통해 구현할 수 있을테다!

 

export default class SenarioBuilder {
      private senarios: Senario[] = [];
      private step: number = 1;
      private currentElement: HTMLElement | null = null;
      private observers: { update: (element: HTMLElement | null) => void }[] = [];

      // 관찰자를 등록하는 메서드
      addObserver(observer: any) {
        this.observers.push(observer);
      }

      // 상태 변경 시 관찰자들에게 알림
      private notifyObservers() {
        for (const observer of this.observers) {
          observer.update(this.currentElement);
        }
      }
      ...
  }

addObserver를 통해 observers를 등록하고,

상태 변경 시(여기서는 step에 따른 HTML요소 변경 시) 각 oberservers에게 이를 전파하는 형식으로 구현했다.

이때 observers는 update라는 메서드를 통해 해당 변경사항을 수신할 수 있다.

const senarioBuilder = new SenarioBuilder()
senarioBuilder.addObserver(DOM_제어객체);

이를 통해 step제어와 DOM 제어의 관심사를 분리할 수 있었다.

 

+ 이처럼 직접 구현할 수도 있겠지만...

팀원의 리뷰 중에 event-emitter를 통한 옵저버 패턴 구현 방법이 있다는 걸 알게 되어

https://nodejs.dev/en/learn/the-nodejs-event-emitter/

The Node.js Event emitter

결론적으론 node 내장 api인 event를 통해 옵저버 패턴을 사용하였다!