[Next.js] MongoDB 사용법

  데이터 조회 

 

Clusters - Browse Collection 으로 데이터 조회 가능.

---

데이터 생성

Create Database 클릭해서 생성 가능.

1) database (프로젝트) 이름

2) collection(폴더) 이름

document 는 파일

 

Insert Document 이걸로 파일(데이터들) 생성.

---

Next.js 환경에서 MongoDB 연결

 

1) 몽고DB 라이브러리 설치 

npm install mongodb

2) DB에 접속하기
- 서버 컴포넌트

서버 컴포넌트 안에다가

MongoClient 써주고 import.

const client = await MongoClient.connect('DB접속URL~~', { useNewUrlParser: true })
const db = client.db("forum")

그리고, 이 코드를 컴포넌트 안에다가 써줘야함. 

하단에는 생성해줬던 데이터베이스의 이름을 적어준 것.

 

그 다음,

db.collection('post').find()

db.collection('post').find() 를 적어줌.

=  post 컬렉션에 있는 모든 데이터 출력해준다. 

 

3) DB접속 URL 위치 찾아보기. 

Cluster - Connect 접속

- Connect your application  에 있는 Drivers 클릭

그 다음 2번에 있는 URL 복사

 

그리고 DB 에 그대로 복사해서 집어넣어주면 됨. 

 

const client = await MongoClient.connect('DB접속URL~~', { useNewUrlParser: true })
const db = client.db("forum")

 

**DB 접속명하고 비번으로 수정줘야함 

+ await 갖다 쓰려면 컴포넌트에 async 붙여주기. 

 

4) 새로고침 할 땜마다 코드 실행되지 않도록 옮겨주기. 
= app 폴더 바깥에다 폴더 하나 생성.

DB 연결 코드는 Next.js 서버 띄울 때 1번만 실행되는게 좋음. 

 

app 폴더 바깥에다 폴더( util ) 하나 생성.

util 폴더 안에다가 database.js 파일 생성

 

database.js 폴더 안에다가 코드 옮겨주기.

import { MongoClient } from 'mongodb'
const url = 'DB접속URL~~'
const options = { useNewUrlParser: true }
let connectDB

if (process.env.NODE_ENV === 'development') {
  if (!global._mongo) {
    global._mongo = new MongoClient(url, options).connect()
  }
  connectDB = global._mongo
} else {
  connectDB = new MongoClient(url, options).connect()
}
export { connectDB }

 

connectDB 변수에 넣고 갖다 쓰면 됨.

 

 

5) 그리고 다시 page.js 로 가서 export 한 connectDB 변수 갖고온다. 

- import 필수

import { connectDB } from "@/util/database";
import { MongoClient } from "mongodb";

export default async function Home() {
  const client = await connectDB;
  const db = client.db("forum");

  return <div>asdf</div>;
}

이렇게 갖고와줌.

const client = await connectDB;
  const db = client.db("forum");

client 에 넣어줬던 내용이 변수(connectDB) 로 대체됨.

 

그리고 DB 에 있는 데이터 꺼내오려면

await db.ccollection('post').find().toArray()

를 아래에다가 써준다.

let result = await db.ccollection('post').find().toArray()

이걸 변수에 저장해서도 출력해서 확인 가능. 

= 터미널로 확인 가능 

 

*아까 꺼내올 때 써준  코드랑 차이가 있음.

db.collection('post').find()

6) 
const client = await connectDB;
const db = client.db("forum");

3줄을 2줄로 
축약 방법 알아보기.

let client = await connectDB;
  const db = client.db('forum');
  let result = await db.collection('post').find().toArray();

이렇게 3 줄을 

 let db = (await connectDB).db('forum');
  let result = await db.collection('post').find().toArray();

두 줄로 축약해서 사용해줄 수 있음.