웹7 React Query의 처리중 상태 구분하기 React Query에서 isFetching, isLoading, isPending, isRefetching의 차이점과 활용법React Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다. 서버에서 데이터를 가져오거나 캐싱하는 작업을 단순화해 주며, 이 과정에서 발생하는 다양한 상태를 쉽게 관리할 수 있도록 여러 상태 플래그를 제공합니다. 이번 글에서는 React Query의 중요한 상태 플래그인 isFetching, isLoading, isPending, isRefetching에 대해 자세히 알아보겠습니다. 1. isFetching: 데이터 갱신 상태를 확인isFetching은 쿼리가 백그라운드에서 데이터를 갱신 중인지 여부를 나타내는 플래그입니다. 예를 들어, 이미 캐시된 데이.. 2024. 8. 16. 호이스팅이란? 구형 자바스크립트 호이스팅은 구형 자바스크립트에서 발생하는 것이며, 현재 이런 코드가 있다면 개선해야 합니다. 호이스팅의 사전적 의미는 다음과 같다. hoisting 명사 1.끌어 올리기; 들어올려 나르기. 자바스크립트에서 발생하는 호이스팅은 변수를 끌어올린다 라고 생각하고 아래 내용을 보시면 도움이 되겠다. 변수 선언 호이스팅이라는 개념을 알기 전 변수 선언에 대한 개념이 필요하다. ECMA6에 들어오면서 JavaScript에는 'let'과 'const'라는 변수선언 예약어가 추가되었다. 이는 var가 가지고 있는 문제를 해결하기 위해서 만들어진 것이라고 한다. var 변수선언의 가장 큰 특징은, 블록 스코프가 없다는 것이다. 블록 스코프가 없다는 것은, 변수의 영향범위를 산정하기 어렵다는 의미이다. .. 2021. 1. 11. this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31. 타입스크립트 정리하기 6. 함수 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 6. 함수 6-1. 기본 파라미터와 옵션 파라미터 옵션 파라미터 타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다. 단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다. function buildName(firstName:string, lastName?:string){ //.... } function buildNameInvalid(firstName?.. 2020. 4. 19. 타입스크립트 정리하기 5. Enum 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 5. Enum 5-1. 특정한 값을 가진 Enum enum의 기본값은 각 요소가 풀어질 때 숫자 값이 할당된다. enum MimeType { JPEG, PNG, PDF } MimeType의 PDF를 사용하게 되면, 값은 2가 된다. 이 때, 각 요소에 값을 할당할 수 있다. enum MimeType { JPEG = 'image/jpeg', PNG = 'image/png', PDF = 'application/pdf' } 이제 MimeType의 PDF를 사용하게 되면, 값은 'ap.. 2020. 4. 19. Type Script 정리 - 2. 타입스크립트를 언제 또 왜 사용해야 하는가? 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 2-1. 안전성 타입스크립트는 정적 분석을 통해 타입에러를 잡아낸다. function double(x: number) : number { return 2*x; } double('2'); // ~~~ Argument of type '"2"' is not assignable to parameter of type 'number'. 2-2 가독성 타입스크립트는 에디터에서 상황에 맞는 문서를 제시한다. 2-3. 자동완성 타입스크립트는 에디터가 자동으로 소스코드를 지정한 형태로 포맷을 자.. 2020. 4. 13. Type Script 정리 - 1. 타입스크립트 시작하기 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 1. 타입스크립트 시작하기 1-1. 설치 및 설정 배경 타입스크립트는 자바스크립트 코드로 바로 컴파일하여 사용하기위한 자바스크립트의 형식화된 스크립트 코드이다. 타입스크립트는 .ts 확장자를 사용한다. 많은 IDE가 특별한 설치 없이 타입스크립트를 지원하지만, command line 에서도 Node.JS의 Typescript 패키지를 활용하여 컴파일 할 수 있다. TypeScript를 지원하는 IDE Visual Studio Visual Studio Code WebStorm I.. 2020. 4. 5. 이전 1 다음 반응형
