Next.js 프로젝트 (3)

 

글 작성 기능 만들기

 

오늘은 CRUD 에서 C를 만들어 봤다

 

먼저 해야할 것 한글로 작성

 

1. 글작성페이지 필요

2. 버튼누르면 작성한 글 DB에 저장 -> 공백 or 이상한 자바스크립트 보내면 위험하기 때문에 바로 DB에 저장 X

중간에 거쳐가는 프로그램 하나 만들기

-> 3Tier Achitecher

 

client -> server -> DB 이런 식

 

Next.js에서 서버기능 만들기

 pagees/api/post/new.js

 

 위의 경로에 맞춰 만들어 보고 서버의 역할에 맞게 코드 작성

 

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

export default async function handler(res, req){

    if (res.method == 'POST'){

        if (res.body.title == '') {

          return req.status(500).alert('제목 미입력') // 이런식으로 경고 주기

        }

        try {                                                               // 에러 방지

          let db = (await connectDB).db('forum')

          let result = db.collection('post').insertOne(res.body) // insertOne() DB에 저장하는 메소드

          req.redirect(302, '/list')

        } catch (error) {

          alert('에러')

        }

       

      }

}

 

이후 원하는 페이지에서 원하는 메소드  입력

 

localhost:3000/write

export default function Write(){

    return (

        <div>

            <h4>글 작성</h4>

            <form action="/api/post/new" method="POST">

                <input name="title" placeholder="제목"></input>

                <input name="content" placeholder="내용"></input>

                <button type="submit">버튼</button>

            </form>

        </div>

    )

}