1. 스택

• 백엔드: node js (Next Route 이용)
• 프론트엔드: next js (app-router): 동적 라우팅으로, 각 페이지 id에 따라 노트를 제공하기 위해
• db : mongo db : mongoose를 이용해 객체 → 배열로 변환하기 위해
  • 노션 사이드바에서 핵심 기능은 “drag and drop”을 이용해 페이지 트리 순서를 전환하는 것이다. 따라서, db의 데이터를 js 객체로 제공해주는 mongoose 라이브러리를 이용해 react dnb로 배열을 쉽게 접근하려고 한다.

1. 초기 설정

• 기본적으로 next app router를 설치했다고 가정하겠습니다.
• root 디렉토리에서 db/dbConnect.ts를 만듭니다. 그 후, 아래 코드를 넣습니다. (참고: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb-mongoose/lib/dbConnect.ts)(next에서 권장하는 방법입니다.)

import mongoose from "mongoose";
declare global {
  var mongoose: any; // This must be a `var` and not a `let / const`
}

const MONGODB_URI = process.env.MONGODB_URI!;

if (!MONGODB_URI) {
  throw new Error(
    "Please define the MONGODB_URI environment variable inside .env.local",
  );
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  } // 연결되어 있다면, 연결된 상태를 다시 리턴한다. (재선언, 재할당 x)
  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
    };
    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }
  try {
    cached.conn = await cached.promise;
  } catch (e) {
    cached.promise = null;
    throw e;
  }

  return cached.conn;
}

export default dbConnect;

• 특징 0: MONGODB_URI의 경우, .env 파일을 통해 접근을 격리합니다.
• 특징 1: var mongoose: any; node js의 전역 객체인 global의 환경 변수로 mongoose를 선언해, 전역적으로 접근이 가능하도록 하고 있습니다.
• 특징 2: cached: 전역 mongoose객체를 캐싱합니다.

<알아두어야 할 특징: 마이크로 서비스화>

• 현재 next를 프론트엔드에서만 사용하다 보니, next 디렉토리 내부에 db 를 접근하는 end-point가 낯설 수 있습니다. 그러나, next는 js를 통한 풀스택 지향 프레임워크입니다. 따라서 app 디렉토리 (혹은 pages) 내부에는 실제 앱의 동작을 담고 있고, component는 ui를 담당하는 조각들이 담겨 있으며, 이는 app 디렉토리에서 호출하게 됩니다.
• 정리하면, 현재는 db를 통해, mongo db에서 만든 데이터 베이스를 MONGODB_URI 엔드 포인트를 통해, 접근 가능하도록 연결했고, 이를 global 객체로 선언해 캐싱했습니다.

(mongo db ↔ MONGODB_URI 엔드 포인트 ↔ global mongoose) 연결

2. mongoose 와 app-router 엔드 포인트 연결