반응 중인 서버에 양식 가져오기 및 제출

코딩 여정에서 얼마나 멀리 왔는지 생각하고 지금 돌이켜보면 시작한 이후로 많이 발전했음을 알 수 있습니다. 이제 나는 두 번째 프로젝트를 진행 중이며 기분이 좋습니다. 프로젝트를 만들면서 부딪힌 모든 문제 중에서 가장 눈에 띄는 문제가 하나 있었습니다. 가장 두드러진 문제는 서버에 양식을 제출하는 것이었습니다. 이 작업을 완료하는 과정과 모든 것을 하나로 모아 프로젝트를 완성했을 때의 느낌을 설명하고 싶습니다.

먼저 내 프로젝트가 무엇인지 이야기 해 봅시다. 내 프로젝트는 임의의 농담을 제공하는 Jokes 앱이라고 합니다. 그것은 당신에게 농담에 대한 답변을 제공하고 당신이 생성 농담에 대한 당신의 농담을 만들 수 있습니다. 생성한 새 농담도 임의 농담 목록에 추가됩니다. 멋지지 않나요?

자, 시작하기 위해 무작위 농담에 대한 모든 정보를 보관할 db.json 파일을 만들었습니다. 다음과 같이 표시됩니다.
{
"농담": [
{
"ID": 1,
"joke": "허수아비가 상을 받은 이유는 무엇인가요? ",
"답변": "그가 자신의 분야에서 탁월했기 때문입니다."
},
{
"ID": 2,
"joke": "왜 멜론이 호수로 뛰어들었을까?",
"답변": "수박이 되고 싶었습니다."
},
{
"ID": 3,
"joke": "가라테를 하는 돼지를 뭐라고 부르나요?",
"대답": "돼지고기."
},
{
"ID": 4,
"joke": "바다는 어떻게 인사할까요?",
"answer": "흔들린다."
},
{
"ID": 5,
"joke": "바나나 쪼개는 법을 어디서 배우나요? ​​",
"answer": "순대 학교에서."
},

이것들은 내 무작위 농담 배열에 있을 모든 미리 설정된 농담입니다.

참고: 서버가 올바르게 실행되려면 데이터에 ID 번호가 첨부되어 있어야 합니다.

나중에 "npm install -g json-server"명령을 사용하여 JSON 서버를 설치했습니다.
그런 다음 "json-server --watch db.json"명령으로 JSON 서버를 시작했습니다.

이제 내 서버가 실행 중입니다. 모든 POST, PUT, PATCH 또는 DELETE 요청 또는 변경 사항은 db.json에 자동으로 안전하게 저장됩니다.

이제 가져오기 요청 작업을 시작했습니다. 나는 이 가져오기 요청을 사용하여 다음과 같은 농담인 내 db.json에서 정보를 검색했습니다.

useEffect(()=>{
가져오기("http://localhost:3000/Jokes" )
.then(resp => resp.json())
.then(데이터 => setJokes(데이터))
.catch(콘솔.오류())
},[]
)

내 setJoke 변수 배열에 설정합니다.
이제 해당 변수에 내 농담이 저장되었으므로 원하는 대로 조작할 수 있습니다. 무작위 농담 받기 버튼을 무작위 순서로 누를 때마다 나중에 화면에 팝업되도록 했습니다.

이제 제출을 처리하기 위해:

함수 핸들 제출(e){
e.preventDefault()
const newJoke = {
...formData
}

    console.log(formData)
    fetch('http://localhost:3000/Jokes', {
    method: 'POST',
    headers: { 'Content-type': 'application/json', },
    body: JSON.stringify(newJoke),
    })
    .then((resp) => 
       {
      console.log(resp)
      console.log(newJoke)
      return resp.json()}
    )
    .then(onAddJoke)
    .catch((error)=>console.log(error))

newJoke 변수의 formdata에 있던 텍스트를 저장하기 위해 handleSubmit 함수를 만들었습니다. 그런 다음 제출 버튼에 대한 POST 요청을 생성했습니다. 제출 버튼을 누르면 데이터가 새로운 농담으로 db.json에서 업데이트됩니다.

이것이 내가 프로젝트에서 데이터 제출 및 가져오기를 올바르게 처리할 수 있었던 방법입니다. 이제 모든 것을 되돌아 보면 만들기가 상당히 쉬웠습니다.