자바스크립트 Promise
프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.
Fetch
- 자바스크립트가 제공하는 메서드로 API 서버로 http 요청을 송수신 할 수 있도록 도와주는 메서드다.
- Fetch는 url을 매개변수로 받거나 url과 options을 매개변수로 받을 수 있다.
- Fetch함수는 Promise 오브젝트를 반환한다.
- 따라서 then과 catch에 각각 onResolve, onReject, onError 콜백 함수를 전달해 응답을 처리할 수 있다.
실습
src 디렉터리 아래에 api-config.js 생성
src/service/ApiService.js 생성
위와 같은 유틸리티 함수가 없다면 api요청을 보내는 모든 함수들이 이러한 fetch 함수를 따로 작성해야한다.
ApiService에서 작성한 call 메서드를 사용하면 간단하게 API 콜을 할 수 있다.
App.js의 기존 함수들을 ApiService를 이용해 수정한다.
Todo Update 수정
- 사용자가 키보드 키를 입력하면 item 오브젝트를 수정하므로 우리가 할 일은 App.js 의 editItem() 함수 내에서 items 리스트를 새 배열로 옮김으로써 재랜더링하는 작업을 했다.
-> 따라서 수정한 item을 editItem() 으로 넘기지 않아도 잘 동작했다. - 하지만 API를 이용해 item을 수정하기 위해서는 1,2번의 작업이 필요하다
1. Service API를 이용해 서버 데이터를 업데이트한 후
2. 변경된 내용을 화면에 다시 출력하는 작업
App.js에서 editItem 함수 수정
사용자의 입력을 받을 때마다(editEventHandler) item을 넘겨서 한 글자마다 HTTP 요청을 보내게 되는 데 이것은 매우 낭비다. 사용자가 수정을 완료한 시점은 인풋필드가 수정 가능한 상태에서 사용 불가능한 상태로 바뀌는 시점이다.
- 따라서 turnOnReadOnly 에서 HTTP 요청을 보내는 editItem() 을 실행하게 코드를 변경했다.
Todo.js에서 editItem()함수에 item을 매개변수로 넘기기
체크박스는 업데이트 될 때마다 백엔드에 HTTP 요청을 보내면 된다.
Todo.js에서 checkboxEventHandler 내의 editItem으로 item넘기기
다음과 같이 PUT 요청을 확인할 수 있다.
