Next.js - #생성

POST

게시글을 생성하기 위해 API 코드는 어떻게 작성해야 하는지에 대해 알아보려고 한다

export default function Write() {
  return (
    <div>
      <h4>글 작성</h4>
      <form action="/api/post/new" method="POST">
        <div className="flex flex-col items-start gap-4 mt-4 pt-4 border-t border-gray-300">
          <input
            type="text"
            name="title"
            className="text-black"
          />
          <textarea
            name="content"
            className="text-black"
          ></textarea>
        </div>
        <button type="submit" className="mt-2">
          Submit
        </button>
      </form>
    </div>
  );
}

위와 같이 코드가 작성되어있을 경우,
Submit 버튼을 누르면 action에 있는 URL로 method에 적힌 요청이 전달되게 된다

// api/post/new.js

import { connectDB } from '@/util/database';

export default async function handler(req, res) {
  if (req.method == 'POST') {
    const db = (await connectDB).db('forum');

    await db.collection('post').insertOne(req.body);  // 컬렉션 post에 body의 데이터 저장

    res.redirect(302, '/list')
    // res.status(200).json('저장 완료');
  }
}

api 코드를 위와 같이 작성하면 MongoDB에 데이터가 잘 저장되는 것을 확인할 수 있다

• .redirect(302, '/경로') : 다른 페이지로 강제 이동 (302는 무엇인가)
• .json() : 메세지나 데이터 보낼 때 사용

예외처리

POST를 할 때, 제대로 된 입력값을 보내고 있는지 확인 하는 것도 중요하다
프론트엔드에서도 빈칸 체크를 할 수 있지만 화면에 있는 모든 건 위조가 가능해서 서버에서도 해야 한다

import { connectDB } from '@/util/database';

export default async function handler(req, res) {
  if (req.method == 'POST') {
    const db = (await connectDB).db('forum');

    if (!req.body.title || !req.body.content) {
      return res.status(500).json('title or content is empty');
    }

    await db.collection('post').insertOne(req.body);
    res.redirect(302, '/list');
    // res.status(200).json('저장 완료');
  }
}

제목이나 내용이 없을 경우의 에러처리를 해주었고
다른 예외처리도 이런 식으로 응용해서 하면 된다

import { connectDB } from '@/util/database';

export default async function handler(req, res) {
  if (req.method == 'POST') {
    const db = (await connectDB).db('forum');

    if (!req.body.title || !req.body.content) {
      return res.status(500).json('title or content is empty');
    }

    try {
      await db.collection('post').insertOne(req.body);
      res.redirect(302, '/list');
      // res.status(200).json('저장 완료');
    } catch (error) {
      console.error(error);
    }
  }
}

추가로, DB 에러 예외처리는 try-catch문을 사용하면 된다
(try { } 안에 있던 코드가 에러나면 catch { } 안에 있는 코드를 대신 실행)