요즘 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에 렌더링 될 때 실행되는 함수이다.

아마 위 코드를 사용할때 다큐먼트가 정의되지 않은 상태에서 에러가 발생하는듯 하다.

스벨트의 라이프 싸이클에 대해서 나중에 한번 정리를 해봐야겠다.

 

 

MongoDB 기본 명령어


설치방법은 여러군데 소개되어 있으니 패스.


1. 접속 방법


C:\Program Files\MongoDB\Server\3.2\bin



윈도우에서 몽고DB 설치 경로의 bin 폴더를 환경변수 path에 등록하지 않았다면 


CMD에서 해당 경로로 이동후


만약 path설정 했다면 아무데서나 


1
> mongod
cs



라는 명령어로 몽고DB 서버를 실행 시킨다


그 이후


1
> mongo

cs


명령어로 접속 하면 된다.






2. 데이터베이스 생성



1
> use yamea_db
cs



use db명


이런식으로 DB를 생성해 줄 수 있다


현재 사용중인 DB를 확인 하려면


1
> db
cs



db라는 명령으를 사용하면 현재 사용중인 DB명이 나타난다



내가 만든 DB 리스트를 확인하는 방법은


1
> show dbs
cs


show dbs 라는 명령으를 사용 하면 되는데 데이터베이스를 만들자마자


확인하는 경우엔 목록이 뜨지 않는다


최소한 한개 document를 추가 해야 한다


1
> db.book.insert({"name""Yamea MongoDB""author""cheesu"});
cs


이런식으로 추가 하면


디비목록에 보여지게 된다.




3. 데이터베이스 제거


1
2
3
4
 > use yamea_db
switched to db mongodb_tutorial
> db.dropDatabase();
"dropped" : yamea_db "ok" : }
cs


이렇게 use 명령어로 삭제하려는 db 접속후


db.dropDatabase(); 


명령어를 사용하면 데이터베이스 제거를 할 수 있다.




4. 컬렉션 생성


1) createCollection 생성



use 명령어로 DB 접속 후


1
 > db.createCollection("book")
cs


명령어로 생성



2) createCollection + 옵션 생성





1
 > db.createCollection("articles", {capped: true, size: 6142800,max: 10000)}
cs



이렇게 한줄로 쭉 써도 되고


1
2
3
4
5
6
 > db.createCollection("articles", {
... capped: true,
... autoIndex: true,
... size: 6142800,
... max: 10000
... })
cs



이렇게 db.createCollection("articles",{  까지만 입력후 엔터를 쳐서


옵션을 하나씩 추가하는 방법도 가능하다


그런데 현재 버전에서 autoIndex를 포함시키면 에러가 나는데


이유는 모르겠다. 어차피 처음 배우는거니 크게 신경쓰진 말고 이런게 있구나 하고 알아두기만 하자



3) document추가로 인한 자동 생성


createCollection 명령어를 사용하지 않아도 document를 추가 하면 자동으로 컬렉션이 생성 된다.



이렇게 추가 한 컬렉션을 



1
 > show collections
cs


show collections 명령으를 사용하면 만든 컬렉션 목록을 보여주는데




이렇게 나타나게 된다.





5. 컬렉션 제거


컬렉션 제거는 drop() 메소드를 사용 한다.


1
2
3
4
5
6
7
8
9
10
11
> use test
switched to db test
> show collections
articles
book
people
> db.people.drop()
true
> show collections
articles
book
cs



이렇게 하면 people 컬렉션이 사라짐을 확인 할 수 있다.




6. Document 추가


이 Document가 일반 RDBMS에서 말하는 row, data, 행, 


뭐 이런거라고 생각하면 조금 이해가 빠를 거라 생각 된다.



추가 방법은 


1
> db.book.insert({"name""Yamea Guide""author""cheesu"})
cs



이렇게 하나의 다큐먼트를 추가하는 방법과


여러줄을 넣는 방법이 있는데 배열형식으로 전달해 주면 여러 다큐먼트를 동시에 추가 할 수 있다.


1
2
3
4
> db.book.insert([
... {"name""Book1""author""Cheesu"},
... {"name""Book2""author""Yamea"}
... ]);
cs



이런식으로 가능 하며


컬렉션의 다큐먼트 리스트를 확인 하는 방법은


1
> db.book.find()
cs


db.컬렉션이름.find()  이렇게 사용 하면 된다.



이렇게 넣은 document 들을 확인 할 수 있다.




7. Document 제거


db.컬렉션이름.remove(criteria, justOne)


이런 명령어를 사용 하는데


critetia : 삭제할 데이터의 기준값. 이 값이 {} 이면 컬렉션의 모든 데이터를 제거

justOne : 선택적 매개변수이며 이 값이 true면 1개의 다큐먼트만 제거 합니다. 

           생략하면 기본값은 false이며 criteria에 해당되는 모든 다큐먼트들을 제거 한다.



위의 document에서


name이 "yamea Book1"인 Document를 제거 하기 위해선

1
> db.book.remove({"name""Yamea Book1"})
cs



이런 명령어를 사용 하면 된다.





Yame Book1이 사라진걸 확인 할 수 있다.





+ Recent posts