# Window 이벤트를 listenTo로 감시하기

{% hint style="info" %}
[**stackoverflow**](https://stackoverflow.com/questions/9110060/how-do-i-add-a-resize-event-to-the-window-in-a-view-using-backbone/9110145)

[**extend사용법 - 한글**](https://dololak.tistory.com/774)

[**underscoreJS**](https://underscorejs.org/#extend)

[**BackboneJS EVENTS**](https://backbonejs.org/#Events)
{% endhint %}

## 상황

`user_menu_view` 를 켜놓은 상태에서 브라우저의 크기를 조절하면 `menu`의 위치는 처음 생성된 위치 그대로 고정이 되기 때문에 반응형으로 움직이지 못해서 보기에 매우 안좋다.

따라서 이 방법을 해결하기 위한 방법으로는 아래와 같은 아이디어가 있었다.

1. `user_menu_view`를 `user_unit` 의 내부에 만들어서 자연스럽게 브라우저의 크기에 맞춰서 렌더링하게 만들기
   * 이 방법으로 처음에 구현했었지만 메뉴뷰가 `appearance view` 자체에 속하게 되면서 오히려 보기 안좋아졌었다. css에 능통하다면 해결할 수 있었을거 같지만, 더 좋은 아이디어를 팀원분이 내주셔서 이 의견은 기각
2. 브라우저의 크기를 조절하는 순간 `user_menu_view` 를 `remove` 하는 아이디어
   * 이 아이디어를 채택!

## 해결

브라우저의 크기를 `resize` 에 대해 이벤트를 구독해두고 만약 발동하면 지우면 된다.

여기서 문제가 생겼다. 기존에는 뷰의 **events** 를 이용해서 DOM 에 이벤트를 등록하거나 또는 **listen** 를 이용해서 모델이나 컬렉션에 이벤트를 등록했다.

그런데 지금 이벤트를 등록해야 하는건 **window!!!**

이에 대한 해결법은 [stackoverflow](https://stackoverflow.com/questions/9110060/how-do-i-add-a-resize-event-to-the-window-in-a-view-using-backbone/9110145) 에 있었고 2가지의 방법이 있었다.

1. 제이쿼리의 **bind** 를 사용하는 방법
2. **underscorejs** 의 **\_extends** 을 이용해서 **listenTo** 를 사용하는 방법

당연히 두 번째 방법을 이용해서 구현하면 된다.

### underscoreJS의 extend 를 이용해서 이벤트 등록하기

[stackoverflow](https://stackoverflow.com/questions/9110060/how-do-i-add-a-resize-event-to-the-window-in-a-view-using-backbone/9110145) 의 아래를 보면 `_.extend(window, Backone.Events)` 구문이 존재한다. 이 구문을 해석해면" `window` 에 `Backbone.Events` 를 얕에 복사해서 넣는다" 이다. 즉 이제부터 `window` 을 이용해서 `Backbone.Events` 의 기능을 사용할 수 있다는 것.

이후에는 `view` 에서 `listenTo`를 걸어주면 된다 :)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined/backbonejs/window-listento.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.