서버로 데이터 전송

1. 수정하기

- 기존의 글쓰기와 같지만 대신 input에는 그 전에 썼던 글이 들어가있어야한다. 그래서 input 속성에 defaultValue를 주고 그 전의 데이터들을 넣어주었다. 

- 서버에서는 기존의 값들을 update해주기 위해 id가 필요하다.
 (input에다가 id를 같이 담아보내준다. display:none을 통해 브라우저에서는 나타나지 않는다.)

<input
   name="_id"
   placeholder="글 id"
   defaultValue={results._id.toString()}
   style={{ display: 'none' }}
   />

//edit API
let newList = {
      title: req.body.title,
      content: req.body.content,
    };
 
 let result = await db
      .collection('post')
      .updateOne({ _id: new ObjectId(req.body._id) }, { $set: newList });

수정한 글을 edit API 으로 보내준다. 수정 완료!

기존에 글을 post했던 것과 비슷해서 오히려 간단했다.

---

2. 삭제하기

• 휴지통을 누르면 삭제가 가능하도록 한다.

<span
   onClick={(e) => {
   fetch('api/post/delete', {
    method: 'DELETE',
    body: result._id,
     }).then(() => {
    e.target.parentElement.style.opacity = 0;
    setTimeout(() => {e.target.parentElement.style.display = 'none';
     }, 1000);
      });
     }}>
      🗑️
   </span>

//delete API

export default async function handler(req, res) {
  if (req.method === 'DELETE') {
    const db = (await connectDB).db('forum');
    let result = await db
      .collection('post')
      .deleteOne({ _id: new ObjectId(req.body) });
    return res.status(200).json('삭제완료');
  }
}

삭제 기능 끝

---

이 방법 외에 쿼리스트링으로 데이터 전달해보기

//요청
fetch('/api/test?name = cho');

//test서버
export default async function handler(req, res) {
  console.log(req.query);
  return res.status(200).json();
}

요청할 URL에 ?을 붙이고 전송할 데이터를 적어준다. 여러개를 보낼 경우 & 기호를 사용한다.

확인!

 

주소에 데이터가 뜨는 만큼 민감한 정보는 보내지 않는다.

 

또 다른 방법, 서버도 [ ]를 이용해서 만들 수 있다 -> [etc].js

서버에 '/api/test/아무거나' 로 요청하면 이 파일이 실행된다.

  console.log(req.query);

query로 호출을 해보면 아래와 같은 결과가 나온다.

 

 

끝