728x90 728x90 Frontend54 [React Query] React Query 설치 및 사용 방법 [React Query] React Query 설치 및 사용 방법 npm i react-query 먼저 react query를 설치하는데 여기서는 v3를 사용했다. react query의 useQuery hook을 실행하여 서버에서 데이터를 가져오려고 한다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com.. 2023. 11. 25. [React Query] React Query 개념 및 장점 React Query 개념 및 장점 React Query는 React 앱의 서버 상태를 관리하는 라이브러리이다. 그렇다면 서버 상태와 클라이언트 상태의 차이점을 알아야한다. 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보로 예를 들어 테마를 밝은색이나 어두운색 배경으로 변경하는 경우인데 이것은 서버에서 일어나는 일과는 아무 관련이 없고 단순히 사용자의 상태를 추적한다. 반면 서버 상태는 서버에 저장되면서 클라이언트에 표시하는 데 필요한 데이터이다. 예를 들어 데이터베이스에 저장하는 블로그 게시물 데이터가 해당된다. React Query는 클라이언트에서 서버 데이터 캐시를 관리한다. 서버 데이터가 필요할 때 Fetch나 Axios를 사용해 서버로 바로 요청하지 않고 React Query 캐시를 요청.. 2023. 11. 24. 자바스크립트 스코프와 클로저 자바스크립트 스코프와 클로저 스코프란? 스코프는 참조 대상 식별자를 찾기 위한 규칙으로 식별자가 어디에 선언 되었는지에 따라 유효한 범위를 가진다. var x = "global scope"; function f1 () { var x = "function scope"; console.log(x); } f1(); 위 코드에서 전역에 선언된 변수 x는 어디에서든 참조할 수 있지만 함수 f1 내에 선언된 변수 x는 f1 내에서만 참조 할 수 있는데 이러한 규칙을 스코프라고 한다. C에서 파생된 대부분의 언어는 블록 레벨 스코프로 중괄호 { …}를 통한 지역화가 가능하다. var x = 0; { var x = 1; console.log(x); // 1 } console.log(x); // 1 하지만 자바스크립트는.. 2023. 3. 24. 자바스크립트 this 자바스크립트 this 자바스크립트에서의 this는 Java와 같은 언어에서의 this와 그 의미가 다르다. Java에서의 this는 인스턴스 자신을 가리키는 참조변수 이지만 자바스크립트에서는 해당 함수의 호출 방식에 따라 this에 바인딩 되는 객체가 다르다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고 함수가 어떻게 호출 되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수 호출 function f1() { console.log(this); //window function f2() { console.log(this); //window } f2(); } f1(); 기본적으로 this는 전역 객체에 바인딩 되는데 전역 함수가 아니라 내부함수여도 그렇다. 내부함수.. 2023. 3. 23. 이전 1 2 3 4 5 ··· 14 다음 728x90 728x90
