Next.js + MongoDB 사용하기

다들 연말은 잘 보내고 있으신가요?

저는 저번 글에 작성했던 연말을 타깃으로 한 작은 서비스를 성공적으로 마무리하면서, 따뜻한 하루를 보내고 있습니다.

(모두 편지 쓰러 오세요~~~ , 링크)

 

서비스를 오픈한 지 일주일도 안 되는 시간에 방문자 수 3000+  실 이용자 수 200명을 넘기며, 개발의 즐거움을 오랜만에 느끼는 지금!

이번 프로젝트에서 진행한 프로젝트 세팅 및 csv로 data를 추출한 과정을 작성해 보려고 합니다.

 

참고로 이번 서비스는 제목처럼 Next.js와 TypeScript, 그리고 MongoDB를 사용했습니다.

 

MongoDB 호스팅 시작하기

이번 서비스는 로그인 기능도 없는 간단한 서비스지만, 편지를 받아볼 유저의 정보를 저장해야 하기 때문에 DB가 필요했습니다.

저는 크게 관계형과 비 관계형으로 나뉘는 DB 중 비 관계형 데이터 베이스를 선택했습니다.

 

그 이유는 관계형 데이터베이스는 데이터를 엑셀처럼 표에 저장이기 때문에,

데이터 입출력시 SQL이라는 언어를 사용해야 하고 미리 스키마 정의, 정규화 등등 여러 점들을 신경 써야 하기 때문입니다.

 

반면에 비교적 자유로운 형식으로 저장할 수 있는 비관계형 데이터 베이스 중 MongoDB를 선택했는데,

그 이유는 JS의 object 자료형과 똑같은 모양으로 저장할 수 있고, 무엇보다도 500MB 무료 호스팅을 받을 수 있었기 때문입니다.

 

아무튼 MongoDB 사이트에서 회원가입을 해보겠습니다.

 

1. 앞에 나오는 내용들은 나중에 변경이 가능하기에, 적절히 채워주고 

 

2. 당당하게 무료 서버를 골라줍니다. (새해에는 모두 돈 많이 벌어요~)

 

무료 서버 클릭 필수!

 

3. 지역은 가까운곳이 빠르기 때문에 서울을 골라줬습니다.

 

4. 그 후 Database Access 메뉴에서 DB 접속용 아이디와 비밀번호를 만들어줍니다.

DB user 생성

 

여기서 주의점을 역할을 atlas admin으로 설정해야 그 아이디로 DB 접속 시 모든 설정을 다룰 수 있습니다.

 

Role 설정

 

5. 그 후 Network Access 메뉴에서 IP를 추가합니다.

 

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

저희는 개발을 위해 일단, Allow access from anywhere를 누르거나 0.0.0.0/0을 추가하면 줍니다.

(원래는 신뢰할 수 있는 IP만 추가하는 게 좋습니다!)

 

Network Access 설정 추가

프로젝트에서 MongoDB 세팅하기

이어서 프로젝트 안에서 설정해 보겠습니다. 

우선 터미널을 통해 mongoDB 라이브러리를 설치해 줍니다.

 

yarn add mongodb

 

 

원하는 데이터를 DB에 입력하고 싶다면 이런 형식으로 보내면 됩니다.

// 예시
import { NextApiRequest, NextApiResponse } from "next";
import { MongoClient } from "mongodb";

async function handler(req: NextApiRequest, res: NextApiResponse) {
  const client = await MongoClient.connect(
    "mongodb+srv://<id>:<password>@cluster0.vxpmfm7.mongodb.net/?retryWrites=true&w=majority"
  );

  const db = client.db("form");
  await db.collection("post").insertOne(req.body);
  client.close();

  return res.status(200).json({ success: true });
}

export default handler;

 

* 데이터를 아끼기 위해 꼭 client.close()를 넣어주어야 합니다.

* DB의 URL은 .env 파일로 따로 빼는 것을 추천합니다.

 

위 예제를 Next.js에서 사용하려면 client 부분이 아닌 server에서만 사용할 수 있습니다.

사진처럼 처음 프로젝트를 빌드할 때 있는 pages > api 부분에 작성하면 됩니다.

pages 폴더

 

위에서 만든 api를 불러올땐 아래 예시를 참고해 주세요.

const response = await fetch("/api/sendForm", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });
      
...

 

 

추가로 DB에서 데이터를 불러 오는 방식은 아래 코드 처럼작성하면 됩니다.

 

const db = client.db("form");
const collection = await db.collection("post").find().toArray();

...

return res.status(200).json({ success: true, data: collection });

 

저는 data 형식으로 res를 설정했으며, 이를 아래 코드처럼 json 형식으로 파싱해야 합니다.

const responseData = await response.json();

 

json2csv라이브러리로 CSV로 데이터를 추출하기

사실 이 부분은 너무 간단하여 적지 않고 넘어갈까도 했지만, 간단하게 예제만 작성했습니다.

json2csv 라이브러리 설치 후 아래 예제처럼 사용하면 됩니다!

const csvData = parse(responseData.data);

        // CSV 데이터를 Blob으로 변환
        const blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });

        // Blob을 URL로 변환
        const csvURL = URL.createObjectURL(blob);

        // 다운로드 링크 생성
        const link = document.createElement("a");
        link.href = csvURL;
        link.setAttribute("download", "data.csv");
        document.body.appendChild(link);

        // 다운로드 링크 클릭 (다운로드 시작)
        link.click();

        // 리소스 해제
        URL.revokeObjectURL(csvURL);
        document.body.removeChild(link);

 

 

그럼 끝?

 

 

 

 

 

..는 후기!

 

거창한 후기는 아니지만, 이번 프로젝트가 재미있던단 점을 적고 싶었다.

회사에서 시도하지 못하는 방법이나, 라이브러리등을 마음껏 사용하며 원하는 서비스를 만드는 과정이 정말 재미있었다.

 

회사일에 치어 살아가기 바빴던 날들 속 코딩의 재미를 잊고 있었던 나에게 의미 있는 프로젝트가 되었다.

2024년엔 더 즐겁게 개발하고 싶고, 그럴 것이다.