[ 환경설정 ] next.js/ typescript / tailwindCSS / mongoDB 세팅

 

 

 

next.js와 typescript와 tailwindCSS는 CRA(create react app)으로 설치하였다.
cmd 창에 다음과 같이 적어주면 typescript와 tailwindCSS를 사용할 것인지 묻는 질문을 한다.

npx create-next-app my-app

사용하려면 yes를 방향키로 움직인 후 enter!
알아서 버전도 맞춰서 설치해 준다!!!!!!

 

그렇게 next.js 설치 완료 후
'npm install mongodb' 설치해 준다.

 

여기서부터가 이제 시작이다.

 

 

 

 

 

폴더 구조는 이렇게 생겼다.

util 폴더를 만든 후 database.js 파일을 만들어서
mongoDB와 연결할 준비를 한다.

 

 

 

 

 

하.. 연결하기 위해 정말 많은 사이트를 참고했다.
나는 mongoDB에서 무료로 제공해 주는 Atlas를 사용하지 않고 local로 서버를 돌리려고 한다.
임의로 회원 db 3개를 넣어주고 find()로 db가 select 되는지 확인까지 하도록 하겠다.

 

일단 나의 package.json 파일 공개

{
  "name": "myblog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.3.3",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "autoprefixer": "10.4.14",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.7",
    "mongodb": "^5.6.0",
    "next": "13.4.7",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.6"
  }
}

 

 

database.js 파일에 아래와 같이 적어준다.

import { MongoClient } from "mongodb";

const DB_URL = `mongodb://127.0.0.1:27017`;
const options = {
  useNewUrlParser: true,
};
let connectDB;

if (process.env.NODE_ENV === "development") {
  console.log("it's development");
  if (!global._mongo) {
    global._mongo = new MongoClient(DB_URL, options).connect();
    console.log("!global._mongo");
  }
  connectDB = global._mongo;
} else {
  console.log("it's not development");
  connectDB = new MongoClient(DB_URL, options).connect();
}
export default connectDB;

NODE_ENV는 서버 실행 시 개발 서버인지 아닌지 구분하기 위한 변수인데
서버 실행 시 'npm run dev'라고 적으면 node.js가 알아서 NODE_ENV 값을 development로 설정한다.
따로 값을 할당해 줄 필요 없이 알아서! 하하하
개발 모드일 때 전역 변수에 값을 저장하는 코드이다.

 

내 몽고 DB는
Database: myBlog,
Collection: myblog

 

그럼 이제 연결된 db에서 db를 가져오는 코드를 적어보자.

 

src/app 하단에 next.js 설치 시 만들어진 page.tsx라는 파일에 테스트 코드를 추가해 보겠다.

import connectDB from "../../util/database.js";

export default async function Home() {
  let database = await connectDB;
  database = database.db("myBlog");
  const result = await database.collection("myblog").find().toArray();
  let users = JSON.stringify(result);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div>{users}</div>
    </main>
  );
}

database.js에서 connectDB를 가져온다.
그리고 비동기 방법으로 connectDB가 실행되게 적어준 후 결과값은 databse 변수에 할당한다.

 

database.db('myBlog');
변수.db(database 이름)을 적어준다. ORM으로 치면 스키마 이름과 같다.

.collection('myblog');
다시 .collection() 메소드로 컬렉션 이름을 지정해 준다.
ORM으로 치면 어떤 table에 있는 db를 가져올 것인지 지정하는 것과 같다.

그리고 .find() 메소드로 ORM으로 치면 select를 하여 컬렉션에 있는 모든 document(=record)를 가져온다.
그리고 toArray()로 배열화 시켜준다.

 

 

자, 이제 화면에 불러온 db를 띄워보자!

<div>{result}</div>

이렇게 그냥 결과값을 갖고 있는 변수를 찍으면 이러한 오류가 난다

 

이는 서버에서 렌더링 후 제일 최상위 컴포넌트에서 자식 컴포넌트에게 db 조회값을 보내주는 것인데
Objects는 유효하지 않다는 것입니다.
그래서 JSON.stringify(result)로 user에 담아 user를 출력하면?

짜잔~~~~~
화면에 출력 성공~~~~

하...이거 하느라 거의 3주 날린 거 생각하면 ㅠㅠㅠㅠ
뭔 자신감으로 next.js 사용 안 하고 해 보겠다고 2주 날리고..ㅋㅋㅋ
하 정말 ^^
이제 정말 본격적으로 시작이다!!!!!!