Next.js (MongoDB 사용)

Next.js에서 MongoDB를 사용해서 프로젝트를 진행해봅시다!
다음엔 SQL방식으로 백엔드를 맛볼 수 있기를

📰 MongoDB

SQL 방식

• 데이터들을 엑셀과 비슷한 표에 정리해두는 방식

NoSQL 방식

• 서류 봉투(collection)에 document를 모아두는 방식

MongoDB 사용
https://www.mongodb.com/

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

1. 터미널열어서 mongodb 라이브러리 설치

npm install mongodb

• MongoDB 접속, 입출력 도와주는 라이브러리

2. DB 연결(/util/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 변수를 만들어서 MongoClient.connect 결과를 저장해두고 export해서 필요할 때마다 사용하면 됩니다.

  • Next.js의 경우 개발할 땐 파일저장할 때 마다 자바스크립트 파일들이 재실행되기 때문에 MongoClient.connect가 동시에 여러개 실행 될 수 있습니다. 그럼 DB 입출력이 매우 느려집니다.
    그걸 방지하고 싶으면 if문으로 "개발 중이면 global이라는 전역변수 저장소에 보관해주세요"라고 하면 됩니다.
  • 개발말고 실제 프로덕션 상태일 땐 global을 사용안하는게 좋아서 else문도 추가합니다.

3. DB 입출력이 필요한 곳에서 connectDB를 가져다씁니다.

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

• DB입출력 코드는 server component 안에서만 씁시다
  client component 안에 적은 코드는 유저들도 쉽게 볼 수 있기 때문

📰 환경변수(.env) 사용하기

• Next에서 환경변수는 변수 앞에 NEXT_PUBLIC 붙여줘야합니다.

NEXT_PUBLIC_ENV_DATA=env test data

• .env 파일에 정의된 변수를 사용하기 위해서는 process.env를 붙여줘야 합니다.

process.env.NEXT_PUBLIC_ENV_DATA