> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/hanna/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/hanna/hanna-log/march/4.md).

# 4일

## 3/4 

#### JS

* [window.beforeunload](https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event) 이벤트 \
  → 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있다. 

```javascript
const closeListener = () => {
   window.alert('닫기')
}

window.addEventListener('beforeunload', closeListener)
```

* getBoundingCilentRect() \
  → 뷰포트를 기준으로 요소의 크기와 너비/ 위치 정보를 확인 할 수 있다. 
* 랜덤 유틸리티 함수 

```javascript
const MESSAGES = {
  good: '좋아요',
  soGood: '훈훈해요',
  sad: '슬퍼요',
  angry: '화나요',
  want: '후속기사원해요',
}

function random() {
  const keys = Object.keys(MESSAGES)
  const randomValue = Math.floor(Math.random() * keys.length)
  return keys[randomValue]
}
```

#### React 

* JSX에서 switch문을 사용한 조건부 예제 (랜덤 유틸리티 함수가 있어서 공부하기 좋음) 

{% embed url="<https://codesandbox.io/s/jsx-jogeonbu-rendeoring-yeje-5wsm0>" %}