Silver Library (Archived)

필자가 초창기에 REST API 를 이용해서 프로젝트 내부에 GET 을 구성할 때 가장 난감했던게 있었습니다. '보면 이해가는데, 대체 어떻게 했길래 저렇게 해 낸걸까?' 예를 들면 아래의 react 코드가 있습니다. const getData = async () => { const res = await fetch( `https://api.jikan.moe/v4/anime?q=${search}&sfw&limit=6` ); const resData = await res.json(); setAnimeData(resData.data); }; useEffect(() => { getData(); }, [search]); 참고로 이 getAnimeSearch 의 경우, 그냥 홈페이지 내에서 소개하는 GET 부분의 표..

Axios 와 XMLHttpRequests 가 나온다면 무엇을 의미할까? XMLHttpRequest XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다. 이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있습니다. 이벤트 데이터나 메시지 데이터를 서버에서 가져와야 하는 통신의 경우, EventSource 인터페이스를 통한 서버발 이벤트(Server-sent events)의 사용을 고려하세요. 완전한 양방향 통신의 경우에는 WebSocket이 더 좋은..

Intro react query 와 axios 의 사용법을 알겠으나, 계속 안되는 것을 보고 감이 왔습니다. 결론부터 기록하자면, 우선 중요한 사실... react-query 는 v3 격에 속하고, tanstack 은 일종의 v4, 나온지 얼마 안된 최신본을 의미한다 합니다. 그리고 어째선지 react-query 가 훨신 더 다운로드 횟수가 많죠. 그래서 저는 이 버전을 일종의 stable version 으로 여기기로 했습니다. 이 문제를 해결하기에 앞서, 자바스크립트에서 react, 그리고 axios에서 react-query 까지. 쭈욱...한번 처음부터 어디에서 지식 공백이 생긴건가 싶어 디스크 조각모음 하는 마음으로 종일 잡고 해봤습니다. 어쩌면, 제가 모르는 곳에서 원인이 있었는지도 모를일이지만...

지난번에는 Jikan API 로 Fetch API 와 함께 react 에서 개략적인 구성을 해 봤으니, 이번에는 GraphQL 을 이용해서 Jikan API 를 다시 한번 건드려 보고자 합니다. Jikan API 대신, 다른 API 를 사용해서 간단한 테스트 구동을 진행해보고자 합니다. 개요. react-query 를 주요하게 사용해서 REST API 데이터를 불러오기. 왜 이 실험을 하나요? 1. useEffect 보다도 보다 안정적이다 하기에. 2. 지난 인턴 때 겪었던 고충을 계기로 개선점을 알아가던 중, 추천받은 react-query. 3. axios 로 fetch 를 대체할 수 있다는 사실을 알게됨. 4. 아무튼 코드 길이가 줄어 듬. 5. hook 로 코드 개선하는게 꼭 나쁜건 아님 (적어도 ..