🔍 TanStack Query란?TanStack Query는 리액트(React)에서 서버로부터 데이터를 가져오고,이를 효율적으로 캐싱하고 동기화하며 로딩/에러 상태까지 관리할 수 있는 라이브러리이다. 원래는 React Query라는 이름으로 시작했으며 현재는 TanStack이라는 오픈소스 조직의 일부로 발전하면서다양한 프레임워크(Vue, Svelte, Solid 등)에서도 사용 가능한 범용 라이브러리로 성장했다. TanStack Query는 클라이언트 상태 관리 도구(Redux, Recoil 등)와는 다르게,서버 데이터에 특화되어 있다. 🤔 React Query와 TanStack Query의 관계는? 처음에는 React Query라는 이름으로 널리 사용되어있지만,이후 개발 범위가 React를 넘어 ..

🔍 스켈레톤 UI란?스켈레톤 UI는 콘텐츠가 로딩되는 동안 표시되는 저해상도 미리보기 또는 자리 표시자 화면으로,실제 콘텐츠의 구조와 레이아웃을 시각적으로 나타낸다.이는 사용자에게 콘텐츠가 곧 표시될 것이라는 시각적 피드백을 제공하고,페이지가 로딩 중이라는 인상을 주어 체감 로딩 시간을 줄여준다. 쉽게 말해, 실제 내용이 로딩되기 전에 잠깐 보여주는'가짜 레이아웃'이고, 이걸로 사용자에게 기다리는 시간을 덜 지루하게 만들어준다. 🎯 스켈레톤 UI의 목적1️⃣ 인지된 성능 향상 실제로 데이터를 불러오는 데 걸리는 시간은 동일하더라도,사용자가 느끼는 로딩 시간은 훨씬 짧게 느껴질 수 있다. 왜❓-> 아무것도 없는 빈 화면보다,'곧 나올 콘텐츠의 틀'을 미리 보여주는 것만으로도사용자에게 "지금 뭔가 ..

🔍 axios란?axios는 Promise 기반의 HTTP 클라이언트 라이브러리로,브라우저와 Node.js에서 모두 사용할 수 있다. 쉽게 말해,서버에 데이터 요청(GET)서버에 데이터 전송(POST)서버에서 데이터를 수정(PUT/PATCH)서버의 데이터를 삭제(DELETE)할 때 JavaScript에서 아주 간편하게 사용할 수 있는 도구이다. 🛠 설치 방법npm install axios 🤔 왜 axios를 사용하지?근데 왜 `fetch` 대신 `axios`를 쓸까? 자바스크립트에는 기본적으로 `fetch()`라는 내장 API가 있지만,실무에서는 `axios`를 훨씬 더 많이 사용한다. 그 이유는,axios가 fetch보다 훨씬 사용하기 간편하고, 기능도 더 풍부하기 때문이다. 📌 axio..

⚙ VS Code 설정1️⃣ VS Code 설치 Visual Studio Code - Code Editing. RedefinedVisual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com👉 VS Code 공식 웹사이트에서 본인 운영체제에 맞는 버전을 다운로드하면 된다. 2️⃣ 필수 확장 프로그램 설치VS Code를 열고 왼쪽 사이..

🔍 useState란?`useState`는컴포넌트에 state 변수를 추가할 수 있는 React Hook React 컴포넌트는 기본적으로 "입력(props)을 받아서 화면(UI)을 출력"하는 함수인데,화면을 바꾸려면 내부에서 기억하고 있는 값. 즉, 상태(state)가 필요하다. 예를 들어,버튼을 눌렀을 때 숫자가 1씩 올라가는 UI를 만들려면,그 숫자를 기억하는 저장공간이 필요하다.그 저장공간이 바로 👉 '상태(state)' 그리고 이 상태를 다룰 수 있게 해주는 게 👉 'useState' ⚛️ 기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(initialValue);`state` : 현재 상태의 값 (읽기용)..