백엔드_백엔드의 핵심 CRUD(2)

이번에 CRUD를 공부하면서 정말 멘탈이 산산조각 나고 있다.

 

저번 글에 이어서 작성을 하기에는 이미 너무 많이 진행을 해버려서 전체 코드를 가지고 

 

복습을 해보도록 하겠다.

코드는 JS와 파이썬 코드만 보면서 복습을 할 거고

주로 프론트와 백의 연결 부분에 초점을 맞추도록 하겠다.

 

Create 

async function createMemo(value) {

  const res = await fetch("/memos", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify({

      id: new Date().getTime(),

      content: value,

    }),

  });

  readMemo();

}

먼저 back와 연결을 해줄 수 있도록 fetch()를 이용한다.

fetch() 내부에 첫 번째 인자는 연결하고 싶은 경로를 입력하는데 

back에서도 같은 경로로 해줘야 한다.

 

fetch() 앞에 있는 await는 저번 글에서도 설명했지만

이 함수가 응답을 보내고 받는 동안 다음 함수가 실행되지 않도록 

기다려주는 거다

await을 쓰기 위해서는 함수 앞에 async를 써줘야 한다

 

입력된 데이터를 보내야 하므로

메서드는 POST로 한다.

 

Read

async function readMemo() {

  const res = await fetch("/memos");

  const jsonRes = await res.json();

  const ul = document.querySelector("#memo-ul");

  ul.innerHTML = "";

  jsonRes.forEach(displayMemo);

}

위와 마찬가지로 await, fetch를 이용한다.

post와 비교했을 때 비교적 간단해 보인다.

코드를 보면 json 메서드가 있는데 왜 이걸 사용하는지 찾아봤지만

이해가 어렵다

그냥 데이터 통신을 위한 포맷이다라고만 이해해야겠다.

 

forEach()는 파라미터로 받은 함수를 순회하면서 순차적으로 출력을 한다

 

 

Update

async function editMemo(event) {

  const id = event.target.dataset.id;

  const editInput = prompt("수정할 값을 입력하세요");

  const res = await fetch(`/memos/${id}`, {

    method: "PUT",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify({

      id,

      content: editInput,

    }),

  });

  readMemo();

}

시작은 다행히 다들 비슷한 거 같다.

Update는 기존에 있던 데이터를 대체해서 새로운 데이터를 넣어줘야 하기 때문에

request body 형식을 쓴다

POST와 비슷하다

 

Delete

async function deleteMemo(event) {

  const id = event.target.dataset.id;

  const res = await fetch(`/memos/${id}`, {

    method: "DELETE",

  });

  readMemo();

}

마지막으로 Delete다 

 

솔직히 이번에 복습을 하면서도 뭐가 뭔지 잘 모르겠다.

강의를 다시 보고, 다른 자료들도 찾아보면서 이 부분에 대해서 공부가 더 필요할 거 같다.

나중에 내가 이 글을 다시 보며

창피해할 수 있을 정도의 실력이 되도록 

노력해야겠다