지식 창고

TanStack Query의 isFetching vs isLoading 차이점TanStack Query(구 React Query)는 비동기 데이터 관리를 강력하게 도와주는 라이브러리입니다. 데이터를 가져올 때 isLoading과 isFetching이라는 두 가지 상태를 제공하는데, 이 둘의 차이를 이해하는 것이 중요합니다.1. isLoading이란?isLoading은 데이터를 처음 로드할 때(initial loading) true가 됩니다. 즉, 쿼리가 처음 실행되면서 아직 캐시에 데이터가 없는 경우를 의미합니다.예제 코드isLoading이 true가 되는 경우쿼리가 처음 실행될 때캐시에 해당 데이터가 없는 경우isLoading이 false가 되는 경우데이터가 성공적으로 로드된 후에러가 발생한 경우2. ..

요소의 높이를 100%로 늘리는 애니메이션을 만들려면 다음과 같은 단계를 따르면 됩니다:1. 요소에 대한 CSS 속성을 설정합니다. 이때 요소는 상위 요소(부모 요소)의 크기를 기준으로 높이를 조정합니다..parent { height: 400px; /* 부모 요소의 높이 */}.child { height: 0; /* 자식 요소의 초기 높이 */ transition: height 0.5s ease-in-out; /* 높이가 바뀔 때 애니메이션 속성 */}2. 자식 요소의 높이를 100%로 늘리는 애니메이션을 작성합니다. 이때 자식 요소의 높이를 100%로 설정하면 부모 요소의 높이와 동일하게 됩니다..child.active { height: 100%; /* 자식 요소의 높이를 100%로 설정 */}..

최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가 있다고 평가하면서, 앞으로는 React Fast Refresh로 대체될 것이라 생각한다고 의견을 밝혔다. 기존의 핫 로더는, 대규모 앱에서 코드변경, export/import 문제, Typescript관련 문제 등 앱이 매우 느리게 동작하는 것이 문제였다. 그 대안으로 나온게 Fast Refresh이며, 2019년 React Native 0.61에 처음 도입 되었다. 그렇다면 React Fast Refresh가 하는 일은 무엇인가? 앱 전체를 다시 ..

나는 개발할 때 Chrome 개발자도구의 console을 굉장히 자주 사용하는데(대부분의 개발자들이 그럴 것이라 생각한다), 오늘은 크롬 개발자도구의 편리한 기능과 잘 쓰진 않지만 알아두면 좋은 기능들을 한 번 정리해 보고자 한다.Console OpenWindows / Linux: Ctrl+Shift+JMac: Cmd+Opt+J개발자 도구가 열린 상태: ESCConsole Clearclear() 입력Ctrl+LLog Options console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있다. 주로 사용하는 기능은 다음과 같다.Hide network: 404 또는 500 오류 등은 보여주지 않는다.Log XMLHttpRequst: XML Request를 기록Preserve log: refresh나 탐..

Javascript의 속도가 점점 빨라지면서 이를 이용하여 단순 HTML코드에서 사용되는 스크립트를 넘어, 어플리케이션을 만드는 데에도 사용되고 있다. 따라서 현재 트렌드를 따라가기 위해, 현재 사용되고 있는 ECMA5 문법에 새로운 스펙이 추가 된 ECMA2015(es6)가 표준화 되었다. 그러나 현재 몇몇 브라우저에서 제한된 문법만 지원되고 있을 뿐이어서 실제 개발이나 서비스에 도입하는데는 시간이 걸릴 것으로 보인다. 그렇다면 미리 적용해 볼 수 있는 방법은 없을까? 결론부터 말하자면 가능하다. Babel같은 트랜스파일러를 통해 es6 문법을 es5로 컴파일하여, 문법은 es6로 작성하고 실행은 es5로 하는 것이다. 이 페이지에서는 Babel을 설치한 후 앞으로 사용 될 es6 문법을 미리 공부해 ..

배열은 언어에 구분없이 많이 사용되는 자료구조이다. 여기서 자바스크립트에 사용되는 배열을 한번 정리해 보자. 1. 배열 선언 배열을 만드는 방법은 여러가지가 있다. 1) [ ]를 이용하여 배열을 선언하는 방법 var numbers = []; // 배열 선언 var numberArray = [ 1, 2 , 3, 4 , 5]; 2) Array 생성자를 호출하는 방법 var numbers = new Array(); var numberArray = new Array(1, 2, 3, 4, 5); 파라미터를 1개만 줄 경우 배열의 길이를 할당한다. var numbers = new Array(5); // 길이가 5인 배열 생성 일반적으로 1번 방법을 사용하는것이 더 효율적이다. 2. 배열에 접근하기배열에 접근할 땐 ..

자바스크립트에서 변수선언은 다른 언어와 다른 특징이 존재한다.여기에 자바스크립트만이 가지는 변수 타입의 특징을 정리해 보자. 1. 변수 선언 방식자바스크립트에서 변수는 var 키워드를 사용하여 선언한다.C언어에서는 자료형에따라 int, float, char 형 등으로 변수를 선언하지만, js에서는 var 키워드 하나로 모두 통일한다. 다른 언어와 마찬가지로 선언과 동시에 초기화 할 수 있다.var x;var y = 10; // 정수var a = 10, b = 20, c = 30;var floatValue = 1.2; // 실수var flag = true; // boolvar myString = "Hello World!"; // string 2. 유효 범위자바스크립트의 변수는 함수 범위(function s..