Minji Log

Tanstack Query 는 캐싱을 제공한다. 공식 문서에 useQuery 훅을 사용하여 데이터 캐싱과 관리 방법을 간단한 예시로 설명하고 있어서 정리해 보았다. 예시 useQuery 훅을 통해 ['todos'] 쿼리 키를 사용하는 쿼리를 실행fetchTodos 함수로 네트워크 요청을 통한 데이터 받기gcTime 은 5분, staleTime 는 0초로 설정위의 조건대로 기본 상황을 설정하였으며, 해당 조건을 토대로 캐싱이 어떻게 이루어지고 데이터가 삭제되는 과정을 알아보자. 단계별 설명1. 처음 실행useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 을 처음 호출하면 아직 캐시된 데이터가 없다. 그러므로 로딩 상태를 보여주고 네트워크로 요청을 보낸다. 이때..

브라우저에서 alert 를 호출하면 뜨는 알림창은 브라우저 자체에서 제공하는 기본적인 UI 이다. 그러다 보니 따로 손봐주지 않으면 굉장히 밋밋하고 못생긴(?) 알림창이 나온다. 나는 이쁜 것을 좋아하기 때문에 라이브러리를 사용해서 알림창을 이쁘게 만드는 법을 알아보았다. 사용할 라이브러리는 sweetalert2 이다. 라이브러리 적용 전아래 이미지는 alert 를 호출한 UI 이다. 이 밋밋한 UI 를 라이브러리를 사용해서 변경해 볼 것이다. Sweetalert2 적용 방법1. 설치yarn add sweetalert2 2. importimport Swal from "sweetalert2"; 3. 코드에 적용import "./App.css";import Swal from "sweetalert2";func..

프로젝트 생성Vite 공식문서 에 나와 있는 방법대로 yarn create vite 명령어로 프로젝트를 생성해 주었다. 개발환경은 React, Javascript 이다. 할일 목록 화면에 보여주기TodoList.tsxconst todos = [ { id: 1, text: "Buy milk" }, { id: 2, text: "Clean the house" }, { id: 3, text: "Go for a run" }, { id: 4, text: "Finish homework" }, { id: 5, text: "Call mom" }, { id: 6, text: "Buy groceries" }, { id: 7, text: "Walk the dog" }, { id: 8, text: "Read a ..

라액트를 사용해서 개발하는 것을 처음 경험해 보았다! 프로젝트를 하면서 프로젝트 구조에도 신경 쓰게 되었다. 개발하다 보니 컴포넌트 파일이 많이 생기게 되어서 컴포넌트별로 CSS 도 따로 관리하고 싶어서 CSS 파일을 분리하게 되었다.  파일 분리 후 이슈엇 그런데 문제가 생겼다. 분명 난 A, B 두 개의 컴포넌트가 있고 A.css 와 B.css 를 만들었고 해당하는 컴포넌트에 맞는 css 를 import 해서 사용을 했는데 A.css 에 추가한 스타일이 B 컴포넌트에도 적용이 되고 있었다. 🤯 띠용그 이유를 찾아보니까 css 파일의 스타일은 기본적으로 전역으로 적용된다고 한다. React 는 css 를 특별히 제한하지 않는다나 뭐라나... 아무튼 이러한 이유로 파일 분리가 의미없나 싶었는데 다른 방..