[Error Handling] document is not defined

### 어떤 에러인가요?

```
$ ReferenceError: document is not defined
6 | }
7 |
> 8 | export const createElement = document.querySelector(
| ^
9 | '#CreateRoom',
10 | )! as HTMLElement;
```

### 에러 핸들링 방법

- 처음 사용할 때는 전역적으로 사용하기 위해 querySelector.ts파일을 만들어주어 export를 해주었다.
- 실행을 하는 순간 document를 찾을 수 없다는 오류가 났다.
- 원인을 찾아보니 **웹 페이지를 구성시킬 요소들이 렌더링 및 클라이언트로 로드되기 전에 document에 접근하여 View 요소를 조작하려하니 발생한 문제**였다.
- 전역적으로 사용해주는 것을 포기하고 컴포넌트(client\components\main\button.tsx, client\components\main\map)의 사이에 document를 사용해주니 오류가 나지 않았다.
```
const handleClick = (event: React.MouseEvent) => {
event.preventDefault();

const button: HTMLButtonElement = event.currentTarget;
const createElement = document.querySelector('#CreateRoom')! as HTMLElement;
const makeRoom = document.querySelector('#MakeRoom')! as HTMLElement;
const chatRoom = document.querySelector('#ChatRoom')! as HTMLElement;
if (button.value === 'CreateRoom') {
createElement.style.display = 'none';
makeRoom.style.display = 'flex';
} else if (button.value === 'MakeRoom') {
makeRoom.style.display = 'none';
chatRoom.style.display = 'flex';
} else if (button.value === '나가기') {
chatRoom.style.display = 'none';
createElement.style.display = 'flex';
}

window.kakao.maps.event.addListener(marker, 'click', function () {
createElement.style.display = 'none';
joinRoom.style.display = 'flex';
});
};

```

### 에러 핸들링을 위해 참고한 레퍼런스 링크
- Memory-It 의 Error Handling 예시입니다.
[블로그](https://helloinyong.tistory.com/248)