쇼핑몰 프로젝트 생성 / MongoDB 사용

프로젝트 생성하기

1. 새로운 작업폴더에서 터미널 열고, 아래 명령어를 입력합니다.

npx create-next-app&latest

   2. 프로젝트 이름 작명하고, Yes/No 잘 고르면 됩니다.

   3. 프로젝트 생성 후엔 css 파일, page.js 안의 내용 깔끔하게 정리하고 시작합니다.

 

 

MongoDB 호스팅받기

웹사이트 운영하려면 유저아이디, 유저의 글, 댓글들을 저장해둬야 하는데, 유저의 데이터를 영구적으로 안전하게 저장하고 싶으면 Database 에 저장해야 합니다. 데이터베이스 종류는 여러가지가 있는데, 대표적으로 관계형, 비관계형 데이터베이스가 있습니다.

관계형 데이터베이스는 데이터를 엑셀처럼 표에 저장합니다. 데이터 입출력시 SQL 이라는 언어를 사용해야하고, 미리 스키마 정의(표 만들기)도 해야하고, 데이터 중복저장을 피하기 위해 정규화해야하고, 여러가지 귀찮은 점들을 신경써주어야 합니다. 주로 안정적인 데이터저장과 운영이 필요한 곳에서 사용되죠.

비관계형 데이터베이스는 자료를 조금 더 자유로운 형식으로 저장할 수 있고, SQL 언어, 스키마 정의, 정규화 이런 것이 대부분 필요없습니다. 분산처리를 기본적으로 잘해서 주로 SNS 서비스처럼 많은 데이터 입출력이 필요할 때도 강점을 보입니다.

MongoDB 는 비관계형 데이터베이스입니다. 데이터를 자바스크립트 object 자료형과 똑같은 모양으로 저장할 수 있어서 편리하고, mongodb.com 들어가면 500mb 정도 용량의 DB 무료 호스팅도 받을 수 있습니다.

 

 

Next.js 에서 MongoDB 사용하기

DB에 데이터 하나만 저장하기

호스팅받은 mongodb.com 에 접속해 collections 라는 버튼을 누르고 들어가면, DB 에 있는 데이터 조회가 가능합니다.

inser document 버튼이 있는데, 해당 버튼을 누르면, document 하나를 발행할 수 있습니다. 글제목과 글내용 저장해보았습니다.

 

 

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

1. 터미널에서 mongodb 라이브러리를 설치합니다.

npm install mongodb

작업폴더에서 터미널을 열어 위 명령어를 입력합니다. 

const client = await MongoClient.connect('DB접속URL~~', { useNewUrlParser: true })
const db = client.db("forum")
db.collection().어쩌구~

설치했다면, 이제 다음 코드를 작성하면, DB에 데이터 입출력이 가능한데 위 2줄은 입출력마다 매번 실행할 필요없이 1회만 실행하면 됩니다. 때문에 위의 2줄의 코드를 함수로 싸매서 재사용해보겠습니다.

 

2. 아무데나 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 }

- import 어쩌구를 해야 설치한 라이브러리 사용이 가능합니다.
- connectDB 변수를 하나 만들어서 MongoClient.connect 결과를 저장해두고, export 해서 필요할 때마다 사용하면 됩니다.
- 근데 Nextjs 의 경우, 개발할 땐 파일저장할 때마다 자바스크립트 파일들이 재실행되기 때문에 MongoClient.connect 가 동시에 여러개 실행될 수 있습니다. 그럼 DB 입출력이 매우 느려집니다. 그것을 방지하고자 if 문으로 "개발중 상태면 global 이라는 전역변수 저장소에 보관해주세요" 라고 작성해두면 됩니다.
- 개발말고 실제 프로덕션 상태일 땐 global을 사용 안한느 것이 좋아서 else 문도 추가했습니다. 프로덕션 상태일 땐 중복실행될 일이 별로 없어서 대충 저렇게 해도 잘 돌아갑니다.

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

위와 같이 적어둡니다.

• 프로젝트 폴더에 util 폴더 만들고, 그 안에 database.js 만들어서 적어두었습니다.
• DB 접속 URL은 방금 mongodb.com 에서 복사해온 것을 입력합니다.

 

3. DB 입출력이 필요한 곳에서 connectDB 함수를 가져다 사용합니다.

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();

  return (
    <main>
      {result[0].title}
    </main>
  )
}

• await connectDB 결과를 db 라는 변수를 만들어서 그 곳에 저장해둡니다. 
• db.collection().find() 어쩌구 하면 특정 collection 에 있던 모든 document 출력이 가능합니다.
• await 어쩌구 를 쓰려면 await 이 들어있는 function 왼쪽에 async 를 붙여줘야 사용이 가능합니다.

 

export default async function Home() {
  let db = (await connectDB).db('forum');
  let result = await db.collection('post').find().toArray();
  (생략)

3줄을 작성한 것을 2줄로 줄일 수 있습니다.