Silver Library (Archived)

코드를 계속 보다보니 느껴진 게, 대체 저건 뭘까? 였습니다. 언제부턴가 TS 와 비슷해지려는 느낌이 보이는 JS 코드들이 보이는데, 역시 2018년을 기점으로 권고안이 달라진 것을 볼 수가 있었습니다 (미국 내 쿠키정책). 그리고 이것의 정체가 바로 CORS policy 인데요. 이에 대해 지속적으로 알아보고자 합니다. 아래는 client 측을 기준으로 재구성 한 예시 코드입니다. const loginButtonAsKim = document.getElementById("loginAuthKim") const loginButtonAsRaynor = document.getElementById("loginAuthRaynor") const adminButton = document.getElementById("a..

리엑트에서나 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이 더 좋은..