[NodeJS+Express] 10. 글 작성기능 만들기 (MongoDB 데이터 삽입)

이번에는 글 작성 기능을 만들어보자!

 

0. 시작하기전..

먼저 글 작성기능을 만드려면 어떻게 해야할까?

 

클라이언트가 작성한 글을 서버에 post 요청을 하면

서버는 그 데이터가 올바른 형식인지 확인을 한 후,

이상이 없다면 DB에 등록을 할 수 있도록 해주어야할 것이다.

(유저가 직접 DB를 건드리도록 해서는 안될 것이다..)

 

1.  글 작성기능 만들기

1) 파일 생성

글을 작성할 form을 담은 파일을 하나 생성한 뒤 서버에 등록해준다.

//write.ejs
...
<form>
  <textarea></textarea>
  <textarea></textarea>
  <button></button>
</form>

 

//server.ejs
app.get('/write', (request, response) => {
  response.render('write.ejs');
})

 

2) 파일 설정

글을 작성해서 보내기 위한 설정을 해주어야한다.

 

(1) EJS파일

//write.ejs
...
<form actoin="/addpost" method="POST">
  <textarea name="title"></textarea>
  <textarea name="content"></textarea>
  <button type="submit"></button>
</form>

 

form 태그 : action과 method 속성을 삽입해준다.

  - method는 DB에 데이터를 보낼 것이므로 POST로 설정한다.

  - action은 서버에 요청을 보낼 url을 설정한다. (서버파일에 동일하게 작성할 예정)

 

textarea, input 등 데이터 입력 태그 : name 속성을 삽입해준 후 임의로 이름을 작성해준다.

button 태그 : type 속성에 submit으로 설정하면 form에 설정한 내용을 제출하도록 설정한다.

 

(2) 서버 파일

//server.js
app.post('/addpost', (request, response)=>{
  console.log(request.body);
})

위처럼 app.post()를 통해 form에서 작성한 url을 등록한다.

 

이때 request.body에 통해 post 요청에 첨부한 데이터가 들어있는데

콘솔창에서 먼저 확인해보자.

 

그 전에 이를 위해서 한가지 설정이 필요하다!

 

//server.js
app.use(express.json())
app.use(express.urlencoded({extended:true}))

위 코드를 서버파일 상단에 작성해준다.

 

 

이제 글을 작성한 후 제출 버튼을 클릭해보면

작성한 내용들이 {name:작성내용, ... }의 형식의 객체를 반환하는 것을 확인할 수 있다.

 

 

3) 글 등록하기

이제 본격적으로 글을 등록하기 전에 데이터를 삽입할 DB를 살펴보자.

이 프로젝트에서 사용하는 MongoDB를 살펴보면

forum 이라는 DB명에 post 라는 collection명을 이전 포스트에서 설정해놓았다.

 

또한 테스트로 넣었던 데이터블록도 title, content라는 key를 가진 형태이다.

 

이를 그대로 이용해보자.

 

//server.js

let db;
const url = 'MongoDB URL'
new MongoClient(url).connect().then((client)=>{
  console.log("DB connected");
  db = client.db('forum') //설정한 db 이름

  app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중!')
  })

}).catch((err)=>{
  console.error(err);
})

...

app.post('/newpost', async(request, response)=>{
  await db.collection('post').insertOne({title:request.body.name, content:request.body.content});
  response.redirect('/list')
})

 

위에서 확인했던 requset.body로부터 값을 가져와서 전달해주었다.

DB에 값을 전달해때에도 역시 비동기 처리를 위하여 async await를 사용해준다.

 

이후, 서버 파일 내에 정의 되었던 db 변수에 .collection('collection명')에 insertOne()함수로 데이터를 삽입한다.

또한 response.redirect('path명')을 통해 데이터 저장 후 url 접속을 할 수 있다.

 

 

이제 form에서 데이터를 입력한후 submit 버튼을 누르면

 

아래와 같이 DB에 잘 전달된 것을 알 수 있다.

 

4) 글 등록 전 서버 검증단계 추가하기

글 시작에 다루었던

1. 클라이언트의post 요청 / 2. 서버는 그 데이터가 올바른 형식인지 확인 / 3. 이상이 없다면 DB에 등록

 

이 중 2번, 서버에서 데이터 검증을 하는 과정을 구현해보자.

 

[구현할 검증 내용]
1. 제목이 비어있는 경우
2. 제목 30자 이내

//server.js
app.post('/newpost', async(request, response)=>{
  try{
    if(request.body.title == ""){
      response.send("제목을 입력해주세요");
    }
    else if(request.body.title.length > 30){
      response.send("제목을 30자 이내로 입력해주세요.");
    }
    else{
      await db.collection('post').insertOne({title:request.body.title, content:request.body.content});
      response.redirect('/list');
    }
  }catch(err){
    console.log(err);
    response.send("DB오류");
    //500코드를 반환하기때문에->response.status(500).send("DB에러");
  }
})

- try, catch : DB에 연결이 되지 않거나, _id가 똑같아서 저장이 불가하는 등의 에러에 대한 예외처리를 해줄 수 있다.

- if else 제어문 : 조건문을 통해 유저에게 오류 내용을 명시해주었다!

 

 

 

[요약]
- <form>태그로 post 요청
- request.body에 post 요청한 내용 들어있음
- try, catch, 조건문 등 활용하여 서버에서 데이터 검증
- .insertOne() 으로 데이터 DB에 삽입