TIL

글 수정기능 만들기

기능 정의

1. 글 마다 수정버튼과 페이지 만들기
2. 링크로 넘어가게 만들기
3. 수정페이지에 글 가져와서 채우기

데이터 수정법

await db.collection(컬렉션명).updateOne({수정할게시물정보}, { $set : {수정할내용} } );

수정할게시물정보 : 보통 아이디를 넣는다

수정할내용 : 객채로 된 내용을 넣는다

ex)

{title : '제목', content: '내용'}

게시물 정보에 넣을 id를 어디서 받아올까

유저한테 입력하라고 하면된다 하지만 유저가 마음대로 막 바꾸면 안되니까..

<input
          style={{ display: "none" }}
          name="_id"
          defaultValue={result._id.toString()}
        />

이렇게 스타일 속성으로 막아놓자

여기서 toString() 쓰는 이유는 서버에서 데이터 주고받을 때 문자 숫자 json 이거만 주고받을 수 있는데 저기 객체에는 new Objtect라는 객체가 들어가 있어서 치환해주는 용도이다

팁

만약 수정할 정보에 내가 원하지 않는 경우가 들어있다면 변수를 만들어서 원하는거만 담자

let put = { title: req.body.title, content: req.body.content };

ㅇ

Ajax 요청

• 장점 : form 태그는 요청보내면 새로고침이 되는데 ajax 요청은 새로고침 없이 보낼 수 있다

<button onClick={()=>{
  fetch('/URL')
}}>🗑️</button>

fetch를 실행하면 url로 요청이 get 요청이 간다

<button onClick={()=>{
  fetch('/URL').then(()=>{
    console.log('완료')
  })
}}>🗑️</button>

서버 응답시(then) 뭔가 실행하고 싶다 하면 안에 저렇게 적는다

<button onClick={()=>{
  fetch('/URL', { method : 'POST', body : '안녕' })
}}>🗑️</button>

이렇게 post delete put도 사용 가능하다

서버로 객체를 전송하고 싶다면?

{name: 'kim'}

이건 object 자료형이다 이걸 서버로 전송하려면 json 화 시켜야한다

'{"name" : "kim"}'

근데 이렇게 따옴표 붙이기 귀찮으니까

JSON.stringify( {name : 'kim'} )

json 메소드를 사용하자

만약 반대로 하고싶다면

JSON.parse( '{"name" : "kim"}' )

이렇게 하자

삭제

삭제할때는

let result = await db.collection('post').deleteOne({_id : new ObjectId(요청.body)});

deleteOne 사용하면 된다

예외처리

fetch('/URL')
.then((r)=>{
  if(r.status == 200) {
    return r.json()
  } else {
    //서버가 에러코드전송시 실행할코드
  }
})
.then((result)=>{ 
  //성공시 실행할코드
}).catch((error)=>{
  //인터넷문제 등으로 실패시 실행할코드
  console.log(error)
})