React Query는 이제 TypeScript로 작성되어, 라이브러리와 프로젝트가 타입 안전성을 보장합니다!유의사항현재 타입은 TypeScript v4.7 이상을 요구합니다.이 저장소의 타입 변경은 비파괴적(non-breaking)으로 간주되며, 일반적으로 패치 세멘틱 버전 변경으로 릴리스됩니다(모든 타입 개선이 주요 버전이 되지 않도록 하기 위함).react-query 패키지 버전을 특정 패치 릴리스로 고정하고, 릴리스 간에 타입이 수정되거나 업그레이드될 수 있다는 기대를 가지고 업그레이드하는 것이 강력히 권장됩니다.React Query의 비타입 관련 공개 API는 여전히 시멘틱 버전 관리를 매우 엄격하게 따릅니다. 타입 추론React Query의 타입은 일반적으로 잘 흐르기 때문에, 사용자가 직접 ..

React Query 를 사용한다면 React Query Devtools을 함께 사용하는 것이 좋습니다.이 도구는 React Query의 내부 작동을 시각화하는 데 도움을 주며, 문제가 생겼을 때 디버깅에 많은 시간을 절약할 수 있습니다개발 도구 설치 및 가져오기개발 도구는 별도의 패키지로 설치해야 합니다 npm i @tanstack/react-query-devtools 또는 pnpm add @tanstack/react-query-devtools 또는 yarn add @tanstack/react-query-devtools 또는 bun add @tanstack/react-query-devtools  Next 13+ App Dir에서는 작동하기 위해 개발 종속성으로 설치해야 합니다. 개발 도구는 다음과 같이..

삽입정렬이란삽입 정렬은 가장 큰 요소를 찾아 하나씩 이동하거나, 각 루프당 가장 작은 요소를 찾아 갱신하는 대신,각 요소를 정렬된 배열에 삽입하는 방식이다. 삽입 정렬은 두 번째 자료부터 시작하여그 앞(왼쪽)의 자료들과 비교하여 삽입할 위치를 지정한 후자료를 뒤로 옮기고 지정한 자리에 자료를 삽입하여 정렬하는 알고리즘이다. 삽입 정렬은 루프당 하나의 키 값을 가진다첫번째 루프의 키 값은 두번째 값이다 (그 다음 루프에서 키값은 세번째, 다음은 네번째 이렇게 된다)그리고 키값을 앞의 값(첫번째 값)과 비교하여 삽입될 위치를 찾는다첫 번째 값을 한칸 뒤로 이동시킨다그리고 삽입될 위치인 첫 번째 위치에 키 값을 삽입한다 즉, 두번째 값은 첫번째와 비교,세번째 값은 두번째와 첫번째 값과 비교,네번째 값은 세번째..

React Query는 React 애플리케이션에서 서버 상태를 관리하는 데 유용한 라이브러리입니다.이 라이브러리는 React v18 이상과 호환되며, ReactDOM 및 React Native와 함께 사용할 수 있습니다.React Query를 설치하고 사용해 보세요! NPM을 통한 설치React Query를 NPM을 통해 설치할 수 있습니다. 아래 명령어 중 하나를 사용하여 설치하세요 npm i @tanstack/react-query 또는 pnpm add @tanstack/react-query 또는 yarn add @tanstack/react-query 또는 bun add @tanstack/react-query CDN을 통한 설치모듈 번들러나 패키지 관리자를 사용하지 않는 경우, ESM.sh와 같은 ES..

React Query 공식문서를 번역하고 정리하였습니다. TanStack Query (구 React Query)는 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 종종 설명되지만,기술적으로는웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하며, 동기화하고 업데이트하는 과정을 간편하게 해줍니다.동기대부분의 핵심 웹 프레임워크는 데이터 가져오기 또는 업데이트에 대한 일관된 방법을 제공하지 않습니다.이로 인해 개발자들은 데이터 가져오기에 대한 엄격한 의견을 포함하는 메타 프레임워크를 구축하거나,자신만의 데이터 가져오기 방법을 발명하게 됩니다. 메타 프레임워크란 데이터 처리에 대한 명확한 규칙이나 구조를 제공하는 프레임워크를 의미합니다.이는 보통 구성 요소 기반 상태와 부작용을 조합하거나, 비동기 데이터를 앱..

