Next.js 에 MongoDB 세팅 & 사용

Next.js 를 공부하면서 간단하게 게시판을 만들려고 한다

DB 설정을 하기 위해서 그 과정을 적어봤다.

일단 Next.js 프로젝트 먼저 생성해보자!

 

 

* 기본스펙 *

• node version : v20.10.0
• visual studio 
• mac os 

 

---

---

 

 

 

🍡  Next.js 프로젝트 생성하기

새로운 작업 폴더에서 터미널 열고
(저는 npx 에러 떠서 걍 yarn 으로 설치함, 아래 사이트 명령어 참고.)

https://www.npmjs.com/package/create-next-app

create-next-app

$ yarn create next-app

 

 

 

 

 

 

 

 

🍡🍡 MongoDB 호스팅

데이터들을 안전하게 저장하기 위해 Database 를 사용한다.

내가 사용할 몽고디비는 비관계형 데이터베이스로써 관계형DB보다 자료를 조금 더 자유로운 형식으로 저장가능하고, SQL 언어, 스키마 정의(표만들기), 정규화가 대부분 필요없다.

➕ 분산처리를 기본적으로 잘해서 주로 SNS 서비스처럼 많은 데이터 입출력이 필요할 때도 강점을 보인다.

 

MongoDB 는 mongodb.com 사이트에 들어가서 500mb 정도 용량의 DB 무료 호스팅 받을 수 있다.

 

 

 

 

1️⃣ mongodb.com 들어가서 회원가입

 

2️⃣ Free 티어 , 서버위치 선택

 

3️⃣ Database Access 메뉴에서 DB 접속용 아이디/비번 생성

 

4️⃣ Atlas admin 으로 설정 

 

5️⃣ Network Access 메뉴에서 IP 추가

 

 

 

 

 

 

🍡🍡🍡 Mongo DB 사용해보기 

 

일단 테스트겸 DB 에 데이터 하나 저장해보자.

 

 

 

1️⃣ collections 에 들어가보면 

 

 

2️⃣ Add My Own Data 를 클릭해주고 

3️⃣ dashboard 라는 이름의 database 와 

post 라는 이름의 collection 하나 만들어봤다.

 

쉽게 설명해보자면

- database 는 하나의 프로젝트

- collection 은 폴더

- document 는 하나의 메모장 파일 

이라고 생각하면 된다.

➡️ 실제 데이터는 document 에 { } 형식으로 기록하면 된다. 

 

 

 

4️⃣ INSERT DOCUMENT 버튼 클릭 -> document 하나 발생

아래처럼 글제목, 글내용 저장하는 document 하나 만들어주고 (_id 부분은 안채워도 자동 생성됨.)

 

 

이 데이터를 Next.js 로 만든 페이지에서 보여줘보자! 

 

 

 

 

 

 

🍭 Next.js 환경에서 MongoDB 연결하기 

1️⃣ 터미널에서 mongodb 라이브러리 설치

$ npm install mongodb

 

 

2️⃣ 아래와 같이 코드 작성

위의 2줄은 입출력마다 매번 실행할 필요없이 1회만 실행하면 된다. 그래서 위의 2줄의 코드를 함수로 묶어서 재사용하도록 하자.

그 전에 db접속 url 을 넣어보자.

 

* MongoClient.connect('DB접속 URL')~*

 

 

 

 

 

 

 

<password> 부분에 비밀번호 넣어주면 됨!

-> Database Access 에서 만들었던 비번임~

 

 

 

 

3️⃣ 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 }

 

🔗 util > database.js

- 위의 코드를 복붙 

Nextjs의 경우 개발할 땐 파일저장할 때 마다 자바스크립트 파일들이 재실행된다.

그래서 MongoClient.connect가 동시에 여러개 실행될 수 있습니다. 그럼 DB입출력이 매우 느려지게 되겠죠..? 

그걸 방지하고 싶으면 if문으로 "개발중 상태면 global이라는 전역변수 저장소에 보관해라" 라고 써놓으면 된다.

 

개발말고 실제 프로덕션 상태일 땐 global을 사용안하는게 좋아서 else문도 추가

프로덕션 상태일 땐 중복실행될 일이 별로 없어서 대충 저렇게 해도 잘 돌아간다.

 

이제 await connectDB 사용할 때 마다 그 자리에 MongoClient(url, options).connect()가 남으니까 맘대로 사용하면 된다.

 

 

다시 page.js 돌아와서 

🔗 app > page.js

 

import { connectDB } from "/util/database.js"

export default async function Home() {
  let client = await connectDB;
  const db = client.db('forum');
  let result = await db.collection('post').find().toArray();
  
  console.log(result) // 🍀콘솔로 result 확인해보자!

  return (
    <div>hello</div>
  )
}

await connectDB 결과를 db라는 변수에 저장.

db.collection().find() ~ => 특정 collection 에 있던 모든 document 출력이 가능하다.

 

 

 

연결 잘 됨!!! gooooood~

 

 

 

 

이걸 통해 게시판 만들기는 다음 글에 이어서 작성해보겠다.