본문 바로가기
CodeIt_Sprint/Next.js API 만들기

(5)MonggoDB 셋팅(작성중)

by 코잼민 2025. 1. 4.

● 이론0_우리가 사용할 MonggoDB사용 방법

- 컴퓨터 설치해서 사용 :

- 직접 별도의 서버를 운영하고, 거기에 MonggoDB 설치해서 사용

- MongoAtlas라는 서비스를 이용

● 과정1_ MonggoDB Atlas 사이트 회원가입 후, 체크하기

MongoDB Atlas | MongoDB

 

MongoDB Atlas

Get started free. No credit card required.

www.mongodb.com

 

- 회원가입 후, 아래와 같이 입력, 체크 하시오.

- 그 다음, ' Preload sample dataset '부분을 체크 해제 => ' Create Deployment ' 클릭

- 기억하기 쉬운 'Username', 'Password' 입력 후, 'Create Database User ' 클릭

- 다음 창이 됐다면, 'close' 클릭하여, 창을 닫는다.

● 과정2_ 클러스터에 데이터베이스와 컬렉션 만들기 :

- 아래 사진에 빨간색 밑줄 친 부분을 순서대로 클릭하여, 순서대로 창을 이동한다.

 

- 'Add My Own Data'를 클릭 후, 다음 창의 입력란에 사진과 같이 작성하여 'Create'를 눌러 데이터베이스를 생성한다.

- 생성 후, 'Clusters' 항목 클릭 => 'Connect' 버튼을 클릭

- Drivers 옵션을 클릭

- 3번 아래에 있는 url을 오른쪽 버튼을 눌러 Copy

이제 Express나 Next.js 같은 프로그램에서 이 URL을 통해 MongoDB 데이터베이스에 접속할 수 있는 겁니다. 잘 복사해 뒀다가 필요한 부분에 붙여 넣어 주세요.

붙여 넣을 때 <password> 부분을 기록해 둔 비밀번호로 대체하고 mongodb.net/ 뒤에 데이터베이스 이름(예: todo-api)을 써줘야 합니다. 예를 들어 아이디가 codeit, 비밀번호가 test123이고 데이터베이스 이름이 todo-api라면 아래와 같은 형태가 되는 거예요.

 

아래는 위 스크린샷의 3번에 기반하여 아이디와 비밀번호를 대체하였을 때의 URL 예시입니다. 사용자마다 URL이 다르니 스크린샷의 3번에 해당하는 URL에서 아이디, 비밀번호, 데이터베이스 이름을 변경하여 사용해 주세요

● 과정3_ vscode의 프로젝트에 monggoDB 셋팅하기

- vscode를 열고, 그 전까지 했던 프로젝트의 터미널창을 열어 아래의 명령어 코드를 입력하여, monggoDB를 설치한다.

npm install mongoose

● 다음과정으로 가기 전 알아야하는 개념 : '환경변수' //시발 어려움

환경 변수 :

하나의 코드로 실행하는데, 수많은 서버와 데이터베이스를 연결할 수 있도록 하는 도구, 수단

데이터베이스 주소를 지정해 두고, 각 서버를 실행할 때마다 다른 데이터베이스 주소를 넣어 주는 건

여기서 환경변수의 역할은 프로그램에서 실행 환경에 따라 다른 값을 지정할 수 있는 변수

Node.js 환경에서는 환경변수 조정 방법 :
Node.js 환경에서는 이런 환경 변수들을 process.env라는 객체를 통해서 참조할 수 있습니다.

- .env파일


예를 들어서 이렇게 추가한 값을 process.env.MONGODB_URI 로 참조할 수 있습니다.


export default function handler(req, res) {
  const DB_URI = process.env.MONGODB_URI;
  // 데이터베이스 접속 ...
}


Next.js에서 보안이 필요한 데이터베이스의 환경변수 => 환경 변수에 특별한 접두사(prefix)를 사용

예시 :
NEXT_PUBLIC_ 이라고 이름을 붙이면 이 환경 변수는 클라이언트 사이드에서도 사용할 수 있습니다. 예를 들어서 클라이언트 사이드에서 현재 사이트의 호스트 주소를 저장해 두고 참조하고 싶다면 아래와 같이 NEXT_PUBLIC_HOST 라는 이름으로 사용하면 됩니다.


MONGODB_URI=mongodb+srv://admin:blahblah@cluster0.blahblah.mongodb.net/databaseName?retryWrites=true&w=majority
NEXT_PUBLIC_HOST=http://localhost:3000


export default Home() {
  // 페이지 컴포넌트에서는 아래와 같이 사용
  return (
    <>호스트 주소: {process.env.NEXT_PUBLIC_HOST}</>
  );

● 과정4_ 내 프로젝트에서 MonggoDB 데이터베이스 연동하기