티스토리 뷰
관계형 데이터베이스와 비관계형 데이터베이스 차이에 대해 간단하게 알고 가겠습니다.
관계형 데이터베이스
- 열과 행이 있는 테이블(표 형식으로)에 데이터를 저장
- 데이터 입출력시 SQL 을 사용해야하고 미리 스키마 정의, 데이터 중복을 피하기 위한 정규화
- 안정적인 데이터 저장, 운영이 필요한 곳에서 사용하면 좋습니다.
- 대표적으로 Oracle, MySQL 이 여기에 속합니다.
비관계형 데이터베이스
- 키 값 형식으로 저장함. {key: value}
- SQL, 스키마 정의, 정규화 필요없음. NoSQL 이라고도 부름
- 분산처리에 유리하기 하기 때문에 대용량 데이터 처리에 좋음.
- 대표적으로 몽고 DB 가 여기에 속합니다.
몽고 디비 연동
몽고 디비를 연동하기 전에 우선 Nextjs 와 몽고 디비 셋팅을 해줍시다.
https://www.mongodb.com/ko-kr 여기서 회원 가입 후, 몽고 디비 데이터 베이스를 만들어줍시다.
Free 기준으로 512MB 까지는 무료로 제공함으로 공부하기에는 충분히 넉넉하다.
- 셋팅은 Free, AWS, seoul 순으로 설정
- built-in-Role 은 자유롭게 사용하기 위해 Atlas admin 으로 만들어줍니다.
- Network Access 메뉴에서 IP 도 설정해주는 것이 좋습니다. (anywhere ㄱㄱ!!)
이제 설정은 어느정도 완료되었을 거고, database/Browse Collections 탭을 누르면 여기서 필요한 데이터를 저장하면 된다.
여기서 간단하게 몽고 디비의 구조를 알면 좋은데, collection > document, document ... 이런 식으로 구조가 만들어지는 것이다.
데이터를 넣었으면 아래와 같이 데이터가 들어갔을 것이다.
이제 database 탭을 누르고 connect 를 눌러보자. 누르면 어떤 식으로 연동하건지가 나오는데 우리는 Drivers 를 누르자.
누르면 Node.js 기반으로 어떤 식으로 하면되는지 다 나와있다.
3번은 이제 디비 커넥션을 할 url 이다.
Nextjs 셋팅을 해보자.
db.ts 와 page.tsx 를 준비하자.
import { MongoClient } from 'mongodb'
let connectDB: any
let globalWithMongo = global as typeof globalThis & {
mongoClient: MongoClient;
};
const MOGO_DB_URL = '<URL>'
async function setMognoConnect() {
if (process.env.NODE_ENV === 'development') {
if (!globalWithMongo.mongoClient) {
globalWithMongo.mongoClient = await new MongoClient(MOGO_DB_URL).connect()
}
connectDB = globalWithMongo.mongoClient
} else {
connectDB = await new MongoClient(MOGO_DB_URL).connect()
}
}
await setMognoConnect()
export { connectDB }
import { connectDB } from "@/util/db"
import style from './list.module.css'
export default async function List() {
const client = await connectDB;
const db = client.db('<database name>')
// 해당 collection 의 모든 데이터를 가져옴.
const result = await db.collection('<collection name>').find().toArray()
console.log(result)
return (
<div className={style['list-bg']}>
{result.map((item: {title: string, content: string}, idx: number) => (
<div className={style['list-item']} key={idx}>
<h4>{item.title}</h4>
<p>{item.content}</p>
</div>
))}
</div>
)
}
디비 커넥션 및 입출력은 민감한 정보들이 담겨있기 때문에 서버 사이드에서 해주어야 한다.
다음과 같이 하면 간단한 리스트 형식의 데이터는 만들어질것이다.
트러블 슈팅
TS 를 쓰던 와중 다음과 같은 에러가 발생했다.
Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017)
해당 에러가 무슨 에러인지 찾다보니, global 은 조건문 밖으로 빼야한다는 에러였고 위와 같이 별도의 객체를 만들어서 처리하였다.
'개발.. > Nextjs' 카테고리의 다른 글
Next.js 14 Release! (0) | 2023.10.31 |
---|---|
Nextjs 에서 API Routes 사용하기 (0) | 2023.10.24 |
Nextjs 13 에서 동적 라우팅사용하기 (0) | 2023.10.22 |
Nextjs 13에서 페이지 라우팅 방법 (0) | 2023.10.07 |
Nextjs 13 시작하기! (0) | 2023.10.07 |
- Total
- Today
- Yesterday
- 오블완
- AWS
- vue composition api
- nuxt2
- 서버 to 서버
- 네이버 서치 어드바이저
- React
- Github Actions
- 깃허브
- NextJS
- Embedding
- nextjs14
- dockerfile
- nodejs
- NUXT
- Storybook
- 티스토리챌린지
- openAI
- Git
- webpack
- vscode
- cors
- 타입스크립트
- nextjs13
- Vite
- 스벨트
- svelte
- vue router
- docker
- seo
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |