[TIL] JS fetch 비동기 통신을 이용한 CRUD

✍ Today I Learned

• [Read]
  • 서버와 통신하여 가져오는 데이터의 개수를 알 수 없기 때문에 html의 item card를 미리 만들어 놓는 것이 아니라 1개의 card를 데이터 개수만큼 찍어내야 한다.
  • 대략적인 흐름 [클라이언트가 서버에 데이터 요청 -> 서버가 데이터베이스에서 요청된 데이터를 받아옴 -> 그걸 string으로 클라이언트에게 보냄 -> 프론트에서 데이터의 개수만큼 html을 생성 -> 화면단에 출력]
  • button 타입이 submit 일 경우 자동으로 페이지 이동이 되기 때문에 preventDefault() 메서드를 이용해 기본 속성을 막아주어야 한다.
• [Read - Detail]
  • 비표준 속성(Non-Standard Attribute)이란? html 태그의 속성이 제한적이므로 개발자가 용도에 맞게 사용하도록 별도로 예약된 속성이다. data-* 로 시작하고, dataset 프로퍼티를 사용하여 이 속성에 접근할 수 있다.
  • 동적으로 생성되는 html에 data-ino로 각각의 id값을 부여한다. 이렇게 하면 어떤 데이터의 디테일 정보를 받아와야 하는지 알 수 있다.
  • 파라미터로 값을 전달할 땐 어떤 형태로 전달되는지 콘솔에 자주 찍어서 확인해보자.
• [Create]
  • querySelector는 CSS의 선택자를 그대로 사용하므로 querySelectorAll('.needs-validation input'), querySelector('#category option:checked') 다음과 같이 복잡한 선택자도 사용할 수 있다.
  • 생산성을 위해 서버에서 받는 객체의 키값과 클라이언트에서 사용하는 id값은 동일하게 사용하는 것이 좋다.
  • 정확히 약속되어있는 규격으로만 데이터 통신이 가능하다. 점 하나, 띄어쓰기 하나라도 다르면 오류가 발생한다.
  • text() 메서드와 json() 메서드에 대해 더 알아보자. JSON.parse()와는 어떤 차이점이 있을지?
• [Update]
  • Update는 Detail+Create! id에 해당하는 아이템을 서버에서 받아와 화면에 출력하고, Create와 마찬가지로 수정된 데이터를 서버에 전달해 저장한다. 겹치는 코드가 많아서 주로 모듈화 된 코드를 사용한다.
  • DOMContentLoaded 이벤트는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생하고, 이미지 파일이나 스타일 시트 등의 다른 자원은 기다리지 않는다.
  • location.search는 쿼리 스트링을 반환한다.
  • <input type="hidden">을 이용하면 사용자에게 노출되지 않으면서 데이터 전송을 할 수 있다.
  • 통신에 오류가 발생했을 땐 디버거를 이용해 하나씩 거슬러 올라가면서 디버깅해보자!
• [Delete]
  • Delete도 Update와 마찬가지로 id를 특정해야 하는데 hidden 타입 input value에 넣어둔 id를 사용하거나 버튼 태그 자체의 비표준 속성을 사용할 수 도 있다.
  • 삭제 요청은 반드시 POST, 혹은 DELETE 방식으로 해야 한다.
  • 서버에 전달되는 데이터는 JSON 형식이어야 하기 때문에 ino를 직접 JSON 형식으로 만들어 전달한다.
  • 페이지 이동은 History가 남지 않는 location.replce()를 사용한다.