2021-02-05(Fri)

항목	내용
학습 날짜	2021-02-05(금)
학습 시간	11:00~24:00
학습 범위 및 주제	Backbone, javascript
학습 목표	Appearance view의 이벤트 핸들링 방식을 확정한다.
동료 학습 방법	sanam, jujeong님과 appearance_view를 liveshare로 함께 구현

상세 학습 내용

기존에 appearance_view가 이벤트를 관리하는 방식이 Backbone.js에서 지향하는 방식과 많이 다른 것을 느꼈다.

문제)

online_user_list_view에서 user_unit을 클릭하여 user_menu를 토글시킨 후, 다른 user_unit을 클릭시켰을 때 기존에 토글되었던 user_menu를 없애야했다. 이를 위해 jQuery로 DOM 요소를 직접 참조하여 삭제해왔으나, 해당 DOM요소에 바인딩되어있던 이벤트들이 제대로 stopListening되는 것이 보장되지 않았다.

거기다 이벤트 상태를 추적하기 쉬우라고 model과 collection이 있는데 제대로 활용되지 않았다. 애플리케이션에서 다른 부분을 호출하는 방법을 알고 있으면 안됟나.

해결)

'Backbone 스럽게' 아래 과정을 거치도록 하여 해결하였다.

1. user_unit A를 클릭한다. 그럼 createUserMenu가 동작하고, user model에 'createUserMenu' 이벤트를 트리거한다.

2. 이를 감지한 user_unit A의 user_unit_view는 user_menu_view를 생성한다.

3. 다른 user_unit B를 클릭한다. 그럼 deleteAndCreateUserMenu가 동작하고, users collection에 'deleteUserMenu' 이벤트를 트리거한다. 이후 user_unit B의 user_unit_view와 연동되어있는 user model에 'createUserMenu' 이벤트를 트리거한다.

4. 이를 감지한 user_unit_view들은 user_menu_view를 destory하고, 연이어 user_unit B의 user_unit_view가 user_menu_view를 생성한다.

이 과정에서 Backbone view 생성의 세부사항을 확인할 수 있었다.

의문)

view를 초기화할 때 인자로 넘겨주는 해시에 model이 포함되어있으면 그 키의 밸류는 this.model로 바로 접근이 가능하다. 그럼 parent 같은 것도 키로 넘겨주면 될까?

답)

확인해보니 안된다.

image-20210206150056901

image-20210206150242489

model은 뜨는데 parent는 안떴다. backbone view 내적으로 model 해시키를 확인하여 attribute를 셋팅하지만 parent 해시키는 확인하지 않는 것이다. 때문에 아래처럼 직접 객체에 attribute를 추가해줘야한다.

this.parent = options.parent

학습 내용에 대한 개인적인 총평

개인 사정상 늦게 참여했는데 구상한대로 잘 작동하는 코드를 만들어낸 것이 만족스럽다. 하지만 어떤 방식의 이벤트 핸들링이 최적일지에 대한 고민은 깊어만 간다.. 그리고 컬렉션, 모델이 서버와 데이터를 주고받을 때 Backbone에 정의된 fetch 함수로 주고받아야만하는가? 주말에 좀 탐구해봐야겠다.

다음 학습 계획

• Appearance view 완성