Node.js + MongoDB 수정기능 만들어보기(method-override[lib])

edit.ejs 페이지를 만들어보도록 합시다.  

write.ejs 와 형식이 같을거 같으니 edit.ejs파일을 생성하여 write.ejs를 그대로 복붙해주자

 

추가해줘야할점

(views/edit.ejs)

<input type="text" value="111111">

안에 들어갈 내용은 그냥 write.ejs에 있던 모든 코드 복붙

보통 회원수정페이지들어가면 우리 정보가 기입되있는걸 확인할 수 있다 그렇기 때문에 페이지와 내정보가 같이 뜨게 inpu태그에 value값을 넣어주자

그러기 위해서 페이지 요청이 들어왔을때 그 고객에 해당하는 정보를 넣어줘야 한다 js파일을 보자

 

(server.js)

app.get('/edit/:id', function(요청, 응답){
  db.collection('post').findOne({ _id : parseInt(요청.params.id) }, function(에러, 결과){
    응답.render('edit.ejs', { post : 결과 })
  })
  
});

파라미터 값으로 id를 받아와 거기에 맞는 유저정보를 저장하여 post key갑으로 edit.ejs로 보낸다

 

▲ 그럼 edit.ejs에서 input안에 기존 게시물의 제목과 날짜를 채워주려면?

위와 같이 넣어주게되면 된다

 

이제 edit.ejs에서 전송버튼을 누르면 수정(PUT)요청을 해야합니다. 

 

서버에 요청할 수 있는 방법은 4가지 GET POST PUT DELETE

4개 중에 수정할 땐 PUT요청을 쓰면 좋다고 배웠습니다.

(edit.ejs)

<form action="/어쩌구" method="PUT">
  <input 어쩌구>
</form>

그쵸? method란을 POST가 아니라 PUT으로 바꾸면 될 것 같은데

그건 되지 않습니다. form태그 내에선 POST, GET 이 두가지 방식만 지원합니다.

해결책은.. 전글에서 DELETE 처럼 AJAX를 쓰던가.. 아니면

PUT을 기어코 여기에 쓰려면 method-override라는 라이브러리를 설치하면 됩니다. 

 

method-override라는 라이브러리를 사용 방법

1. 터미널에 npm install method-override 를 입력해서 설치하시면 됩니다.

 

2. 설치를 완료하기 위해 server.js 상단에 다음 코드를 추가합니다. 

const methodOverride = require('method-override')
app.use(methodOverride('_method'))

const와 app.use가 모여있는 곳에 복붙하시면 됩니다.

 

3. 이제 form 태그에 PUT요청을 사용할 수 있습니다. 

(edit.ejs)

<form action="/edit?_method=PUT" method="POST">
  <input 어쩌구>
</form>

method에는 GET와 POST밖에 입력하지못한다 그래서 action칸에 /?_method=PUT 작성해준다

 

(server.js)

app.put('/edit', function(요청, 응답){
  DB 데이터를 수정해주세요
});

/edit에 put요청이 오게되며 put에대한 처리가 가능해진다.

 

 

 

DB 데이터를 수정하려면 updateOne을 씁니다

구글 찾아보시면 MongoDB에는 updateOne 이라는 고마운 함수를 쓸 수 있다고 합니다. 

사용법은 updateOne( 1.업데이트할게시물찾기, 2.수정할내용, 3.콜백함수) 라고 합니다. 

1. 업데이트할 게시물을 찾으시려면 저렇게 기존 게시물의 _id 같은걸 작성해주면 되겠습니다. 

2. 그리고 그 게시물을 업데이트하시려면 $set 이런 operator를 사용하시면 되겠습니다. 그러면 기존 값을 수정/추가 해줍니다.

3. 콜백함수는 업데이트 완료시 실행할 코드를 적으면 되겠습니다.  

 

?? 물음표 자리에 유저에게 요청받은 데이터를 채워넣어봅시다

(server.js)

app.put('/edit', function(요청, 응답){
  db.collection('post').updateOne( {_id : ??}, {$set : { 제목 : ??, 날짜 : ?? }}, function(){
    console.log('수정완료')
  });
});

데이터를 찾을때 중복되지 않은 내가원하는값 하나를 가져올려면 그에맞는 idx을 가져와야한다 그래서 id가져오는 방법을 알아보자.

 

<form>태그에 몰래 안보이는 <input type="hidden" value="">을 추가해보도록 합시다. 

다른방법은 type="text"에 style을 hidden으로 주는방법도 존재한다.

전송된 데이터 db에 업데이트하기

(server.js)

app.put('/edit', function(요청, 응답){
  db.collection('post').updateOne( {_id : 요청.body.id }, {$set : { 제목 : 요청.body.title , 날짜 : 요청.body.date }}, function(){
    
    console.log('수정완료')
  
  });
});

그래서 사용자가 폼전송시 함께 요청한 id를 요청.body.id 이런 식으로 꺼내쓸 수 있습니다.

(id라는 단어는 input에 부여한 name 속성입니다.)

그리고 나머지 수정할 데이터 $set 어쩌구 부분의 물음표도 실제 사용자가 요청한 데이터로 채워넣어봤습니다.

 

다시 한번 위 코드를 해석하자면 

"사용자가 /edit으로 PUT요청을 하면"

"post라는 콜렉션에 있는 {_id : 요청.body.id } 데이터를 찾아서 { 제목 : 요청.body.title , 날짜 : 요청.body.date } 로 바꿔주세요"

입니다. 

 

그리고 마지막 화룡점정으로 parseInt()를 추가해줍니다. 

(server.js) 

app.put('/edit', function(요청, 응답){ 
  db.collection('post').updateOne( {_id : parseInt(요청.body.id) }, {$set : { 제목 : 요청.body.title , 날짜 : 요청.body.date }}, function(){ 
    
      console.log('수정완료') 

  }); 
}); 

왜냐면 DB에 저장한 _id : ? 는 숫자니까요.

 

수정완료후 리스트페이지

(server.js) 

app.put('/edit', function(요청, 응답){ 
  db.collection('post').updateOne( {_id : parseInt(요청.body.id) }, {$set : { 제목 : 요청.body.title , 날짜 : 요청.body.date }}, 
    function(){ 
    
    console.log('수정완료') 
    응답.redirect('/list') 
  }); 
}); 

왜냐면 응답을 안해주면 브라우저가 멈출 수 있으니까요. 성공이든 실패든 응답을 해주어야합니다.