개발기록

보호되어 있는 글입니다.

✪ 상태 - 어떠한 의미를 지닌 값 - 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 - 웹 애플리케이션을 구성하는 변경될 수 있는 데이터 ✪ 웹에서의 상태 ✧ UI: 상호 작용이 가능한 모든 요소의 현재 값은 상태이다. 예) 다크/라이트 모드, 각종 input, 알림창의 노출 여부 등 ✧ URL: 브라우저에서 관리되고 있는 상태값. 상태는 사용자의 라우팅에 따라 변경됨. 예) https://www.airbnb.co.kr/rooms/2024?adults=2 ➔ 상태: roomId=2024, adults=2 ✧ 폼(form): 로딩 중인지(loading), 현재 제출됐는지(submit), 접근이 불가능한지(disabled), 값이 유효한지(validation) 등 모두가 상태로 관리된다. ✧..

1. 로그인, 회원가입 UI 구현  2. Firebase 연동firebase 가입한 뒤, 프로젝트 생성해주고 기타 설정해준다. 자세한 설명은 docs 참고//firebase.ts// Import the functions you need from the SDKs you needimport { initializeApp } from "firebase/app";import { getAnalytics } from "firebase/analytics";// TODO: Add SDKs for Firebase products that you want to use// https://firebase.google.com/docs/web/setup#available-libraries// Your web app's Fireb..

🌱  결과물 🌱  디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 아래는 디바운싱을 적용하기 전과 후의 검색어 요청 모습이다. "안녕하세요" 라는 검색어를 입력 중인데, 적용 전은 매 입력마다 요청을 하고, 적용 후에는 최종 검색어만 요청을 한다.// 디바운싱 const [debouncedInput, setDebouncedInput] = useState(input); useEffect(() => { const handler = setTimeout(() => { setDebouncedInput(input); }, 300); // 300ms 지연 return () => { clearTimeout(hand..

🌱  결과물  🌱  React Query - useInfiniteQuery thecatapi에서 고양이 사진을 무한으로 불러오기 위해 react-query에서 제공하는 useInfiniteQuery 훅을 사용했습니다.//UseFetchInfiniteData.tsimport { useInfiniteQuery } from '@tanstack/react-query';async function fetchInfiniteData({ pageParam = 1 }) { const limit = 10; // 한 번에 불러올 데이터 수 const response = await fetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${pageP..

🌱  결과물 🌱  Lighthouse 성능 측정 🌱  Tanstack Query - 비동기 API 호출 // src/hooks/useFetchData.tsimport { useQuery } from '@tanstack/react-query';async function fetchData (page: number, limit: number = 12) { // sessionStorage 데이터 존재 유무 확인. const cachedData = sessionStorage.getItem(`catImages-page-${page}`); if (cachedData) return JSON.parse(cachedData); const response = await fetch(`https://ap..

React Query란? React application의 데이터를 가져오기(fetching)위한 라이브러리 기능 캐싱(특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것) client 데이터와 server 데이터 간의 분리 백그라운드에서 오래된 데이터 업데이트 데이터가 얼마나 오래되었는지 알 수 있음 데이터 업데이트를 가능한 빠르게 반영 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화 서버 상태의 메모리 및 가비지 수집 관리 구조 공유를 사용하여 쿼리 결과를 메모화 1. 설치 npm i @tanstack/react-query # or pnpm add @tanstack/react-query # or yarn add @tanstack/react-query 개발자도구: Re..