목록분류 전체보기 (374)
Silver Library (Archived)
리엑트에서나 JS에서나, 방아쇠 역활을 하는 뭔가를 구성할 때가 되면: onChange={(e) => { setWhatever(e.target.value);}} 를 사용하죠. 독학으로 하는 분들이라면 아마 이런 생각을 하셨을 가능성이 있습니다. 저 e 가 event 를 의미하는 것 까지는 알겠는데, 저 target.value 같은 method 는 어느 JS 문법일까? 같이 말이죠. 하지만 방향은 근접했습니다. 그럼 어떻게 할까요? 우리에게는 console.log 가 있습니다. 그리고 짐작 하셨다시피, 이건 mutation 의 일종입니다. 한번 흐름을 타고 가보도록 하죠. #1. console.log(e) 라고 해보세요. 이걸 이해하려면, 우선 위와 같은 코드가 적용된 코드 파일 스크립트 내에서 onCha..
필자가 초창기에 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이 더 좋은..
이 두가지가 react-query 를 사용 할 지에 대한 정보글로 보기에 좋았습니다. (다만 굳이 안 읽으셔도 됩니다. 어디까지나 필자의 background knowledge 편의상 남기는 링크글...) How and Why You Should Use React Query Simplify data fetching with react-query’s custom hooks. blog.bitsrc.io What I learned from React-Query, and why I will not use it in my next project The beginning was exciting. The company’s lead front-end architect suggested checking out React-..