[Node.js/mongoDB] 7. 글 작성기능 만들기

지렁·2023년 10월 28일

Node.js/mongoDB

🎈 원리에 대해 먼저 알아보자

글 작성 기능은 유저가 작성한 글을 DB에 저장하면 된다

하지만 유저가 직접 저장하는 것이 아닌 중간에 서버를 거쳐 저장해야 한다

유저가 글작성페이지에서 글을 작성해서 서버로 글을 보내고

서버는 글을 받으면 잘썼나 확인해보고

서버는 그걸 DB에 저장

🖤 글쓰기를 위한 파일 생성

write.ejs 를 생성하여 글 작성 폼을 만들어보쟈

웹 페이지에 뭔가를 작성할 input을 만들고 싶으면 form 태그 안에 작성하면 된다
input 은 type을 지정해서 다양한 input 을 만들 수 있다
그리고 전송을 위한 type="submit"으로 된 <button>태그를 만든다

<body class="grey-bg">
    <%- include('nav.ejs') %>
   <form class="form-box" action="/add" method="POST">
    <h4>글쓰기</h4>
    <label> 제목 </label>
    <input type="text" name="title">
    <label> 내용 </label>
    <input type="text" name="content">
    <button type="submit">전송</button>
   </form>
</body>

[ 폼을 전송하는 방식 ]

1. form 태그 속성

<form class="form-box" action="/add" method="POST">

위의 코드를 보면 method 는 POST, 그리고 이 요청은 action 을 통해 /add 로 받는다

action 은 전송하면 이동할 url을 입력하는 곳이고,
method는 요청 방법이다.

2. input 태그 속성

<input type="text" name="title">

만약 name 속성을 입력하지 않으면 서버에 전달이 안된다
name은 내가 생성해놓은 db의 key 값을 입력하면 된다

🖤 서버는 POST요청을 통해 받은 정보 확인

유저가 보낸 데이터 정보를 확인하기 위해서는 req.body 를 사용해야 하는데 이 body를 사용하기 위해서 server.js에 세팅을 해주어야 한다

// require.body를 해주는 세팅
app.use(express.json())
app.use(express.urlencoded({extended:true}))

그리고 action에 지정된 /add로 POST요청시 안에있는 코드 실행하시키면 된다

req.body 를 통해 유저가 input 태그로 보낸 데이터를 출력할 수 있다

req.body 는 내가 입력한 각각의 input 의 name인 title과 content가 존재하는 객체 이다
{title : ~, content : ~}

app.post('/add', (req, res)=>{
  console.log(req.body)
})

🖤 서버는 DB에 저장

이제 req.body를 DB에 저장해야한다

await db.collection('post').insertOne(저장할데이터)

➡️ 이 코드를 통해 데이터가 post (내가 만든 컬렉션 명) 에 저장된다
즉 이러면 post 컬렉션에 새로운 document를 만들어서 이 안에 데이터를 기록해준다

그리고 데이터는 객체 자료형으로 넣으면 된다

app.post('/add', (req, res)=>{
  await db.collection('post').insertOne({title:req.body.title, content:req.body.content) 
  res.redirect('/list')
})

/list 페이지로 강제이동 시키기 위해 redirect를 사용하였다

🖤 예외처리 하는 방법

만약 유저가 input을 공란으로 제출한다면?

input을 제외하고 글 전송을 하면 req.body.title이 ' ' 로 비어있다
이런 경우에는 DB에 저장시키면 안될 듯 하다

그래서 만약 공란인 경우, 저장시키지 않는 조건문들 추가하면 된다

그리고 DB에 뭔가 저장할 때도 몇개의 에러가 발생할 수 있다.

DB가 다운되어서 통신이 안되거나

DB에 뭔가 저장하려는데 _id가 똑같은게 있어서 에러가 나거나

에러가 나는 경우에 특정 코드를 실행하고 싶으면 try catch 문법을 작성하면 된다

⬇️

app.post('/add',async(req,res)=>{

// 예외처리 try-catch    
try{
    if(!req.body.title){
        res.send('입력해주세요')
    } else{ 
        await db.collection('post').insertOne({title:req.body.title,content:req.body.content})
         res.redirect('/list')}
} catch(e){
    console.log(e)
    res.status(500).send('서버 에러 ')
}})