Next.js에서 MongoDB 사용하기

1. DB에 데이터 넣어보기
   

Add my Own Data버튼을 클릭하여 데이터를 넣어본다.

Database는 하나의 프로젝트를 의미한다. 하나의 사이트가 여러개의 Database를 사용하긴 하지만 여기서는 하나만 사용한다.

collection은 하나의 폴더이다. 몽고 db에 데이터를 저장할 때 컬렉션을 만들고 그 안에 document를 만들고 그 안에 데이터를 넣는다. 쉽게 생각하면 폴더, 메모장, 메모장 안 내용을 생각하면 쉬울 것 같다.

2. project에서 mongodb를 사용하려면 세팅을 해야한다.
   

DB접속 URL에 자신의 DB URL을 적는다. password부분에는 자신의 admin계정 비밀번호를 적는다.
connect함수는 비동기 함수이기 때문에 async, await를 사용한다.
하지만 문제점이 발생한다. 해당 페이지를 여러번 실행하면 connect가 자주 실행한다.
connect가 자주 실행되면 좋지 않다.
그래서 next.js 서버 띄울 때 1번만 실행하도록 하자

util이라는 폴더를 만들고 database.js파일을 만들자.

이것은 몽고DB에서 next.js에서는 이렇게 쓰라고 한 코드이다. 개발서버에서 파일저장하면 모든 JS파일 코드 전부 다시 읽기 때문에 조건문을 추가해준다.

커넥션 하는 부분을 따로 파일로 나누니까 훨씬 간결한 코드가 되었다. 잘 되는지 확인해보자

잘 가져온다.

DB 입출력 코드는 server Component 안에서만 써야 한다. client component 안에서 쓰게 되면 민감한 정보같은 경우 보안 상 문제가 생길 수도 있다.