Next.js 하나로 Full Stack 작업1 (get, post API 제작 / MongoDB)

Eunhye Kim·2024년 7월 30일

next.js

오늘은 Next.js를 사용해서 FullSatck으로 웹 사이트를 만드는 방법을 작성해보려고 합니다.

혼자서도 빠르게 작업이 가능하고 유지보수가 쉬워서 제가 자주 사용하는 방식입니다.

DB는 MongoDB를 사용했습니다.

MongoDB

1. DB생성

MongoDB에서 project를 생성 한 후 무료 데이터베이스를 선택해서 만들어주세요.
https://account.mongodb.com/account/login

자세한 흐름은 Next.js MongoDB Full Stack App Tutorial이 영상을 보시고 차근차근 따라하는걸 추천드립니다.

.env까지 작성을 하고 나면 이제 Next.js에서 DB연결을 해줘야 합니다.

2. DB연결

MongoDB ODM 중 Mongoose(몽구스)라는 게 있습니다.
ODM이란 Object Document Mapping의 줄임말이고 Object는 자바스크립트의 객체이고, Document는 몽고DB의 문서입니다.
문서를 DB에서 조회할 때 자바스크립트 객체로 바꿔주는 역할인데, 몽고디비 자체가 이미 자바스크립트인데도 굳이 자바스크립트 객체와 매핑하는 이유는 몽고디비에 없어서 불편한 기능들을 몽구스가 보완해주기 때문입니다.
몽고디비는 테이블이 없어서 자유롭게 데이터를 넣을 수 있지만, 형식이 자유롭기 때문에 다큐먼트에 아무거나 넣어도 에러가 생기지 않습니다. 그러기 때문에 나중에 문제가 생길 수 있습니다.
이러한 문제를 막기 위해 몽구스는 Schema(스키마)를 도입했습니다. 몽구스는 사용자가 작성한 스키마를 기준으로 데이터를 DB에 넣기 전에 먼저 검사합니다.
스키마에 어긋나는 데이터가 있으면 에러를 발생합니다.

Mongoose 사용하여 MongoDB를 연결합니다.

초기 연결이 실패하면 몽구스는 'error' 이벤트를 내보내고 mongoose.connect()반환이 거부됩니다.
그리고 몽구스는 자동으로 재연결 시도는 하지 않습니다.

import mongoose from "mongoose";

const connect = async () => {
  const mongoURI = process.env.MONGO;
  try {
    await mongoose.connect(String(mongoURI));
  } catch (error) {
    throw new Error("Connection failed!");
  }
};

export default connect;

3. Schema 생성

import mongoose from "mongoose";
import moment from "moment-timezone";

const { Schema } = mongoose;

const userSchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  phone: {
    type: String,
    required: true,
  },
  url: {
    type: String,
  },
  img: {
    type: String,
  },
},
{ timestamps: true }
);

export default mongoose.models.User ||
  mongoose.model("User", userSchema, "user");

required: true는 필수 정보라는 뜻이고 만약에 클라이언트측에서 required된 정보가 없으면 에러를 반환합니다.
timestamps는 생성된 문서의 현재 시간과 날짜를 true로 변경하여 업데이트된 시간을 저장합니다.
- createdAt : 문서가 생성된 날짜를 나타내는 날짜
- updatedAt : 이 문서가 마지막으로 업데이트된 날짜를 나타내는 날짜

mongoose.model()

마지막 줄을 호출할 때 스키마가 등록됩니다.
참고로 나중에 스키마를 수정할 때 미리 저장되어 있던 데이터들은 바뀌지 않습니다.

API 제작

1. App 디렉토리에서 API 폴더 생성

app
- api
  - users
    - route.ts

이런 구조로 폴더를 생성했으면 앞으로 localhost:3000/api/users으로 API 통신을 하게 됩니다.

먼저 서버에 문제가 없는 걸 확인하기 위해

export const GET = async (request) => {

	return new NextResponse('It work!', {status: 200})
}

를 작성해서 localhost:3000/api/users에 들어가 확인해주세요. 화면에 It work!가 뜨면 성공입니다.

2. GET 요청 작성

export const GET = async (req: NextRequest) => {
  try {
    await connect();
    const users = await UserSchema.find();
    return new NextResponse(JSON.stringify(users), { status: 200 });
  } catch (err) {
    console.log(err);
    return new NextResponse("Database Error", { status: 500 });
  }
};

GET이라고 하면 사용자로부터 요청을 받을 코드입니다.

비동기 코드이고 mongodb에서 데이터를 가져오고 데이터가 정상이면 응답을 반환합니다.

NextResponse는 next.js의 서버 측에서 HTTP응답을 생성하는데 사용되는 객체입니다. 이를 사용해서 HTTP통신을 수행할 수 있습니다.

await connect()는 mongoDB데이터베이스에 연결하기 위한 비동기 함수입니다.

Post.find()는 Post 모델에서 모든 게시물을 찾기 위해 사용됩니다.

new NextResponse(JSON.stringify(posts), { status: 200 })는 posts 객체를 JSON문자열로 변환하여 200상태 코드와 함께 응답을 생성합니다. 이 응답은 API요청을 수행한 클라이언트에게 반환됩니다.

3. POST 요청 작성

export const POST = async (req: NextRequest) => {
  const body = await req.json();
  const newPost = new UserSchema(body);

  try {
    await connect();
    await newPost.save();

    return new NextResponse("post has been created", { status: 200 });
  } catch (err) {
    console.log(err);
    return new NextResponse("Database Error", { status: 500 });
  }
};