1. mongo db setting

미뤄두고 미뤄뒀던 mongo db 사용해서 게시판 만들기 드디어 스타투!

1. mongo db setting

1) mongo db 접속 후 db 생성

2) DB 접근 가능 계정 생성

(몽고디비 아이디와 다름!!!!!!)

3) 데이터베이스 주소 확인

database -> connect → Drivers → 3. Add your connection string into your application code 확인

4) mongodb 라이브러리 설치

npm install mongodb

2. 데이터 출력하기

1) mongo db 입출력

// board/src/app/page.js

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

db.collection().메서드입력 

하지만 위 방식은 각각의 데이터베이스 입출력이 필요한 곳에서 매번 MongoDB 클라이언트를 연결하고 데이터베이스를 선택하는 방식으로 비효율적이다.

2) 코드 개선하기

• 1. connectDB 프로미스를 통해 연결 로직 재사용하기

  👿 문제상황

  • 코드 중복을 발생시키고, 각 요청마다 데이터베이스 연결을 새로 생성하므로 비효율적이다. (위의 2줄은 입출력마다 매번 실행할 필요 없이 1회만 실행하면 된다.)

  ✨ 해결 방법

  • connectDB 프로미스를 통해 연결 로직 재사용하기
    • 별도의 db 연결 관리하는 파일 생성한 뒤 export 해서 필요할 때마다 불러와 사용하기 (src/utils/database.js)
    • Promise를 저장하는 connectDB 변수를 만들어 MongoClient.connect 결과를 저장하기.
    • 이 Promise는 MongoDB 클라이언트의 연결이 성공적으로 완료되었을 때 resolve된다.
      따라서 await connectDB를 사용하여 데이터베이스 연결을 기다린 후, 연결된 클라이언트에서 db('board') 메서드를 호출하여 필요한 데이터베이스를 선택할 수 있다.

• 2. 글로벌 연결 관리

  👿 문제상황
  Next.js의 경우 개발 중에 파일을 저장할 때 마다 자동으로 새로고침이 된다.
  ➡ 그 결과 자바스크립트 파일들이 재실행
  ➡ MongoClient.connect가 반복적으로 실행
  ➡ DB 입출력이 매우 느려짐.

  ✨ 해결 방법
  //개발 중이면 global이라는 전역변수 저장소에 보관
  if (process.env.NODE_ENV === "development") {
  실제 프로덕션 상태일 땐 global을 사용안하는게 좋기 때문에 해당코드는 else문에 넣어주기

3) 최종 코드

// src/utils/database.js
import { MongoClient } from "mongodb";
const MONGODB_ID = process.env.NEXT_PUBLIC_MONGODB_ID;
const MONGODB_PASSWORD = process.env.NEXT_PUBLIC_MONGODB_PASSWORD;
const url = `mongodb+srv://${MONGODB_ID}:${MONGODB_PASSWORD} ~~ 생략~~`;

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 };

// board\src\app\list\page.js

import { connectDB } from "@/utils/database";

export default async function Home() {
  const client = await connectDB;
  const db = client.db("board");
  
  // mongodb 데이터 출력 post 콜렉션의 모든 db 가져와 array로 출력
  let result = await db.collection("post").find().toArray();
  console.log(result);

  return (
    <main className={styles.main}>
      <h1>게시판 프로젝트 스타투</h1>
    </main>
  );
}

📚 추가 참고 사항

• .env.local에 Database Access의 id와 password 저장할 때,
  NEXTPUBLIC 접두사가 없으면 server component에서만 사용할 수 있고, client component에서는 사용할 수 없다!
• 데이터베이스 주소 확인 : Database -> Connect -> Connect to your application -> Drivers
  Add your connection string into your application
• db 입출력 코드는 server component에서만 작성하는 것이 좋다!

콘솔에 post 콜렉션에 생성한 데이터들이 잘 출력된당(●'◡'●)