요즘 svelte랑 tailwind css 사용해서 조금씩 뭔가 만들어 보고 있는데
드롭다운 메뉴를 만들어 보려고 하던 와중
document is not defined 이런 에러가 나타났다.
문제가 되었던 코드는
|
1
2
3
4
5
6
7
|
$: {
if (isOpen) {
document.addEventListener('click', handleClickOutside);
} else {
document.removeEventListener('click', handleClickOutside);
}
}
|
cs |
이 부분이었다
이 에러는 JavaScript가 브라우저 내에서 실행되는 환경에서만 document 객체가 정의되기 때문에
Node.js 환경에서 실행될 때 발생하는 에러였다 SvelteKit 프로젝트에서는 서버에서 실행 중인
노드 코드에서는 document 객체를 사용할 수 없기 때문이었다.
그래서 스택오버플로우를 찾아보니 onMount를 사용해 해결 하는 방법이 있었다
|
1
2
3
4
5
6
7
8
9
10
11
|
import { onMount } from 'svelte';
$: {
if (isOpen) {
document.addEventListener('click', handleClickOutside);
} else {
onMount(() => {
document.removeEventListener('click', handleClickOutside);
});
}
}
|
cs |
이렇게 온마운트 안에 다큐먼트를 사용하는 코드를 넣으면 해결이 된다.
onMount는 컴포넌트가 처음으로 DOM에 렌더링 될 때 실행되는 함수이다.
아마 위 코드를 사용할때 다큐먼트가 정의되지 않은 상태에서 에러가 발생하는듯 하다.
스벨트의 라이프 싸이클에 대해서 나중에 한번 정리를 해봐야겠다.
'Yame Programmer > SVELTE' 카테고리의 다른 글
| [svelte] svelteKit 빌드 경로 /build 안나올때 (0) | 2023.03.09 |
|---|---|
| [svelte] svelteKit 빌드파일 위치 (0) | 2023.03.08 |
| [svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결 (0) | 2023.03.03 |
| [svelte] svelte tailWindcss 적용하기 (0) | 2023.02.20 |
| [svelte] svelteKit 시작 해보도록 하자 (0) | 2023.02.17 |
