To-Do List를 만들어 보았다.
서버에서 데이터를 받아와 이 데이터에 대한 CRUD를 구현하기 위해
REST API를 사용하여 구현하였는데, 간단하게 fake-api를 사용하였다.
fake-api를 사용하기 위해서 json-server를 사용하였는데
json-server란?
짧은 시간에 REST API를 구축해주는 패키지로 npm을 통해 설치가 가능하다.
json-server는 실제 프로덕션에서는 사용하지 않는다고 한다.
json-server를 설치하는 방법과 사용하는 방법은 터미널에
npm install -g json-server 로 설치하고
데이터 파일이 있는 경우
데이터 파일이 있는 경로로 들어가서 json-server --watch db.json를 입력해 주면 된다.
json-server --watch 후에 나오는 db.json(데이터 파일 명)은 임의로 수정해도 된다.
화면이 로드되면 data를 가져오기 위하여 DOM이 로드되는 이벤트를 걸고 data를 가져오는데,
Read
fetch()를 사용하여 비동기로 데이터를 가져와서 렌더링 해주었다.
Create
fetch()를 통해 서버에 데이터를 보내기 위해서는 method, headers, body가 필요한데,
서버에 단순히 데이터를 보내기 위함이니 POST를 사용하고, headers에는 데이터 타입(콘텐트 타입), 바디에 데이터를 JSON형식으로 보내었다.
Update
각각 목표로 하는 기능을 수행하기 위해 className을 통해 해당하는 엘리먼트만 기능하도록 구현하였다.
글을 수정하는 기능은 수정할 시 입력된 내용 다음으로 포커스가 오도록 하였고, 수정을 취소할 시 기존의 상태로 되게 하였다.
서버에 데이터를 보내기 위해 url다음에 해당하는 인덱스를 서버에 파라미터로 넘겨주고, 수정을 위한 거니 PATCH를 사용하였다.
서버에 데이터를 보내어 수정된 데이터를 다시 렌더링 해주었다.
Delete
삭제는 DELETE를 사용하였다.
Pagination
다음은 페이징처리이다.
