3주차 프로젝트

느낀점: 배운내용&고민내용

구조에 대한 고민

현재 상태는 이벤트와 Model부분이 강하게 결합이 되어있어, 먼저 스토어를 구현했습니다. 스토어를 구현하면 결합도가 낮아질 것으로 생각했지만 오히려 절차만 복잡해졌습니다. 그래서 Store를 Vuex형태로 만들고 Flux패턴같이 단방향의 데이터 흐름으로 구조를 설계하기로 결정했습니다.

Flux패턴 도입 과정

먼저 사용자의 이벤트를 동작별로 분리했습니다. 뉴스스탠드의 좌우 버튼 기능, 탭 기능, 옵션 기능, 구독 기능 총 4부분으로 파일을 분리했고, 각 이벤트가 동작하면 스토어를 업데이트 하는 구조로 만들었습니다.

이벤트 동작 → 스토어 업데이트 → 비즈니스 로직 → View렌더링 이 와 같은 구조입니다.

Flux패턴을 도입해 봄으로써 얻은 장점입니다.

• 기존 Model부분에서 사용하던 많은 데이터가 store로 이동하니 데이터 복잡성이 해소되었습니다.
• 단방향의 흐름으로 구조를 설계하면서 기존 Model과 이벤트의 의존성을 낮췄습니다.
• 상태 변경이 어디서 일어났는지 추적할 수 있었습니다.

이벤트 위임

이벤트의 크기가 커지면서 각 요소를 querySelector로 찾는 비용도 증가하였고 addEventLisner를 많이 호출하게 되니 안 좋은 코드라 생각하여 이벤트 위임 방식을 적용했습니다. 이벤트 위임을 적용해 보면서 안좋았던 점은 컴포넌트의 이벤트 버튼이 많을 경우 분기를 해주기 때문에 그만큼 코드가 길어진다는 것입니다. 꼭 이베트 위임방식이 좋은 게 아니라는 것을 알게 되었고, 상황에 따라 적절히 사용해줘여 할거 같습니다.