Next.js 프로젝트 생성 및 MongoDB 사용 방법 (1)

Next.js 프로젝트 생성 및 MongoDB 사용 방법

1. Next.js 프로젝트 생성하기

Next.js 프로젝트를 새로 생성하려면, 먼저 작업하려는 디렉토리에서 터미널을 열어주세요. 그리고 아래의 명령어를 입력해주세요.

//bash
npx create-next-app@latest

명령어를 실행하면 프로젝트의 이름을 물어보는데, 여기에서 원하는 이름을 입력하면 됩니다. 그 다음으로 나오는 질문들은 대부분의 경우 기본값을 선택하면 됩니다. 프로젝트가 성공적으로 생성된 후에는 CSS 파일과 page.js 파일의 내용을 깔끔하게 정리하고 시작하는 것이 좋습니다.

 

2. MongoDB 사용하기

웹사이트를 운영하면서 사용자의 데이터(예: 아이디, 게시글 등)를 영구적으로 저장하려면 데이터베이스가 필요합니다. 데이터베이스 종류는 다양하지만, 이번에는 비관계형 데이터베이스인 MongoDB를 사용해보겠습니다.

MongoDB는 자료를 자유로운 형식으로 저장할 수 있어 사용하기 편리하며, MongoDB 공식 웹사이트에서는 500MB 용량의 데이터베이스를 무료로 호스팅할 수 있습니다.

3. MongoDB의 데이터 저장 방식

MongoDB에서는 '컬렉션(collection)'과 '도큐먼트(document)'라는 단위를 사용하여 데이터를 저장합니다. '컬렉션'은 여러 '도큐먼트'를 그룹화하는 역할을 합니다. 즉, '컬렉션'은 폴더에 비유할 수 있고, '도큐먼트'는 그 폴더 안의 파일에 비유할 수 있습니다.

도큐먼트에 데이터를 저장할 때는 JavaScript Object와 같은 형식으로 저장합니다. 예를 들어, 게시판의 게시글을 저장하려면 다음과 같이 저장할 수 있습니다.

//json
{
  "글제목": "안녕하세요",
  "글내용": "처음 뵙겠습니다",
  "작성자": "홍길동"
}

또는 식당 예약 서비스에서 예약 내역을 저장하려면 다음과 같이 저장할 수 있습니다.

//json

{
  "식당이름": "맛있는 식당",
  "예약시간": "2024-03-01 18:00",
  "예약자": "김철수"
}

이처럼 데이터 한 덩어리를 '도큐먼트'에 저장하면 됩니다. 그리고 이 도큐먼트를 생성하거나 가져오고, 수정하고, 삭제하는 방법을 통해 MongoDB를 활용할 수 있습니다.

 

 

 

 

 

MongoDB Atlas 가입/초기셋팅 방법
 

1. mongodb.com 방문

 

2. 회원가입하고 이메일 인증하라고 하면 합시다. 

 

3. 뭐 채우라고 하면 잘 채워봅니다 (나중에 변경가능)

 

 

 

 4. 돈없으니까 FREE 티어 & 서버위치를 선택합니다.

 

 

 

 

5. Database Access 메뉴에서 DB 접속용 아이디/비번을 생성합니다.

데이터베이스 접속할 수 있는 아이디/비번을 새로 만들어주는겁니다.

왜냐면 하나의 데이터베이스를 여러사람이 사용할 수도 있으니까요.  

아주 안전해보이는 admin/qwer1234 이런 아이디 비번은 어떨까요 아무튼 만들고 잘 기억해두십시오. 

 

 

6. Network Access 메뉴에서 IP를 추가합니다.

데이터베이스 접속할 수 있는 IP를 미리 정의해놓는 일종의 보안장치입니다.

가끔 스타벅스에서 코딩하실게 분명하니 Allow access from anywhere을 누르시거나 0.0.0.0/0 을 추가합니다. 

원래는 신뢰할 수 있는 IP만 추가해두는게 좋음 

 

 

 

 

7. 이제 어딘가에 있는 collections 버튼같은거 눌러보면 

DB에 여러분의 데이터를 저장해볼 수 있다.