기획

<aside> ⭐

바닐라 JS를 사용하여 FETCH와 AXIOS의 차이 및 각 장단점에 대해서 알아보기 위해서 만든 프로젝트입니다.

</aside>

주요 기능

• 투두리스트:
  • Json Server를 이용하여 투두리스트의 기능을 수행합니다.
  • fetch, axios 각 모드에 따른 방식으로 CRUD 기능을 수행합니다.
• 모드 변경:
  • CRUD를 fetch로 할지 axios로 할 지 선택하고 테스트해볼 수 있습니다.
• FETCH&AXIOS 모달:
  • 화면 우측 상단에 FETCH MODE (또는 AXIOS MODE)를 클릭하면 각 함수에 대한 설명이 들어있는 모달이 나타납니다.

디자인

https://www.figma.com/design/mMU1Jth0Rxorvr643vOfwo/TODO?node-id=1-48&t=pBV8YFeR4IhXDSCa-1

개발

#08.17

• 아무리 생각해도 위와 같은 방법은 아닌거같다.
• 차라리 새 서버와 DB를 추가하는게 나을까? Korean Json을 fork할 수 있다는데, 포크 뜨는게 나을까?
• Json-server로 변경하자 선택 이유 : 서버가 따로 필요하지 않음. npm 실행할 때 동시 실행하도록 package.json 수정하면 가능!
• 하지만 단점도 있는 것 같다. 아마도 배포하면 CRUD 동작 안할지도. why? ⇒ db.json파일을 직접 수정하는 방법인 것으로 확인되는데… 배포하면 저걸 수정하는게 가능한가? 아마 아닐것 같긴 한데.. 일단 해보자.
• 업데이트 코드의 수정 필요!!
• 발생한 이슈 : 수정된 내용이 즉각적으로 안보인다! ⇒ 새로고침 해야 보인다.
• 등록된 것과 삭제되는 내용은 즉각적으로 보인다

#08.22

• 삭제코드 구현 완료
• 업데이트 코드 수정필요.
• 현재 업데이트 된 내용이 바로 반영 안됨.
• 요소가 추가되면 input 안에 내용 클리어되도록