사이드 프로젝트 [계획서] - anime jikan api

목표:

jikan v4 api 를 활용 해서, react library 위에다가 'getTopAnime' 기능이 작동하게 표시해보기.

계획을 안심이 될 정도로 잘 정립한 후에(80%), 코드 구성(20%)하기.

 

설정 기간 :

최대 1주일을 넘기지 않기.

 

계획 수정:

기존에 이해했던 promises 와 useState, useEffect, props 조합으로 rest api 구성하는 방식으로 진행.

가능하면 App.js 에 몰아넣지 말고 분산하는 것에 노력.

 

주의점.

fetch 로 하면, 에러가 끊임없이 발생하게 될 우려가 있음. 그러니, axios 나 react query 를 사용해서 시도하기.

어찌되었든 이번에는 기본 점검의 의미가 강하므로, 대표적인 react hook 만을 이용해서 구현해보기. 

바닐라 자바스크립트가 아닌 만큼, react hook 의 이점을 사용하기.

react-query 는 fetch api 나 axios library 를 대체하는 게 아님.

 

공식 코드 계획.

- src > components > addWishlist, removeWishlist, listOfAnime, AnimeInfo (synopsis) 

- src > main.js, index.js 

- src > styles > css stuff

 

react query 는, jikan api 에 있는 커뮤니티 관리 및 엔지니어의 조언 대로

'state 및 useEffect 접근 방식 보다는, js 의 fetch 와 비슷한 느낌의 react query 를 사용' 해서 접근.

 

이 후, path/query parameter 를 입력 및 구성. axios 로.

그리고 아래 return 부분에서 해당 데이터를 출력할 부분에 대한 설정 구성.

===================

Advise from an engineer.

1. in case of fetch API and React you have to deal with mirad of things. You can't just shove it in a userEffect and expect it to work unfortunately. You want to deal with errors, and cancellations too, and tie those to state changes. Also there is the problem with the Promise the fetch function returns. If that resolves after your component is unmounted, you will get nasty error messages, worse case memory leaks. You can either roll your own solution or just use a library like React Query: https://react-query-v3.tanstack.com/

   React Query

   Hooks for fetching, caching and updating asynchronous data in React

    

    
2. Also I usually recommend to all React padawans this document to read through it: https://beta.reactjs.org/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect

   Lifecycle of Reactive Effects

   A JavaScript library for building user interfaces