[Next.js] 게시판 만들기(1) mongoDB(몽고디비) 데이터 입력(Insert)하기

해당 내용은 코딩애플의 Next.js 강의 내용을 기반으로 하고 있다는 것을 알려드립니다.

---

// Front

export default function Write() {
    return (
        <div className="p-20">
            <h4>글작성</h4>
            <form action="/api/write" method="POST">
                <input type="text" name="title" placeholder="글 제목"/>
                <input type="text" name="content" placeholder="글 내용"/>
                <button type="submit">제출</button>
            </form>
        </div>
    );
}

 

• form 태그를 활용하여 input 태그의 value를 서버에 전달
• name 속성을 통해 DB에 내용을 저장할 수 있도록 함
• button의 type을 submit으로 하여 입력이 완료된 후 submit
• action을 서버의 URL로 설정
• 입력한 내용을 전달하는 거기 때문에 method는 POST로 설정

 

// Back

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

export default async function handler(req, res) {
    if (req.method !== "POST") {
        return res.status(405).end(); // Method Not Allowed
    }

    const { title, content } = req.body;

    if (!title || !content) {
        return res.status(400).json("제목과 내용을 모두 입력해주세요");
    }

    try {
        const db = (await connectDB()).db("forum");
        await db.collection("post").insertOne({ title, content });
        return res.redirect(302, "/list");
    } catch (error) {
        console.error("게시물 추가 중 오류 발생:", error);
        return res.status(500).json("서버 오류가 발생했습니다");
    }
}

 

• Front 부분에서 POST 메소드로 보냈는데, 만약 POST가 아니라면 405 상태 코드(Method Not Allowed)를 반환하여 해당 메소드가 허용되지 않음을 나타냄.
• title 또는 content가 입력되지 않았다면 입력을 요청하는 내용 전달
• 통신이 정상적으로 이루어졌다면 try 문 안에 있는 DB에 데이터를 Insert하는 코드를 실행
• 통신이 정상적이지 않는다면 error 메시지 전달