TIL(Next.js)-5

Next.js

진짜 지금은 Next.js의 격변기인지 저번주에 앱을 만들 때는 page.js를 이용했는데 어제 만들었을 땐 이제 index.js와 app.js로 바꼈다..
진짜 엄청 빠르게 바뀌고 있는 것 같아서 뭐 하기만 하면 공식문서를 들여다 보는 중이다.

몽고디비로 게시판 만들기

몽고디비 홈페이지 가입후 무료로 이용해보자

• 회원가입
• 무료로 데이터베이스 열기
• 데이터베이스 접근 아이디 만들기
• 데이터 베이스 만들기
  순으로 보통 진행된다.

데이터 베이스

• 그냥 하나의 프로젝트
• 사이트 하나에 데이터 베이스 하나로 진행해도 괜찮고 하나의 사이트에 여러개의 데이터 베이스를 운영해도 상관없다
  컬렉션
• 하나의 폴더

도큐먼트 만들기
게시판을 위한 제목과 글을 document에 추가했다.
그러면 forum의 post 안에 title과 content를 가지고 있는 document 데이터가 하나 생긴것이다.

그러면 이제 몽고 db에 있는 데이터를 가지고 와보자

몽고디비 설치

npm install mongodb를 이용해서 프로젝트에 몽고디비의 라이브러리를 설치해주자

디비 데이터 연결하기

import { MongoClient } from 'mongodb'
const url = 'DBURL'
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 : 몽고 클라이언트 사용하기 위한 import
• connectDB 변수를 만들어서 거기에 데이터를 저장한 후 export 해서 필요할 때마다 사용하자
• Next.js의 경우 개발할 땐 파일 저장할 때마다 JS 파일들이 재실행 되기 때문에 MongoClient.connect가 동시에 여러개 실행될 수도 있다. 그럼 DB입출력이 느려짐
• 따라서 if문을 통해 개발중이라면(process.env.NODE_ENV === 'development') global 이라는 전역 변수 저장소에 보관해 주세요 라고 써져있는 것이다.
• 개발이후 프로덕션 상태일 땐 global을 사용하지 않는게 좋아서 else를 추가한다.

이후

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

• await connectDB를 통해(물론 connectDB는 import를 상단에서 시켜주자) 데이터 연결을 가져온후 그 데이터 db중 forum을 db라는 변수에 담는다
• 그리고 collection('post')를 통해 컬렉션을 선택하고 find().toArray();로 저장하면 우리가 흔히 볼수 있는 데이터 객체로 확인 가능하다!

여기서 let db변수를 database.js에 적어두고 export{db}하면 더 쉽지 않을까 한다.
await가 붙는 것들은 export 해서 쓰면 이상해질 수 있다.
사용하려면 top-level await라는 기능을 추가해서 사용할 수 있다고 하는데 아직 node.js 높은 버전에서만 가능하고 클라우드 서비스에서 버전을 제공 안해주면 쓰기 어렵다
그래서 현재는 일반적으로 사용하지 않음!

따라서 다른 데이터베이스 사용도 비슷하게

• DB 라이브러리 설치
• DB 연결 코드 셋팅(공식문서 활용)
• 라이브러리 사용법 대로 DB입출력 코드 사용

이 되겠다.