게시글을 생성하기 위해 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 { } 안에 있는 코드를 대신 실행)