모바일 시뮬레이터 - 반응형 테스트 도구 모바일 시뮬레이터 - 반응형 테스트 도구 - Chrome 웹 스토어여러 모델을 갖춘 컴퓨터용 스마트폰 및 태블릿 시뮬레이터로 모바일 반응형 웹사이트를 테스트합니다.chromewebstore.google.com 웹사이트가 다양한 화면 크기에서 어떻게 나타나는지를 확인하는 것은 매우 중요합니다.모바일 시뮬레이터는 프론트엔드 개발자가 사이트를 여러 모바일 기기에서 테스트할 수 있도록 돕는 유용한 도구입니다.이 확장 프로그램의 장점은 다음과 같습니다. 다양한 기기 지원 여러 종류의 스마트폰과 태블릿을 선택하여 실제 사용자 경험을 시뮬레이션할 수 있습니다 간편한 녹화와 캡쳐간편하게 해당 시뮬레이터로 보이는 모습을 녹화하거나 캡쳐할 수 있습니다 간편한 사용성다른 시뮬레이터에..

베지어 곡선이란 (Bézier Curve)베지어 곡선(Bézier Curve)은 컴퓨터 그래픽스에서 널리 사용되는 곡선으로, 조절점을 통해 정의됩니다. 이 곡선은 다양한 조절점의 수에 따라 그 형태가 달라지며,특히 CSS 애니메이션에서 도형을 그릴 때, 백터 그래픽스나 고급 애니메이션을 다룰 때 유용하게 사용됩니다. 이번에는 베지어 곡선의 기본 개념과 카스텔조 알고리즘(De Casteljau’s algorithm)을 포함한 수학적 정의를 살펴보겠습니다. 베지어 곡선이 사용되는 곳웹 애니메이션CSS 애니메이션에서 이징 함수로 사용되어 애니메이션의 가속과 감속을 부드럽게 조정합니다.예를 들어, cubic-bezier 함수를 사용하여 custom easing 효과를 만들 수 있습니다.SVGSVG에서 경로를 그..

\W는 비문자단어(알파벳, 숫자, 밑줄 제외한 단어)와 일치한다소문자 w인 \w는 단어 문자를 매치 했던 것과 달리대문자 \W는 비단어 문자를 매치합니다비단어 문자란알파벳(A-Z a-z), 숫자, 언더스코어가 아닌 모든 문자를 포함합니다 \W는 [^A-z0-9_] 로 대체할 수 는 있습니다하지만 A-z 범위에는 ASCII 테이블에 따라 일부 추가 문자가 포함되어 있습니다( ex: [, \, ], ^, _, `) 문자열: AS _34:AS11.23  @#$ %12^*정규표현식: \W첫 번째 일치: AS _34:AS11.23  @#$ %12^*모든 일치: AS _34:AS11.23  @#$ %12^* 비단어 문자를 찾는 것입니다 정규표현식: \w첫 번째 일치: AS _34:AS11.23  @#$ %12^*모..

\w 는 모든 단어문자(알파벳, 숫자, 밑줄) 와 일치한다정규표현식에서 \w 는 단어문자를 매칭하는데 사용됩니다단어문자에는 영문자, 숫자, 밑줄(_) 을 포함합니다그러나 일부 언어에서는 이런 약어가 인식되지 않을 수 있습니다.이때는 대신 문자 클래스인 [A-z0-9_]를 사용합니다 문자열 : A1 B2 c3 d_4 e:5 ffGG77--__--정규표현식: \w첫 번째 일치: A1 B2 c3 d_4 e:5 ffGG77--__--모든 일치: A1 B2 c3 d_4 e:5 ffGG77--__-- 이 표현식은 단어 문자를 하나 매칭합니다.정규표현식: \w*첫 번째 일치: A1 B2 c3 d_4 e:5 ffGG77--__--모든 일치: A1 B2 c3 d_4 e:5 ffGG77--__-- 이 표현식은 0개 이상의..

정량자 뒤 물음표 추가하여 최소한의 횟수로 지정정규 표현식의 기본 동작과 최소 매칭을 위한 수정된 동작을 수행합니다. 기본적인 정량자의 기능에 물음표(?)가 뒤따르면최소한의 횟수로 일치하도록 동작이 변경됩니다. 예를 들면 +(더하기) 연산자의 경우1회 이상 일치이므로최소한의 횟수는 1개가 됩니다. 문자열 : One ring to bring them all and in the darkness bind them정규표현식: r.*첫번째 일치: One ring to bring them all and in the darkness bind them모든 일치: One ring to bring them all and in the darkness bind them 이 표현식은 'r' 다음에 0개 이상의 어떤 문자도 포함..